Angular Directive Wie fügt man dem Element ein Attribut hinzu?

Ich frage mich, wie man dieses Snippet funktioniert:

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

Ich weiß, dass es um die Kompilierungsphase geht, aber ich verstehe den Punkt nicht, daher wäre eine kurze Erklärung sehr zu begrüßen.

Eine Direktive, die demselben Element eine weitere Direktive hinzufügt:

Ähnliche Antworten:

  • Wie bekomme ich ng-class mit $ dirty in einer Direktive arbeiten?
  • Erstellen einer neuen Direktive mit angularjs

Hier ist ein Plünderer: 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); }; } }; }); 

Viel sauberere Lösung – nicht ngClick überhaupt zu verwenden:

Ein Plünderer: 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); }); }; } }; }); 

Sie können dies versuchen: