Utilizzando $provide.decorator
L'uso $provide
per decorare la direttiva evita la necessità di scherzare direttamente con $templateCache
.
Invece, crea il tuo modello html esterno come faresti normalmente, con il nome che preferisci, quindi sovrascrivi la direttiva templateUrl
per puntarlo.
angular.module('plunker', ['ui.bootstrap'])
.config(['$provide', Decorate]);
function Decorate($provide) {
$provide.decorator('alertDirective', function($delegate) {
var directive = $delegate[0];
directive.templateUrl = "alertOverride.tpl.html";
return $delegate;
});
}
Fork del plunkr di pkozlowski.opensource: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview
(Tieni presente che devi aggiungere il suffisso "Directive" al nome della direttiva che intendi decorare. Sopra, stiamo decorando la alert
direttiva di Bootstrap dell'interfaccia utente , quindi usiamo il nomealertDirective
.)
Poiché spesso potresti voler fare di più che sovrascrivere il templateUrl
, questo fornisce un buon punto di partenza da cui estendere ulteriormente la direttiva, ad esempio sovrascrivendo / avvolgendo il link o compilando la funzione ( per esempio ).
$modal
servizio per ottenere una maggiore configurabilità senza (si spera) creare troppi problemi di manutenzione.$provide.decorator('$modal'
... Nel mio caso non volevo rendere l'modalWindow
elemento. Mai. Semplicemente non lo stavo usando, e questo era il meglio che potessi inventare. Mi piacerebbe sentire un modo migliore se qualcuno ce l'ha.