Run code and get active tab page on tab page change

wetfeet

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 my onTabChange() to detect the change. However, I do not know how to get the active tab name. There is a method getActiveTabIndex() for ons-tabbar but how can I call it without a JavaScript object reference to the ons-tabbar object? In normal JavaScript, I could probably use a document.getElementById(...) or document.querySelector(...) but not in AngularJS.

When onTabChange() is called, I also cannot find a parameter argument passed in that indicate the ons-tab object.

I have not found information or example on how to achieve this. Any help?

Fran Diox

@wetfeet Check var attribute. Basically, <ons-tabbar var="myTabbar"> and then you can use $scope.myTabbar to call functions or anything.

wetfeet

@Fran-Diox Fantastic. Working fine, thanks.

Though I am still confused why $scope.tabbar works and not this.tabbar in onTabChange(). Still need to brush up on my Javascript. :grin: