Monaca Onsen UI Discord Chat Github Repo

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">
            <div class="center">{{app.title}}</div>
          <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>

    My .js looks like this:

      .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: