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:

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Run code and get active tab page on tab page change