Angular指令如何给元素添加一个属性？

我想知道怎么做这个片段的工作方式：

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

我知道这是关于编译阶段，但我不明白这一点，所以简短的解释将非常感激。 提前致谢。

Answer 1

一个指令，将另一个指令添加到相同的元素：

相似的答案：

• 如何获得ng-class与$脏工作在一个指令？
• 用angularjs创build一个新的指令

这里是一个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); }; } }; }); 

---

更清洁的解决scheme – 不要使用ngClick ：

一名运动员： 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

你可以试试这个：

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