结合 Onsen UI 滑动菜单和导航答案

【问题标题】：Combining Onsen UI sliding-menu with navigation结合 Onsen UI 滑动菜单和导航
【发布时间】：2015-03-12 07:34:51
【问题描述】：

我目前正在使用 onsen ui 构建我的第一个 cordova 应用程序。到目前为止看起来很有希望！但是我遇到了一个我无法解决的问题，我找不到答案。

我希望这是一个初学者问题，并且可以由具有更多温泉经验的人轻松解决。

我希望有一个滑动菜单，并且在主屏幕上仍然是“通常”的导航。

我尝试了两种不同的方法：

<ons-navigator var="app.navi">
    <ons-page>
        <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
    var="menu" type="reveal" max-slide-distance="260px" swipable="true">
        </ons-sliding-menu>
    </ons-page>
</ons-navigator>

<ons-template id="menu.html">
    <ons-page modifier="menu-page">

        <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
          Continue last story
        </ons-list-item>

        ...

    </ons-page>
</ons-template>

<ons-template id="page1.html">
 <ons-page ng-controller="BooksCtrl">
      // Navigation in controller:
      app.navi.pushPage("new_action.html", {
            animation: "lift"
        });

  </ons-page>
</ons-template>

结果：没有错误消息。但是一旦我从第一个主页导航到另一个页面，我就无法打开滑动菜单。（与 github repo 中名为 navigator_sliding-menu 的官方演示相同）

        <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
    var="menu" type="reveal" max-slide-distance="260px" swipable="true">
        </ons-sliding-menu>


<ons-template id="menu.html">
    <ons-page modifier="menu-page">

        <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
          Continue last story
        </ons-list-item>

        ...

    </ons-page>
</ons-template>

<ons-template id="page1.html">
 <ons-navigator animation="slide" var="app.navi">
 <ons-page ng-controller="BooksCtrl">
      // Navigation in controller:
      app.navi.pushPage("new_action.html", {
            animation: "lift"
        });

  </ons-page>
  </ons-navigator>
</ons-template>

与此处相同：http://codepen.io/argelius/pen/ogXGeV 所以导航元素被移动到第一个主页。结果：我可以浏览应用程序（通过控制器中的 pushPage），并且可以从每个页面打开菜单。但是，一旦我单击菜单中的链接，任何 pushPage 调用都会导致错误消息：

Uncaught TypeError: Cannot read property '$$phase' of null
Uncaught Error: Fail to fire "pageinit" event. Attach "ons-page" element to the document after initialization.

有什么想法吗？

提前谢谢你

【问题讨论】：

这里有一个类似的问题：stackoverflow.com/questions/28878385/… 而本教程可能会有所帮助：onsen.io/blog/developing-hybrid-mobile-apps-with-onsen-ui
我看到了这个。这里的问题：一旦您尝试导航到具有导航器元素的页面，我会收到以下错误：Error: You can not supply no "ons-page" element to "ons-navigator"。如果您导航到的页面是“结束页面”，则它可以正常工作，因此无需进一步导航。我更改了示例：codepen.io/anon/pen/WbaXrG 如果您单击菜单中的浏览酒店，然后您会收到错误的第一项。
错误提示您必须使用<ons-page> 元素作为主页上的第一个元素，但您有<ons-navigator>。只需切换和即可正常工作：codepen.io/anon/pen/LEggEy

标签： onsen-ui

【解决方案1】：

尝试在 index.html 中添加<ons-sliding-menu>。例如，您的索引将包含以下内容：

<ons-sliding-menu
    menu-page="menu.html" main-page="page1.html" side="left"
    var="menu" type="reveal" max-slide-distance="260px" swipable="false" swipe-target-width="50">
  </ons-sliding-menu>

然后在您要使用导航的 page1.html 上。使用你的

<ons-page modifier="menu-page">

        <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
          Continue last story
        </ons-list-item>

最后，如果您想要任何尾迹页面。使用导航器到最后一页。 v-page2.html-v

<ons-navigator var="app.navi">
<ons-list-item class="menu-item" ng-click="app.navi.pushPage("new_action.html", {
        animation: "lift"
    })">
          Continue last story
        </ons-list-item>
<ons-navigator>

返回。只需使用 ng-click="app.navi.popPage()" 但就像 DTFagus 所说的那样。使用导航器更适合结束页面。

【讨论】：