This function will do the trick setActiveTab()
First, you have to specify name for the tabbar,
(eg. ons-tabbar[var="myTabbar"])
use setActiveTab() with index (just like array, start from 0) for myTabbar:
myTabbar.setActiveTab(1) for my case below.
AngularJs
var app = angular.module('app', ['onsen']);
app.controller('myCtrl', ['$scope', function($scope) {
$scope.goHome = function() {
// setActiveTab(index, options)
myTabbar.setActiveTab(1, {animation: 'fade'});
};
}]);
Html
<ons-page ng-controller="myCtrl">
<ons-toolbar>
<div class="right">
Toolbar - myCtrl
</div>
</ons-toolbar>
<ons-button ng-click="goHome()">Go Home</ons-button>
<ons-tabbar var="myTabbar">
<ons-tab active="true" icon="ion-images" label="App" no-reload="" page="app.html" persistent=""></ons-tab>
<ons-tab icon="fa-user" label="Home" no-reload="" page="home.html" persistent=""></ons-tab>
</ons-tabbar>
</ons-page>
Summary
The main part:
- use variable name for ons-tabbar
- use setActiveTab(index) with the tabbar variable name to redirect
Thanks for sharing.Keep update your blog
ReplyDeleteAngularjs Training In Hyderabad