Onsen UI myNavigator.pushPage() 功能无法正常工作答案

【问题标题】：Onsen UI myNavigator.pushPage() function not working correctlyOnsen UI myNavigator.pushPage() 功能无法正常工作
【发布时间】：2016-04-11 15:56:38
【问题描述】：

我的 index.html 中有一个登录页面作为模板。我想在同一页面中将用户从 login.html 重定向到 main.html。它返回错误：

无法调用未定义的方法pushPage

<ons-template id="login.html" style="background:#000; opacity:0.3">

        <ons-page ng-controller="RegisterController">

            <ons-row style="padding-top:5em;">
                <ons-col>
                      <div class="formarea">

                        <div class="form-row">
                          <input type="text" class="text-input--underbar width-full" placeholder="Email" id= "email" ng-model="email">
                        </div>

                        <div class="form-row">
                          <input type="password" class="text-input--underbar width-full" id="password" placeholder="Password" ng-model = "password" value="">
                        </div>

                        <div class="lucent">
                          <p class="note">Password - 6 characters or more</p>
                        </div>

                        <div class="vspc form-row">
                          <ons-button modifier="large" style="color:#777" ng-click="loginUser();">Login</ons-button>
                        </div>

                        <div class="vspc form-row">
                          <ons-button modifier="large" style="color:#777">Signup</ons-button>
                        </div>                  
                      </div>
              </ons-col>
            </ons-row>

        </ons-page> 

</ons-template>

<ons-template id="main.html">
    <ons-navigator var="myNavigator">
        <ons-page >
            <ons-tabbar position="top" var="tabbar">
              <ons-tabbar-item  style="margin-top:20px;border-right:1px solid #f5f5f5" icon="ion-navicon greyicon2" onclick="menu.toggleMenu()"></ons-tabbar-item>
              <ons-tabbar-item page="dashboard.html"  icon="ion-ios-pulse-strong" active="true"  class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
              <ons-tabbar-item page="history.html"  icon="ion-stats-bars greyicon2"></ons-tabbar-item>
              <ons-tabbar-item page="recommend.html"  icon="ion-star greyicon2"></ons-tabbar-item>
              <ons-tabbar-item page="capture.html"  icon="ion-pinpoint greyicon2"></ons-tabbar-item> 
            </ons-tabbar>
        </ons-page>
    </ons-navigator>
</ons-template>

控制器

    ons.ready(function() {
      $scope.navigatorx = $window.myNavigator
    }); 

$scope.navigatorx.pushPage('main.html');

还有滑动菜单

<ons-sliding-menu var="menu" main-page="main.html" menu-page="menux.html" max-slide-distance="85%" type="reveal" side="left" >
</ons-sliding-menu>

【问题讨论】：

标签： angularjs onsen-ui

【解决方案1】：

导航器文档here。现在您没有任何主页或组件，只有模板。移除 <ons-template id="main.html"> 包装器并让 <ons-navigator var="myNavigator"> 成为主要元素。

另外，var="myNavigator" 是导航器变量的名称，可在 window.myNavigator 和 $scope.myNavigator 中使用。

【讨论】：

如果我删除 main.html，ons-menu 将停止工作 - 请参见上文

【解决方案2】：

如果我删除“main.html”，那么我的<ons-sliding> 将停止工作。

 <ons-sliding-menu var="menu" main-page="main.html" menu-page="menux.html" max-slide-distance="85%" type="reveal" side="left" >
</ons-sliding-menu>

【讨论】：