current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 63 down vote favorite
11

In the link function, is there a more "Angular" way to bind a function to a click event?

Right now, I'm doing...

myApp.directive('clickme', function() {   
  return function(scope, element, attrs) {
    scope.clickingCallback = function() {alert('clicked!')};
    element.bind('click', scope.clickingCallback);   
} });

Is this the Angular way of doing it or is it an ugly hack? Perhaps I shouldn't be so concerned, but I'm new to this framework and would like to know the "correct" way of doing things, especially as the framework moves forward.

share|improve this question
2  
Both are appropriate to do, you can go ahead and do whatever you see fit. The only difference in your example is that bind does to start a digest cycle; which might be something you might want as well, but be aware. – Umur Kontacı May 12 '14 at 15:12
2  
Umur, did you mean to say that bind does not start the digest cycle? – demisx May 30 '14 at 1:16
    
I use this when I need to avoid an expensive digest cycle, for example a large dataset that requires a user action. With the only difference being i use it in the link: function(). – Fred Jul 31 '15 at 17:56
up vote 58 down vote accepted

You may use a controller in directive:

angular.module('app', [])
  .directive('appClick', function(){
     return {
       restrict: 'A',
       scope: true,
       template: '<button ng-click="click()">Click me</button> Clicked {{clicked}} times',
       controller: function($scope, $element){
         $scope.clicked = 0;
         $scope.click = function(){
           $scope.clicked++
         }
       }
     }
   });

Demo on plunkr

More about directives in Angular guide. And very helpfull for me was videos from official Angular blog post About those directives.

share|improve this answer
    
Thanks for the pointer to the blog post! – ehfeng Feb 12 '13 at 18:48
1  
Never mind, I figured it out - I can use the "replace" option within the directive. – ehfeng Feb 12 '13 at 19:23
1  
@Maxim Grach why not just put the button HTML in the HTML? It seems like a lot of work to display a button that calls a controller method and less obvious when viewing the HTML. PS I'm learning angular as well. – turbo2oh Jul 31 '13 at 15:09
1  
@turbo2oh this example is very simple and out of real life. But It shows how you can use angular directives. – Maxim Grach Aug 6 '13 at 18:38
1  
@MaximGrach using scope: {} would isolate the scope, while using true allows shared scope. – Fred Jul 31 '15 at 17:58
up vote 32 down vote

I think it is fine because I've seen many people doing this way.

If you are just defining the event handler within the directive, you do not have to define it on the scope, though. Following would be fine.

myApp.directive('clickme', function() {
  return function(scope, element, attrs) {
    var clickingCallback = function() {
      alert('clicked!')
    };
    element.bind('click', clickingCallback);
  }
});
share|improve this answer
13  
In clickingCallback, if you are changing any model/scope data, you'll want to call scope.$apply(), or put the contents of the method inside scope.$apply(function() { ...contents here...}); – Mark Rajcok Feb 12 '13 at 3:19
up vote 10 down vote

Shouldn't it simply be:

<button ng-click="clickingCallback()">Click me<button>

Why do you want to write a new directive just to map your click event to a callback on your scope ? ng-click already does that for you.

share|improve this answer
8  
I'm also curious about the opions on this one. ng-click versus element.bind() – jvannistelrooy May 12 '14 at 15:09
3  
Maybe just to make that part reusabel, repeatable the code elsewhere. – Estevez Apr 16 '15 at 10:11
up vote 0 down vote

You should use the controller in the directive and ng-click in the template html, as suggested previous responses. However, if you need to do DOM manipulation upon the event(click), such as on click of the button, you want to change the color of the button or so, then use the Link function and use the element to manipulate the dom.

If all you want to do is show some value on an HTML element or any such non-dom manipulative task, then you may not need a directive, and can directly use the controller.

share|improve this answer
up vote -3 down vote

In this case, no need for a directive. This does the job :

<button ng-click="count = count + 1" ng-init="count=0">
  Increment
</button>
<span>
  count: {{count}}
</span>

Source: https://docs.angularjs.org/api/ng/directive/ngClick

share|improve this answer
up vote -4 down vote 
myApp.directive("clickme",function(){
    return function(scope,element,attrs){
        element.bind("mousedown",function(){
             <<call the Controller function>>
              scope.loadEditfrm(attrs.edtbtn); 
        });
    };
});

this will act as onclick events on the attribute clickme

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.