Diretiva Angular como adicionar um atributo ao elemento?

Eu estou querendo saber qual é a maneira de fazer este trecho:

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

Eu sei que é sobre a fase de compilation, mas eu não entendo o ponto, então uma breve explicação seria muito apreciada.

Uma diretiva que adiciona outra diretiva ao mesmo elemento:

Respostas semelhantes:

  • Como obter ng-class com $ dirty trabalhando em uma diretiva?
  • criando uma nova diretiva com angularjs

Aqui está uma 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); }; } }; }); 

Solução muito mais limpa – não usar ngClick em tudo:

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

Você pode tentar isto: