Angular directive how to add an attribute to the element?
angularjs, angularjs-directive
Solution
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);
});
};
}
};
});
Problem
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.