我正在使用带有 typescript 的 onsen ui 和带有 ons-sliding-menu 的 angularJS:
<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 时,我需要将一些参数推送到 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); // 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>
有什么建议吗?谢谢!
最佳答案
你说每一页看起来都和你粘贴的一样。你有几个<ons-navigator>
标签?你真的应该只需要一个。
如果你这样做了
$scope.navigator.pushPage('somepage.html', {param1: 'bla'});
你应该可以的
console.log($scope.navigator.getCurrentPage().options.param1);
看笔:
http://codepen.io/argelius/pen/OPJRPe
您是否将导航器附加到某个范围,该范围是您推送的页面的 Controller 范围的父范围?
在你的父 Controller 中你可以这样做:
ons.ready(function() {
$scope.navigator = $window.myNavigator
});
然后在子 Controller 中使用该对象。
关于angularjs - 带参数的温泉 ui 导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26905869/