Chiamare un'altra direttiva dalla direttiva con gli stessi attributi e contenuti
-
21-12-2019 - |
Domanda
Voglio ignorare il comportamento di una direttiva sulla biblioteca, chiamata "UI-SRef" .Vedere l'esempio:
<a ui-sref="edit" class="btn btn-small">
<i class="icon-pencil"></i> Edit
</a>
.
Ora, voglio creare la mia direttiva chiamata, ad esempio, "UI-SREF-APPENDE" .Il codice sarà così:
<a ui-sref-appended="edit" class="btn btn-small">
<i class="icon-pencil"></i> Edit
</a>
.
L'uscita che voglio deve essere:
<a ui-sref="user.edit" class="btn btn-small">
<i class="icon-pencil"></i> Edit
</a>
.
(e poi ha rispettato, quindi ui-sref potrebbe fare il suo lavoro)
Come posso implementarti?Il problema è che voglio il mio A per avere gli stessi attributi e contenuti, ma cambiato da UI-SREF-APPENDE="Modifica" a UI-SREF="User.edit"
Soluzione
Imposta il modello della tua nuova direttiva come segue
template : '<a ui-sref="user.edit" class="btn btn-small"> <i class="icon-pencil"</i> Edit</a>';
.
e impostare l'utente.edit nella funzione di collegamento o superare l'utente alla direttiva tramite membro dell'ambito.
Se si dispone di un modello dinamico, è possibile creare il modello di direttiva nella funzione Link.
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: '@'
}
}
});
.
Modifica
Se si desidera semplicemente impostare l'UI-SREF, basta aggiungere l'UI-SREF come attributo al tuo elemento e quindi compilarlo.
app.directive('uiSrefAppended', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.attr('ui-sref', 'user.edit');
$compile(element)(scope);
},
scope: {
user: '='
}
}
});
.