AngularJS
decoratori
Ricerca…
Sintassi
- decoratore (nome, decoratore);
Osservazioni
Decoratore è una funzione che consente di modificare un servizio , fabbrica , direttiva o filtro prima del suo utilizzo. Decorator viene utilizzato per sovrascrivere o modificare il comportamento del servizio. Il valore di ritorno della funzione decoratore può essere il servizio originale o un nuovo servizio che sostituisce o avvolge e delega il servizio originale.
Qualsiasi decorazione deve essere eseguita nella fase di config dell'applicazione angolare iniettando $provide e utilizzando la funzione $provide.decorator .
La funzione decoratore ha un oggetto
$delegateiniettato per fornire l'accesso al servizio che corrisponde al selettore nel decoratore. Questo$delegatesarà il servizio che stai decorando. Il valore di ritorno della funzione fornita al decoratore avverrà in base al servizio, alla direttiva o al filtro che viene decorato.
Si dovrebbe considerare l'utilizzo del decoratore solo se qualsiasi altro approccio non è appropriato o si rivela troppo noioso. Se un'applicazione di grandi dimensioni utilizza lo stesso servizio e una parte modifica il comportamento del servizio, è facile creare confusione e / o bug nel processo.
Un tipico caso d'uso sarebbe quando si ha una dipendenza di terze parti che non è possibile aggiornare, ma è necessario che funzioni in modo leggermente diverso o la estenda.
Decora il servizio, fabbrica
Di seguito è riportato un esempio di decoratore del servizio, che sostituisce la data null restituita dal servizio.
angular.module('app', [])
.config(function($provide) {
$provide.decorator('myService', function($delegate) {
$delegate.getDate = function() { // override with actual date object
return new Date();
};
return $delegate;
});
})
.service('myService', function() {
this.getDate = function() {
return null; // w/o decoration we'll be returning null
};
})
.controller('myController', function(myService) {
var vm = this;
vm.date = myService.getDate();
});
<body ng-controller="myController as vm">
<div ng-bind="vm.date | date:'fullDate'"></div>
</body>
Decora la direttiva
Le direttive possono essere decorate esattamente come i servizi e possiamo modificare o sostituire qualsiasi funzionalità. Si noti che la direttiva stessa è accessibile alla posizione 0 in $ delegate array e il parametro name nel decoratore deve includere il suffisso Directive (maiuscole e minuscole).
Quindi, se la direttiva è denominata myDate , è possibile accedervi utilizzando myDateDirective utilizzando $delegate[0] .
Di seguito è riportato un semplice esempio in cui la direttiva mostra l'ora corrente. Lo decoreremo per aggiornare l'ora corrente a intervalli di un secondo. Senza decorazione mostrerà sempre lo stesso tempo.
<body>
<my-date></my-date>
</body>
angular.module('app', [])
.config(function($provide) {
$provide.decorator('myDateDirective', function($delegate, $interval) {
var directive = $delegate[0]; // access directive
directive.compile = function() { // modify compile fn
return function(scope) {
directive.link.apply(this, arguments);
$interval(function() {
scope.date = new Date(); // update date every second
}, 1000);
};
};
return $delegate;
});
})
.directive('myDate', function() {
return {
restrict: 'E',
template: '<span>Current time is {{ date | date:\'MM:ss\' }}</span>',
link: function(scope) {
scope.date = new Date(); // get current date
}
};
});
Decorare il filtro
Quando si decorano i filtri, il parametro name deve includere il suffisso Filter (case sensitive). Se il filtro è chiamato repeat , il parametro decorator è repeatFilter . Qui sotto decoreremo un filtro personalizzato che ripete una determinata stringa n volte in modo che il risultato sia invertito. Puoi anche decorare i filtri incorporati di angolare nello stesso modo, sebbene non sia raccomandato in quanto può influire sulla funzionalità del framework.
<body>
<div ng-bind="'i can haz cheeseburger ' | repeat:2"></div>
</body>
angular.module('app', [])
.config(function($provide) {
$provide.decorator('repeatFilter', function($delegate) {
return function reverse(input, count) {
// reverse repeated string
return ($delegate(input, count)).split('').reverse().join('');
};
});
})
.filter('repeat', function() {
return function(input, count) {
// repeat string n times
return (input || '').repeat(count || 1);
};
});
