How to listen for ng-click on header title but *not* nav buttons?

ionic-v1
1

I’m using the standard ion-nav-bar in my app’s layout.

My question is, how do I attach an ng-click listener to the nav bar’s title without having it also get picked up when I click on the nav buttons? I can attach to the entire header just fine, but I can’t figure out how to access just the title h1…

1 Like
3

Can you share your markup?

4

Sure, my app’s layout is just:

  <body ng-app="app" ng-controller="ApplicationController">
    <ion-nav-bar></ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </body>

And each of my templates replace the title through the ion-view directive, like:

<ion-view title="Chats">
  <ion-content>...</ion-content>
</ion-view>

<ion-view title="Friends">
  <ion-content>...</ion-content>
</ion-view>

etc…so I’m never actually creating the h1’s myself.

5

Okay, I’m not sure if there is a better way, but I got it working by just listening to the $event that ng-click passes back, and checking if $event.target.classList includes “title”.

6

I think your solution is okay.
another would be an own directive on the nav-bar -> there your get the navbar as jquery object.
There you could select the h1 with class title.

After you get the h1-tag you can add a click listener to that.