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 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?


  • Onsen UI

    @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 not this.tabbar in onTabChange(). Still need to brush up on my Javascript. :grin:


Log in to reply