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.
Ons-tabbar loading all pages during initialization
Ashok Kumar last edited by
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>
munsterlander 侍 last edited by
To load that function, use the show event for that tab. That solves those issues.
@Ashok-Kumar As @munsterlander suggest, try using
ng-init. This will show the dialog everytime the user clicks on tab2, not only the first time.