Onsen UI带参数的导航
我正在使用onsen ui、typescript和AngularJS,使用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})">
主页
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/other/page.html', {closeMenu: true})">
主页
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
这给我提供了我的菜单,一切都很好……当我导航到link/to/some/page.html时,我需要使用以下代码将一些参数推送到link/to/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); // 应返回“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>
页面内容
</ons-page>
</div>
</ons-navigator>
有什么建议吗?谢谢!
我遇到了同样的问题,我的解决方案基本上是将两者结合在一起,像这样:
<ons-sliding-menu
menu-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu">
<div class="main">
<ons-navigator title="导航器" var="myNavigator" page="home.html"></ons-navigator>
</div>
</ons-sliding-menu>
这样你就可以同时使用SlideMenu和Navigator模式。
你说每个页面看起来都像你粘贴的那个。你有几个
<ons-navigator>
标签吗?你真的只需要一个。如果你这样做
你应该能够做到这一点
参见笔:
http://codepen.io/argelius/pen/OPJRPe
你是否将导航器附加到控制器推送页面的控制器的父作用域中?
在你的父控制器中,你可以这样做:
然后在子控制器中使用该对象。