与参数温泉UI导航 [英] Onsen ui navigation with parameters

问题描述

我使用的温泉UI与打字稿和angularJS与附件滑动菜单：

I am using onsen ui with typescript and angularJS with an ons-sliding-menu:

  <ons-sliding-menu menu-page="menu.html" main-page="link/to/some/page.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-toolbar modifier="transparent"></ons-toolbar>
         <ons-list class="menu-list">
            <ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/page.html', {closeMenu: true})">
               Home
            </ons-list-item>
        <ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/other/page.html', {closeMenu: true})">
               Home
            </ons-list-item>
 </ons-list>
      </ons-page>
   </ons-template>

这给了我我的菜单中，它是罚款....当我浏览到的链接/到/一些/ page.html即可的，我需要一些参数推的链接/到/一些/其它/ page.html即可的使用code：

This gives me my menu, an it is fine.... When I navigated to link/to/some/page.html, I need to push some parameters to link/to/some/other/page.html using that code:

 $scope.myNavigator.pushPage("link/to/some/other/page.html", {param1: "bla", param2: "blabla"});

我看用这个code中的参数：

I read the parameters using this code:

var page = $scope.myNavigator.getCurrentPage();
console.log(page.options.param1); // Should return "bla"

这给了我一个错误，因为的参数1 的没有定义。我不知道为什么会这样，因为它是从onsenUI页的code。
我想这是因为我已经定义的页面的链接/到/一些/其它/ page.html即可的在我的附件 - 滑动菜单的....

This gives me an error, because param1 is not defined. I am not sure why this happens, because it is the code from the onsenUI-page. I think this is because I already defined the page link/to/some/other/page.html in my ons-sliding-menu ....

每个网页看起来是这样的：

Every page looks like this:

<ons-navigator title="Navigator" var="myNavigator">
   <div ng-controller="ControllerOfPage">
      <ons-page>
         <ons-toolbar>
            <div class="left">
               <ons-toolbar-button ng-click="menu.toggle()">
                  <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
               </ons-toolbar-button>
            </div>
            <div class="center">{{title}}</div>
         </ons-toolbar>
PAGE CONTENT
      </ons-page>
   </div>
</ons-navigator>

有什么建议？谢谢！

Any suggestions? Thank You!

推荐答案

您说的每个页面看起来像你粘贴之一。你有几个＆LT; ONS-航海家GT＆; 标签？你真的应该只需要一个。

You say every page looks like the one you pasted. Do you have several <ons-navigator> tags? You should really only need one.

如果您

$scope.navigator.pushPage('somepage.html', {param1: 'bla'});

您应该能够做到

console.log($scope.navigator.getCurrentPage().options.param1);

请参阅笔：

HTTP：//$c$cpen.io/argelius/pen/OPJRPe

你有没有连接到某些范围的导航仪是控制器为你按下页面范围的家长吗？

Do you have the navigator attached to some scope that is parent of the scope of the controller for the page you push?

在您的父母控制器，你可以做：

In your parent controller you could do:

ons.ready(function() {
  $scope.navigator = $window.myNavigator
});

，然后使用该对象的子控制器。

And then use that object in the child controllers.

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