Angular directive how to add an attribute to the element?

Question

I'm wondering what's the way to do work this snippet:

//html <div ng-app="app">     <div ng-controller="AppCtrl">         <a my-dir ng-repeat="user in users">{{user.name}}</a>     </div> </div>  //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.

Answer 1

A directive which adds another directive to the same element:

Similar answers:

• How to get ng-class with $dirty working in a directive?
• creating a new directive with angularjs

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

Answer 2

You can try this:

<div ng-app="app">     <div ng-controller="AppCtrl">         <a my-dir ng-repeat="user in users" ng-click="fxn()">{{user.name}}</a>     </div> </div>  <script> 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: '='}     }; }); </script>