Question

我是Onsen UI的新手，我正忙于使用<ons-navigator>：

<body ng-controller="AppController">
    <!-- Cordova reference -->
    <script src="cordova.js"></script>
    <script src="scripts/index.js"></script>
    <!-- -->

    <ons-navigator title="Navigator" var="myNavigator">

      <!-- Login Screen -->
      <ons-page>

        <div class="login-form" ng-controller="LoginController">
          <input type="text" class="text-input--underbar" placeholder="Membership Number" value="" ng-model="membershipNo">
          <input type="password" class="text-input--underbar" placeholder="Password" value="" ng-model="password">
          <br><br>
          <ons-button modifier="large" class="login-button">Log In</ons-button>
          <br><br>
          <ons-button modifier="quiet" class="register-link" onclick="myNavigator.pushPage('register', { animation : 'lift' } )">Register</ons-button>
        </div>

      </ons-page>
      <!-- Login Screen -->

      <!-- Register Screen -->
      <ons-template id="register">
        <ons-page>

          <div class="register-form" ng-controller="RegisterController">
            <input type="text" class="text-input--underbar" placeholder="Membership Number" value="" ng-model="membershipNo">
            <br><br>
            <ons-button modifier="large" class="register-button" onclick="myNavigator.pushPage('thanks', { animation : 'fade' } )">Register</ons-button>
          </div>

        </ons-page>
      </ons-template>
      <!-- Register Screen -->

      <!-- Thanks Screen -->
      <ons-template id="thanks">
        <ons-page>

          <div class="thanks-notification" ng-controller="RegisterController">
            <h1>Thanks!</h1>
            <h3>Your login credentials will be sent to you via SMS.</h3>
            <br><br>
            <ons-button modifier="large" class="ok-button">OK</ons-button>
          </div>

        </ons-page>
      </ons-template>
      <!-- Thanks Screen -->

    </ons-navigator>

</body>

从登录屏幕导航到注册屏幕可以很好地工作，但是从注册屏幕导航到感谢屏幕会出现以下错误：

Error: Page is not found: thanks
    at Class.<anonymous> (onsenui.js:9703)
    at processQueue (angular.js:14567)
    at angular.js:14583
    at Scope.$get.Scope.$eval (angular.js:15846)
    at Scope.$get.Scope.$digest (angular.js:15657)
    at Scope.$get.Scope.$apply (angular.js:15951)
    at done (angular.js:10364)
    at completeRequest (angular.js:10536)
    at XMLHttpRequest.requestLoaded (angular.js:10477)

我一直在玩，似乎只有当你向导航器添加第二个ons-template时才会发生这种情况。有什么想法吗？

Answer 1

您不应将ons-template放入导航器中。导航器应该只包含一个ons-page，其他一切都应该在它之外。

HERE你可以找到合适的人选代码的CodePen示例（我删除了控制器）。

结构示例：

<ons-navigator var="myNav">
  <ons-page>
    ....
  </ons-page>
</ons-navigator>

<ons-template id="page1.html">
  <ons-page>
    ....
  </ons-page>
</ons-template>

<ons-template id="page2.html">
  <ons-page>
    ....
  </ons-page>
</ons-template>

替代结构，使用page属性（定义导航器初始化时显示的页面）：

<ons-navigator var="myNav" page="main.html">
</ons-navigator>

<ons-template id="main.html">
  <ons-page>
    ....
  </ons-page>
</ons-template>

<ons-template id="page1.html">
  <ons-page>
    ....
  </ons-page>
</ons-template>

另请注意，ons-template只能在index.html中使用。

＆＃34;找不到页面＆＃34;添加第二个<ons-template>标记时出错

1 个答案: