Using ng-click vs bind within link function of Angular Directive

Question

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.

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ı
– Umur Kontacı, Commented May 12, 2014 at 15:12
Umur, did you mean to say that bind does not start the digest cycle? — demisx
– demisx, Commented May 30, 2014 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
– Fred, Commented Jul 31, 2015 at 17:56

Maxim Grach · Accepted Answer · 2013-02-12 03:27:13Z

61

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.

answered Feb 12, 2013 at 3:27

Maxim Grach

4,2882 gold badges22 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ehfeng Over a year ago

I actually want to add the ng-click attribute to the element itself, not the template element (in your case, the button). Do you know how to do that?

ehfeng Over a year ago

Never mind, I figured it out - I can use the "replace" option within the directive.

turbo2oh Over a year ago

@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.

Maxim Grach Over a year ago

@turbo2oh this example is very simple and out of real life. But It shows how you can use angular directives.

Fred Over a year ago

@MaximGrach using scope: {} would isolate the scope, while using true allows shared scope.

|

Jonatas Walker · Accepted Answer · 2015-12-02 15:45:05Z

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); } });

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...});

tofi9 · Accepted Answer · 2014-05-12 15:10:32Z

10

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.

edited May 12, 2014 at 15:10

tofi9

5,8634 gold badges32 silver badges51 bronze badges

answered Dec 24, 2013 at 6:16

Nikhil_Katre

5546 silver badges11 bronze badges

3 Comments

JacobF Over a year ago

I'm also curious about the opions on this one. ng-click versus element.bind()

Estevez Over a year ago

Maybe just to make that part reusabel, repeatable the code elsewhere.

Alisson Reinaldo Silva Over a year ago

@Estevez that's exactly my use case.

Hasteq · Accepted Answer · 2016-09-02 19:11:00Z

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.

Marc Perrin-Pelletier · Accepted Answer · 2014-10-23 15:44:20Z

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

kurmi · Accepted Answer · 2014-05-13 11:38:43Z

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

Collectives™ on Stack Overflow

Using ng-click vs bind within link function of Angular Directive

6 Answers 6

6 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Related