angularjs - How to open page with ons-tabbar, and display specific tab -
how can open page, contains ons-tabbar inside, , tell show specific tab, using ons-navigator? have menu buttons, , depending 1 pushed, has displayed tabbar page, specific tab active.
this have tried far:
index.html (main page)
<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 controller:
angular.module('mycontrollers', []) .controller('tabsctrl', ['$scope', function ($scope) { // trying set active tab on controller $scope.tabbar.setactivetab($scope.ons.navigator.getcurrentpage().options.params.tab); }]); however, when force buton in main page, debugger says cannot phone call method setactivetab on undefined. know may because tabbar hasn't been created when controller executed, can't figure out how show specific tab when page displayed, based on navigator parameter.
yeah it's true when controller executed there won't tabbar object, created after.
so utilize setimmediate(fn) in controller phone call setactiveindex(idx).
example:
class="lang-js prettyprint-override">angular.module('app', ['onsen']) .controller('tabscontroller', function() { setimmediate(function() { var tabindex = app.navi.getcurrentpage().options.params.tab; app.tabbar.setactivetab(tabindex); }); }); pen: http://codepen.io/argelius/pen/xjrypm
actually, in 1.2.0 there 'ons-tabbar:init' dom event hear improve use. event object attach tabbar object like:
someelement.addeventlistener('ons-tabbar:init', function(event) { var tabbar = event.component; tabbar.setactivetab(someindex); }); angularjs onsen-ui
No comments:
Post a Comment