angularjs - directivas - Directiva angular cómo agregar un atributo al elemento?

directivas personalizadas angular 5

Question

Me pregunto cuál es la manera de trabajar este fragmento:

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

Sé que se trata de la fase de compilación, pero no entiendo el punto, por lo que una breve explicación sería muy apreciada.

Answer 1

Una directiva que agrega otra directiva al mismo elemento:

Respuestas similares:

• ¿Cómo obtener ng-class con $ dirty trabajando en una directiva?
• creando una nueva directiva con angularjs

Aquí hay un 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);
};
}
};
});

Solución mucho más limpia: no usar ngClick en absoluto:

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

Answer 2

Puedes intentar esto:

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