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不会根据点击的按钮显示颜色（红色或蓝色）。它仅显示颜色为：！

任何帮助将不胜感激。提前谢谢!!!

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页面导航

1 个答案: