Angular directive how to add an attribute to the element

Question

I m wondering what s the way to do work this snippet     html  lt div ng-app  app  gt       lt div ng-controller  AppCtrl  gt           lt a my-dir ng-repeat  user in users  gt   user name   lt  a gt       lt  div gt   lt  div gt     js var app   angular module  app        app controller  AppCtrl   function   scope         scope users     name  John  id 1   name  anonymous          scope fxn   function             alert  It works                 app directive  myDir   function   compile        return           link function scope el               el attr  ng-click   fxn                     compile el  scope   with this the script go mad                          I know it s about the compile phase  but I don t get the point so a short explanation would be  very appreciate

User · Accepted Answer

A directive which adds another directive to the same element:

Similar answers:

Here is a plunker: http://plnkr.co/edit/ziU8d826WF6SwQllHHQq?p=preview

app.directive("myDir", function($compile) {
  return {
    priority:1001, // compiles first
    terminal:true, // prevent lower priority directives to compile after it
    compile: function(el) {
      el.removeAttr('my-dir'); // necessary to avoid infinite compile loop
      el.attr('ng-click', 'fxn()');
      var fn = $compile(el);
      return function(scope){
        fn(scope);
      };
    }
  };
});

Much cleaner solution - not to use `ngClick` at all:

A plunker: http://plnkr.co/edit/jY10enUVm31BwvLkDIAO?p=preview

app.directive("myDir", function($parse) {
  return {
    compile: function(tElm,tAttrs){
      var exp = $parse('fxn()');
      return function (scope,elm){
        elm.bind('click',function(){
          exp(scope);
        });  
      };
    }
  };
});

User · Answer

You can try this    lt div ng-app  app  gt       lt div ng-controller  AppCtrl  gt           lt a my-dir ng-repeat  user in users  ng-click  fxn    gt   user name   lt  a gt       lt  div gt   lt  div gt    lt script gt  var app   angular module  app         function AppCtrl  scope             scope users      name   John   id  1      name   anonymous               scope fxn   function                  alert  It works                      app directive  myDir   function   compile        return           scope   ngClick                   lt  script gt

[angularjs] Angular directive how to add an attribute to the element?

A directive which adds another directive to the same element:

Much cleaner solution - not to use `ngClick` at all:

Examples related to angularjs

Examples related to angularjs-directive

[angularjs] Angular directive how to add an attribute to the element?

A directive which adds another directive to the same element:

Much cleaner solution - not to use ngClick at all:

Examples related to angularjs

Examples related to angularjs-directive

Much cleaner solution - not to use `ngClick` at all: