Assigning a click event to view's title

ionic-v1
1

As the title says, how can I assign a click event to a view title?

I want to have a small down-arrow below to the view title and when the user clicks on it, an overlay view will display letting the user to choose a data filter.

Thanks

1 Like
2

By view title, do you mean the title in the header? If so, you most likely would want to use the right-buttons directive and set the functions in your controller.

3

Yes, I meant the title in the header. I’m already using the right and left buttons directives. Are you aware of any way to attach a click handler to the title? Google applies this technique for its iPhone Google Plus app.

4

hmm as far as i know, there aren’t any default ways to assign a click handler, but you could alway write your own custom directive and then apply it to the nav-bar (header-bar) directive. I think this may be the best bet

5

Sorry, I’m new with Angular, how can I do such a thing? Ideally I would apply the ngClick directive to the title element but I have no idea on how to do that. Thanks.

6

Directives a big part of angular so I would spend some time at least learning the basics of them. But here is a starting point. Just apply clickHandler attribute to the header and write your function in this directive.

.directive('clickHandler', function($timeout){
    return{
        restrict: 'A',
        link: function($scope, $element,$attr){
            $timeout(function(){
                    $element.on('tap', function(){
                      //the function you want to perform on tap
			alert("Just been Clicked");
                    });
            });
        }
    };
})
1 Like
7

Thanks for the example. How would you apply this directive to the header? I’m using the following:

<view title="'Users'" left-buttons="leftButtons" right-buttons="rightButtons">

When I try to assign that clickHandler directive you provided within that view element, the handler’s callback never gets called.

8

Do you have a universal nav-bar? or do you have separate header in each view?

9

I have a universal bar defined on index.html

10

@mhartington

I have the same problem at the moment. I did what you suggested and put a directive on the universal navbar. The goal is to make a route-change depending on the current view. This works just fine, the problem is that I cant use the nav-buttons anymore because right after the button is clicked the click event-handler on the navbar executes and changes the route. I tried e.stopPropagation & e.stopImmediatePropagation in the tap-callback of the left/right-buttons but had no luck. Any ideas?

11

Hmm, I did some messing around and found some interesting stuff. So as it stands right now, when you tap the header, it already has a function to scroll back to the top of your content.

Also, the directive I had provided did work, but there is a event that prevents any accidental taps on the header.

So I’m at a loss right now. The only thing I can think of is to bind it to the title rathe that the entire nav-bar. You should still have the ability to use the left and right buttons since the event is bound just to the title. This is all in theory so let me know if it works out

12

Anybody have some progress with that issue

13

Here is a sample where tapping the header bar does your custom event and scrolls to top:

14

@Calendee The example doesn’t work, at codepen on my mac at Safari and Chrome, It doesn’t log the ‘Title tapped!’

15

Doesn’t work in what way? All I am having it do is console.log on the event. It also does the scroll to top. If you don’t have the console open you won’t see anything.

Works in Safari, Chrome, Canary, and FireFox.

16

Is there a solution to assign custom click to the title when using ion-nav-bar?

17

You can do it with <ion-header-bar> and with <ion-nav-bar>.

Here are 2 samples :


18

Great! thanks alot!!

I added also buttons with stopPropagation and got what I wanted

19

I solved in this way if you want:

<ion-nav-bar ng-controller="AppCtrl">
      <ion-nav-back-button>
            {{'back_button'| translate}}
        </ion-nav-back-button>
        <ion-nav-title ng-click="mainRouter()">
          <div class="page-title">App</div>
          <div class="page-sub-title">{{date}}</div>
        </ion-nav-title>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>

      <ion-nav-buttons side="right">
        <button ui-sref="app.settings" class="button icon ion-ios-information-outline"></button>
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>

and in AppCtrl:

$scope.mainRouter = function() {
        $ionicHistory.nextViewOptions({
        disableBack: true
      });
      $state.go('app.main');
  };

this goes always to the main page.

I hope it helps.