Run code and get active tab page on tab page change
-
I am currently using a tabbar design. Using AngularJS 1.
<body ng-controller="AppController as app"> <ons-template id="main.html"> <ons-page> <ons-toolbar> <div class="center">{{app.title}}</div> </ons-toolbar> <ons-tabbar position="auto" ons-show="app.onTabChange()"> <ons-tab page="main.tab1.html" label="Tab 1" active></ons-tab> <ons-tab page="main.tab2.html" label="Tab 2"></ons-tab> <ons-tab page="main.tab3.html" label="Tab 3"></ons-tab> </ons-tabbar> </ons-page> </ons-template> </body>
My .js looks like this:
ons.bootstrap() .controller('AppController', function($scope) { this.onTabChange = function(){ console.log("tab change detected."); });
Requirement #1: Checking the active tab page and running code to update the data for the tab.
Currently, with the
ons-show
attribute, I am able to hook up myonTabChange()
to detect the change. However, I do not know how to get the active tab name. There is a method getActiveTabIndex() forons-tabbar
but how can I call it without a JavaScript object reference to theons-tabbar
object? In normal JavaScript, I could probably use adocument.getElementById(...)
ordocument.querySelector(...)
but not in AngularJS.When
onTabChange()
is called, I also cannot find a parameter argument passed in that indicate theons-tab
object.I have not found information or example on how to achieve this. Any help?
-
@wetfeet Check
var
attribute. Basically,<ons-tabbar var="myTabbar">
and then you can use$scope.myTabbar
to call functions or anything.
-
@Fran-Diox Fantastic. Working fine, thanks.
Though I am still confused why
$scope.tabbar
works and notthis.tabbar
inonTabChange()
. Still need to brush up on my Javascript. :grin: