How to call a function in ionic tab on click

ionic-v1
1

I want to call a function on every tab will i click but it doesn’t work. How Can I call a function on tab click.
Here is the scenario

  <ion-tab title="Home" icon-on="ion-ios7-filing"   ng-click="calme()">
    
      <h2>Home Content</h2>
      <button class="button" ng-click="showHotel = true">Show Hotel</button>
    </ion-content>
  </ion-tab>

  <ion-tab title="Work" icon-on="ion-ios7-filing"  ng-click="calme()">
    <ion-header-bar type="bar-positive" title="'Work'"></ion-header-bar>
    <ion-content>
      <h2>Work Content</h2>
    </ion-content>
  </ion-tab>

.controller(‘HomeCtrl’, function($scope) {

$scope.calme=function(){alert(“you call me”)};
});

1 Like
2
  1. Add A controller to you Tabs (i do it with $stateProvider)
  2. add ng-click to you tab
  3. create the method
  4. be happy it works :smiley:

here a codepen: http://codepen.io/domiSchenk/pen/zHeau

only downside you need to do page changing inside the method.

2 Likes
3

Thank you @Auro

Another Issue please see this one.
I have created the nested list have a look at that http://codepen.io/asadfida/pen/oknzL

The issue is when I select a list all the lists shows the sub-list/lists.So I want to open sub-list of only the selected item.How to I do this please guide me.

4

The problem your facing is, your are using a scope wide variable and you bind to only this instance for each item

what you have to do is create a individual variable for each of this list items
see here: http://codepen.io/domiSchenk/pen/sDaLG

tipp: in angular dont use ! for showing stuff, you can use ng-hide=""

1 Like
5

@ thank you very much.

6

i forgot to say, that there have to be a better way to do that, but i dont know how :smiley:

1 Like
7

@Auro The Sublists show/hide very quickly. http://codepen.io/asadfida/pen/oknzL
how to make it little bit slow.(any way like css transitions on show and hide)

8

sorry for late response :slight_smile:

i have worked out something:

note: you have to set

.slidedown {            
  max-height: 900px ;                    
}

to a value your list will never get.
but on closing it will have a little delay.

and i did change your links to a ul list its better to handle this.

1 Like
9

ion-tab also has a on-select method that you could hook in to:

http://ionicframework.com/docs/api/directive/ionTab/

2 Likes
10

Read this post to help yourself out of this problem.

http://www.yourtechchick.com/angularjs/ionic/how-to-call-a-function-on-click-in-ion-tabs/

Hope that helps.

1 Like
11

Please use on-select="" instead of ng-click=" ".

2 Likes
12

Hi Thanks for your help its working

But In my app i need to add sidemenu to same tabs page
how to do it ?
please help me…

13

Saleemnasa, this may help in what you’re trying to do. It helped me.

Sorry for the late response.