CODEWITHSUNDEEP
javascriptangularjscordovaionic-framework
Mr.P
Mr.P

Reputation: 1430

How can I add an ng-click to an already declared Ionic nav bar?

Working with Ionic and AngularJS here.

So my app is a tabbed application and my tabs.html file looks something like this:

<ion-view> 
    <ion-nav-bar class="bar-positive" align-title="center">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-tabs class="tabs-icon-top" ng-controller="TabsCtrl" ng-class="{'tabs-item-hide': hideTabs}">
        <ion-tab title="TITLE 1" href="#/tabs/page1">
            <ion-nav-view name="page1-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab title="TITLE 2" href="#/tabs/ge2">
            <ion-nav-view name="ge2-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab title="TITLE 3" href="#/tabs/page3">
            <ion-nav-view name="3-tab"></ion-nav-view>
        </ion-tab>
    </ion-tabs>
</ion-view>

Then the top of one of the tab pages looks like this:

<ion-view view-title="TITLE 1">
    <ion-nav-buttons side="left">
        <button class="button icon ion-search"></button>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
        <button class="button icon ion-compose"></button>
    </ion-nav-buttons>
    ...
    ...
    ...
</ion-view>

What I wan is to add an ng-click to the view-title. I've added an ng-click to the ion-nav-bar but this overrides the click on the ion-nav-buttons within the view.

I just want it to click when I hit the middle of the nav bar on the page.

Any help appreciated.

Upvotes: 0

Views: 517

Answers (2)

superczan
superczan

Reputation: 306

Events bubble up from child to parent. This is a neat feature that comes in handy at times. However, it can also create problems like the one you described. For this problem to not happen, we need to make sure the click event stops at the child and does not bubble up. Add this line on your ng-click function:

$event.stopPropagation();

For more information on event propagation: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

That should give you general idea.

Upvotes: 1

Simcha Khabinsky
Simcha Khabinsky

Reputation: 2039

To prevent the parent ng-click function from being called, use stopPropagation:

$event.stopPropagation();

This needs to be called on the ng-click function of the child.

Upvotes: 2

Related Questions