Question

我正在使用oncript ui with typescript和angularJS with as-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>

这给了我菜单，很好....当我导航到 link / to / some / page.html 时，我需要将一些参数推送到链接/使用该代码到/ some / other / page.html ：

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

我使用以下代码阅读参数：

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

这给了我一个错误，因为没有定义 param1 。我不确定为什么会发生这种情况，因为它是来自onsenUI页面的代码。我想这是因为我已经在我的 ons-sliding-menu 中定义了 link / to / some / other / page.html 页面。

每个页面都是这样的：

<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>

有什么建议吗？谢谢！

Answer 1

您说每个页面都与您粘贴的页面相似。你有几个<ons-navigator>标签吗？你真的应该只需要一个。

如果你这样做

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

你应该能够做到

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

见笔：

http://codepen.io/argelius/pen/OPJRPe

您是否将导航器附加到某个范围，该范围是您推送的页面的控制器范围的父级？

在您的父控制器中，您可以执行以下操作：

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

然后在子控制器中使用该对象。

Answer 2

我面临同样的问题，我的解决方案基本上是将这两者结合起来

<ons-sliding-menu
        menu-page="menu.html"
        side="left"
        max-slide-distance="250px" 
        var="menu">
        <div class="main">
            <ons-navigator title="Navigator" var="myNavigator" page="home.html"></ons-navigator>
        </div>          
    </ons-sliding-menu>

通过这种方式，您可以同时使用SlideMenu和Navigator模式

带参数的温泉ui导航

2 个答案: