Onsen UI带参数的导航
IT小君
2023-05-12T01:18:19 我正在使用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>
有什么建议吗？谢谢！
点击广告，支持我们为你提供更好的服务
评论(2)
IT小君 我遇到了同样的问题，我的解决方案基本上是将两者结合在一起，像这样：
<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模式。
2023-05-12T01:19:27
回复
你说每个页面看起来都像你粘贴的那个。你有几个
<ons-navigator>标签吗？你真的只需要一个。如果你这样做
你应该能够做到这一点
参见笔：
http://codepen.io/argelius/pen/OPJRPe
你是否将导航器附加到控制器推送页面的控制器的父作用域中？
在你的父控制器中，你可以这样做：
然后在子控制器中使用该对象。