Ons-tabbar loading all pages during initialization

Ashok Kumar

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

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

Fran Diox

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