Ons-tabbar loading all pages during initialization



  • I am using tabbar in a page. There are two ons-tab items Tab1 and Tab2. The issue is, at the initialization of the page, the functions of Tab2 are also running. For example, I have placed a Progress Dialog in Tab2. It is supposed to display when the user click on the Tab2. But it is displaying during the page intialization. In the code you can see I have a function ShowDialog() on ng-init. It should be only called when the used click on the Tab2.

    <ons-tabbar var="eventsTab">
    <ons-tab active="true"  page="all.html" icon="ion-android-list" label="ALL PROGRAMS"></ons-tab>
    <ons-tab icon="ion-ios-location"  label="Nearby Programs" page="nearby.html" ></ons-tab>
    </ons-tabbar>
    
    <ons-template id="all.html">
    <ons-list ng-controller="EventsController">
    <ons-list-item modifier="chevron" ng-repeat="event in events | filter:searchVal  track by $index" ng-click="showEvent($index)">
    </ons-list-item>
    </ons-list>
    </ons-template>
    
    
    <ons-template id="nearby.html">
    <ons-list ng-controller="EventsController" ng-init="showDialog()">
    <ons-list-item modifier="chevron" ng-repeat="event in events | filter:searchVal  track by $index" ng-click="showEvent($index)">
    </ons-list-item>
    </ons-list>
    </ons-template>
    


  • To load that function, use the show event for that tab. That solves those issues.


  • Onsen UI

    @Ashok-Kumar As @munsterlander suggest, try using ons-show="showDialog()" instead of ng-init. This will show the dialog everytime the user clicks on tab2, not only the first time.


Log in to reply