Appelez une autre directive de la directive avec les mêmes attributs et contenus

Question

Je veux remplacer le comportement d'une directive d'une bibliothèque, appelée "ui-sref" .Permet de voir l'exemple:

<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, "ui-sref-annexe" .Le code sera comme ceci:

<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 a ait les mêmes attributs et contenus, mais changé de ui-sref-annexe="édition" à ui-sref="utilisateur.edit"

Answer 1

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: '@'
            }
        }
    });

Modifier

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: '='
            }
        }
    });