AngularJS
Dekoratorzy
Szukaj…
Składnia
- dekorator (nazwa, dekorator);
Uwagi
Dekorator to funkcja umożliwiająca modyfikację serwisu , fabryki , dyrektywy lub filtra przed użyciem. Dekorator służy do zastępowania lub modyfikowania zachowania usługi. Zwracana wartość funkcji dekoratora może być usługą oryginalną lub nową usługą, która zastępuje lub zawija i przekazuje do usługi oryginalnej.
Wszelkie dekorowanie musi odbywać się w fazie config aplikacji kątowej poprzez wstrzyknięcie $provide i używając jego funkcji $provide.decorator .
Funkcja dekoratora ma wstrzyknięty obiekt
$delegateaby zapewnić dostęp do usługi pasującej do selektora w dekoratorze. Ten$delegatebędzie usługą, którą dekorujesz. Zwracana wartość funkcji dostarczonej dekoratorowi będzie miała miejsce podczas dekorowania usługi, dyrektywy lub filtra.
Należy rozważyć użycie dekoratora tylko wtedy, gdy jakiekolwiek inne podejście jest nieodpowiednie lub okaże się zbyt żmudne. Jeśli duża aplikacja korzysta z tej samej usługi, a jedna część zmienia zachowanie usługi, łatwo jest wprowadzić zamieszanie i / lub błędy w procesie.
Typowy przypadek użycia to sytuacja, w której masz zależność innej firmy, której nie możesz zaktualizować, ale potrzebujesz, aby działała nieco inaczej lub ją rozszerzała.
Udekoruj usługę, fabryka
Poniżej znajduje się przykład dekoratora usługi, zastępujący datę null zwróconą przez usługę.
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>
Udekoruj dyrektywę
Dyrektywy można dekorować podobnie jak usługi, a my możemy modyfikować lub zastępować dowolne z jej funkcji. Zauważ, że sama dyrektywa jest dostępna na pozycji 0 w $ delegate array, a parametr name w dekoratorze musi zawierać sufiks Directive (rozróżnia małe i wielkie litery).
Tak więc, jeśli dyrektywa nazywa się myDate , można uzyskać do niej dostęp za pomocą myDateDirective za pomocą $delegate[0] .
Poniżej znajduje się prosty przykład, w którym dyrektywa pokazuje aktualny czas. Udekorujemy go, aby aktualizować aktualny czas w odstępach sekundowych. Bez dekoracji zawsze pokaże ten sam czas.
<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
}
};
});
Udekoruj filtr
Podczas dekorowania filtrów parametr nazwy musi zawierać sufiks Filter (rozróżnia małe i duże litery). Jeśli filtr nazywa się repeat , parametrem dekoratora jest repeatFilter . Poniżej ozdobimy niestandardowy filtr, który powtarza dowolny ciąg znaków n razy, aby wynik był odwrócony. Możesz również ozdobić wbudowane filtry kątowe w ten sam sposób, chociaż nie jest to zalecane, ponieważ może to wpłynąć na funkcjonalność frameworka.
<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);
};
});
