Question

我正在尝试从Onsen UI框架创建一个应用程序。我正在使用多个导航器。在第一页（模板）中，它工作正常。使用其他页面会产生一定的错误。

以下是点击我的谷歌浏览器控制台Error: You can not supply no "ons-page" element to "ons-navigator".

时出现的错误

以下是我的页面模板的样子：

<!-- This one works fine -->
  <ons-template id="directory.html">
    <ons-navigator var="app.navi">
    <ons-page ng-controller="directoryControl">
      <ons-toolbar>
        <div class="center">Directory List</div>
      </ons-toolbar>
      <ons-list>

          <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostCategory in PostCategories">
            <ons-row ng-click="setCurrentCategory(PostCategory.slug);  app.navi.pushPage('directory-page.html', { animation : 'slide' } )">
              <ons-col>
                <div class="name">
                  {{PostCategory.title}}
                </div>
              </ons-col>
              <ons-col width="40px"></ons-col>
            </ons-row>
          </ons-list-item>
      </ons-list>
    </ons-page>
    </ons-navigator>
  </ons-template>


<!-- This one Gives the error while is use the same method above template it worked-->

  <ons-template id="directory-page.html">
    <ons-navigator var="app.navi" >
    <ons-page ng-controller="directoryCategoryListing">
      <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">{{CurrentCategory}}</div>
      </ons-toolbar>

      <ons-list>
        <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostDetail in PostDetails">
          <ons-row ng-click="setCurrentListing(PostDetail.id); app.navi.pushPage('listing-details.html', { animation : 'slide' } )">
            <ons-col width="95px">
              <img src="{{PostDetail.attachments[0].images.square1.url}}" class="thumbnail" ng-if="PostDetail.attachments[0].url != null">
              <img src="images/location1.png" class="thumbnail" ng-if="PostDetail.attachments[0].url == null">
            </ons-col>
            <ons-col>
              <div class="name">
                {{PostDetail.title}}
              </div>

              <div class="desc">
                {{PostDetail.excerpt | htmlToPlaintext}}
              </div>
            </ons-col>
            <ons-col width="40px"></ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>
    </ons-page>
   </ons-navigator>
  </ons-template>


<!-- Here is want to reach -->

 <ons-template id="listing-details.html">
    <ons-page ng-controller="ListingDetailsCtrl" modifier="listing-details">
        <ons-toolbar modifier="transparent">
          <div class="right">
            <ons-toolbar-button><ons-icon icon="ion-ios-chatboxes" style="color: white"></ons-icon></ons-toolbar-button>
          </div>
        </ons-toolbar>
    </ons-page>
 </ons-template>

在同一页面中不能使用多个导航器？

我尝试使用以下方法解决同样的问题，但它有所帮助，但它从导航页面中取消了ons-back-button。

<ons-template id="directory-page.html">
    <ons-page ng-controller="directoryCategoryListing">
      <ons-navigator var="CategoryNavi" >
      <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">{{CurrentCategory}}</div>
      </ons-toolbar>    
      <ons-list>
        <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostDetail in PostDetails">
          <ons-row ng-click="setCurrentListing(PostDetail.id); CategoryNavi.pushPage('listing-details.html', { animation : 'slide' } )">
            <ons-col width="95px">
              <img ng-src="{{PostDetail.attachments[0].images.square1.url}}" class="thumbnail" ng-if="PostDetail.attachments[0].url != null">
              <img ng-src="images/location1.png" class="thumbnail" ng-if="PostDetail.attachments[0].url == null">
            </ons-col>
            <ons-col>
              <div class="name">
                {{PostDetail.title}}
              </div>
            </ons-col>
            <ons-col width="40px"></ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>
     </ons-navigator>
    </ons-page>
  </ons-template>

我只是将标记放在<ons-page>中，并且其工作非常棒，但看起来<ons-back-button>Back</ons-back-button>此后无效。

任何其他方式。

Answer 1

您是否因任何特定原因使用多个导航器？我认为你想要做的导航器就足够了。将一个导航器放在父元素中（＆＃34; directory.html＆＃34;在此代码中）并将其从其余部分中删除。您拨打的网页＆＃34; directory.html＆＃34;也可以访问该导航器，因此无需创建新的导航器。此外，ons-navigator内部应始终包含ons-page，因此请勿将其删除，否则您将看到Error: You can not supply no "ons-page" element to "ons-navigator"。您可以在ons-navigator中将其视为＆＃34;框架＆＃34;其内容为ons-page，根据您推送/弹出的内容而变化。你不需要框架内的框架，是吗？

希望它有所帮助！

Answer 2

您是否尝试更改第二个导航器的关联变量名称？

select order_id, sum(quantity) from orders group by order_id

变量可能存在冲突。

一个页面模板中的ons-navigator多导航器

2 个答案: