"Page Not Found" 添加第二个 <ons-template> 标签时出错

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 中使用。

"Page Not Found" 添加第二个 <ons-template> 标签时出错

"Page Not Found" Error When Adding a Second <ons-template> tag

javascript

cordova

onsen-ui