Angular指令如何向元素添加属性？

Question

我想知道这个片段的工作方式是什么:

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

一个指令,它将另一个指令添加到同一个元素:

类似的答案:

• 如何使用$ dirty在指令中使用ng-class？
• 使用angularjs创建一个新指令

这是一个吸虫: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);
      };
    }
  };
});

更清洁的解决方案 - 根本不使用ngClick:

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