温泉UI页面导航使用参数不工作 [英] Onsen UI page navigation with parameters not working

问题描述

我使用温泉UI和AngularJS，并试图通过对温泉导航的价值，但它不工作。可错了呢？

I'm using Onsen UI and AngularJS, and trying to pass a value on Onsen navigation , but it is not working. What can be wrong?

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;
});  

当我运行它时，第2页在＆LT; P＆GT; *** {{颜色}} *** LT; / P＆GT; 不显示基于颜色在点击按钮（红色或蓝色）。它只显示的颜色：

When I run it, the page2 at <p>***{{ color }}***</p> does not display the color based on clicked button (red or blue). It displays only the color is: !

任何帮助将AP preciated。谢谢你在前进！

Any help will be appreciated. Thank you in advance!!!

推荐答案

您无法通过选择具有滑动菜单和导航器阅读。没有 menu.getCurrentPage（）在滑动菜单，所以你必须使用一个导航仪为。它可以使用 navigator.resetToPage（）方法，而不是 menu.setMainPage效仿（）。首先，你需要一个浏览器作为你的滑动菜单的子：

You cannot pass options with a Sliding Menu and read them with a Navigator. There is no menu.getCurrentPage() in Sliding Menu so you have to use a Navigator for that. It's possible to emulate it using navigator.resetToPage() method instead of menu.setMainPage(). First, you need a Navigator as a child of your Sliding Menu:

<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（）选项。
在这codePEN工作： HTTP：//$c$cpen.io/frankdiox/pen / OyvvGZ

Now you can access to the parameters with navi.getCurrentPage().options. Working in this codepen: http://codepen.io/frankdiox/pen/OyvvGZ

这篇关于温泉UI页面导航使用参数不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！