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

User · Accepted Answer

You may use a controller in directive   angular module  app          directive  appClick   function         return          restrict   A          scope  true         template    lt button ng-click  click    gt Click me lt  button gt  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

User · Answer

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

User · Answer

In this case  no need for a directive  This does the job     lt button ng-click  count   count   1  ng-init  count 0  gt    Increment  lt  button gt   lt span gt    count    count    lt  span gt    Source  https   docs angularjs org api ng directive ngClick

User · Answer

myApp directive  clickme  function        return function scope element attrs           element bind  mousedown  function                  lt  lt call the Controller function gt  gt                scope loadEditfrm attrs edtbtn                             this will act as onclick events on the attribute clickme

User · Answer

Shouldn t it simply be    lt button ng-click  clickingCallback    gt Click me lt button gt    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

User · Answer

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

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

Examples related to angularjs

Examples related to angularjs-directive