Onsen UI 参数无效的页面导航

Question

我正在使用 Onsen UI 和 AngularJS，并尝试在 Onsen 导航上传递一个值，但它不起作用。有什么问题吗？

page1.html

<ons-button modifier="clean" ng-click="menu.setMainPage('page2.html', {closeMenu: true}, {color:'red'})"><img src="red.jpg"></ons-button>

<ons-button modifier="clean" ng-click="menu.setMainPage('page2.html', {closeMenu: true}, {color:'blue'})"><img src="blue.jpg"></ons-button>

page2.html

        <p>the color is: {{ color }}!</p>

app.js

app.controller('colorController', function($scope, colorData) {
    var page = $scope.ons.navigator.getCurrentPage();
    $scope.color = page.options.color;
});

当我运行它时，位于 <p>***{{ color }}***</p> 的 page2 不显示基于单击按钮的颜色（red 或 blue )。它只显示颜色是：!

如有任何帮助，我们将不胜感激。提前致谢！！！

Answer 1

您不能使用滑动菜单传递选项并使用导航器阅读它们。滑动菜单中没有 menu.getCurrentPage()，因此您必须为此使用导航器。可以使用 navigator.resetToPage() 方法而不是 menu.setMainPage() 来模拟它。首先，您需要一个导航器作为滑动菜单的子项：

<ons-sliding-menu
  menu-page="menu.html" main-page="navigator.html" var="menu" ...>
</ons-sliding-menu>

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

然后，在菜单中：

<ons-template id="menu.html">
  <ons-page>
    <ons-list>
      <ons-list-item onclick="navi.resetToPage('main.html'); menu.close()">Main</ons-list-item>
      <ons-list-item onclick="navi.resetToPage('page.html', {param1: 'hoge', param2: 'fuga'}); menu.close()">Page with params</ons-list-item>
    </ons-list>
  </ons-page>
</ons-template>

现在您可以使用 navi.getCurrentPage().options 访问参数。在此代码笔中工作：http://codepen.io/frankdiox/pen/OyvvGZ

Onsen UI 参数无效的页面导航

Onsen UI page navigation with parameters not working

angularjs

onsen-ui