Appelez une autre directive de la directive avec les mêmes attributs et contenus
-
21-12-2019 - |
Question
Je veux remplacer le comportement d'une directive d'une bibliothèque, appelée
<a ui-sref="edit" class="btn btn-small">
<i class="icon-pencil"></i> Edit
</a>
Maintenant, je souhaite créer ma propre directive appelée, par exemple,
<a ui-sref-appended="edit" class="btn btn-small">
<i class="icon-pencil"></i> Edit
</a>
La sortie que je veux doit être:
<a ui-sref="user.edit" class="btn btn-small">
<i class="icon-pencil"></i> Edit
</a>
(puis respecté, donc ui-sref pourrait faire son travail)
Comment puis-je mettre en œuvre cela?Le problème est que je veux que mon
La solution
Modèle de définition de votre nouvelle directive comme suit
template : '<a ui-sref="user.edit" class="btn btn-small"> <i class="icon-pencil"</i> Edit</a>';
et définir l'utilisateur.edit dans la fonction de liaison ou transmettez l'utilisateur à la directive via un membre de la portée.
Si vous avez un modèle dynamique, vous pouvez créer le modèle de directive dans la fonction de liaison.
app.directive('newDirective', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var template= '<a ui-sref="user.edit" class="{{btnClass}}"> <i class="icon-pencil"</i> Edit </a>';
element.append($compile(template)(scope));
},
scope: {
user: '=',
btnClass: '@'
}
}
});
Si vous souhaitez simplement définir l'UI-Sref, ajoutez simplement l'UI-Sref en tant qu'attribut à votre élément, puis la compilez.
app.directive('uiSrefAppended', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.attr('ui-sref', 'user.edit');
$compile(element)(scope);
},
scope: {
user: '='
}
}
});