如何使用ons-navigator打开一个页面,其中包含一个ons-tabbar,并告诉它显示一个特定的标签?我有一个带有一些按钮的菜单,根据推送的那个按钮,它必须显示在标签栏页面上,并且特定标签处于活动状态。
这是我到目前为止所尝试的:
index.html(主页)
<body>
<ons-navigator animation="slide" var="app.navi">
<ons-page>
<ons-toolbar>
<div class="center">Inicio</div>
</ons-toolbar>
<div>
<p style="text-align: center">
<ons-button modifier="large" ng-click="app.navi.pushPage('tabs.html', {params: { tab: 0 }});">OPEN TAB 0</ons-button>
</p>
<p style="text-align: center">
<ons-button modifier="large" ng-click="app.navi.pushPage('tabs.html', {params: {tab: 1}});">OPEN TAB 1</ons-button>
</p>
</div>
</ons-page>
</ons-navigator>
</body>
tabs.html
<div ng-controller="TabsCtrl">
<ons-tabbar var="tabbar" position="top">
<ons-tabbar-item
icon="home"
label="Home"
page="page0.html"></ons-tabbar-item>
<ons-tabbar-item
icon="comment"
label="Comments"
page="page1.html"></ons-tabbar-item>
</ons-tabbar>
</div>
AngularJS控制器:
angular.module('myControllers', [])
.controller('TabsCtrl', ['$scope', function ($scope) {
// Trying to set active tab on the controller
$scope.tabbar.setActiveTab($scope.ons.navigator.getCurrentPage().options.params.tab);
}]);
但是,当我在主页面中按下一个按钮时,调试器说不能在undefined上调用方法setActiveTab
。我知道这可能是因为在执行控制器时没有创建标签栏,但是根据一些导航器参数,我无法弄清楚在显示页面时如何显示特定标签。 / p>
答案 0 :(得分:2)
是的,当执行控制器时,不会有任何tabbar对象,但它会立即创建。
因此,您可以使用控制器中的setImmediate(fn)
来调用setActiveIndex(idx)
。
示例:
angular.module('app', ['onsen'])
.controller('TabsController', function() {
setImmediate(function() {
var tabIndex = app.navi.getCurrentPage().options.params.tab;
app.tabbar.setActiveTab(tabIndex);
});
});
笔: http://codepen.io/argelius/pen/XJryPM
实际上,在1.2.0中有一个'ons-tabbar:init'
DOM事件你可以听,哪个可能更好用。事件对象将附加tabbar对象,以便您可以执行以下操作:
someElement.addEventListener('ons-tabbar:init', function(event) {
var tabBar = event.component;
tabBar.setActiveTab(someIndex);
});