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.
-
@Ashok-Kumar As @munsterlander suggest, try using
ons-show="showDialog()"
instead ofng-init
. This will show the dialog everytime the user clicks on tab2, not only the first time.