AngularJS
decorateurs
Zoeken…
Syntaxis
- decorateur (naam, decorateur);
Opmerkingen
Decorator is een functie waarmee een service , fabriek , richtlijn of filter kan worden gewijzigd voordat deze wordt gebruikt. Decorator wordt gebruikt om het gedrag van de service te vervangen of te wijzigen. De retourwaarde van de decorateurfunctie kan de oorspronkelijke service zijn, of een nieuwe service die de oorspronkelijke service vervangt of wikkelt en delegeert.
Elke versieren moet hoekige applicatie worden gedaan config fase door het injecteren van $provide en het gebruik ervan is $provide.decorator functie.
De decorateurfunctie heeft een
$delegateobject geïnjecteerd om toegang te bieden tot de service die overeenkomt met de selector in de decorator. Deze$delegatezal de service zijn die je decoreert. De retourwaarde van de aan de decorateur geleverde functie vindt plaats wanneer de service, richtlijn of filter wordt gedecoreerd.
Men moet overwegen om decorateur alleen te gebruiken als een andere benadering niet geschikt is of te vervelend blijkt te zijn. Als een grote applicatie dezelfde service gebruikt en een onderdeel het servicegedrag verandert, is het eenvoudig om verwarring en / of fouten in het proces te creëren.
Typisch gebruik zou zijn wanneer u afhankelijk bent van een derde partij die u niet kunt upgraden, maar deze iets anders moet laten werken of uitbreiden.
Service versieren, fabriek
Hieronder is een voorbeeld van de dienstverlening decorateur, dwingende null datum geretourneerd door service.
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>
Versier richtlijn
Richtlijnen kunnen net als services worden ingericht en we kunnen de functionaliteit ervan wijzigen of vervangen. Merk op dat de richtlijn zelf toegankelijk is op positie 0 in $ delegate array en de parameter name in decorator moet het Directive achtervoegsel bevatten (hoofdlettergevoelig).
Dus, als richtlijn myDate wordt genoemd, is deze toegankelijk via myDateDirective met $delegate[0] .
Hieronder is een eenvoudig voorbeeld waar de richtlijn de huidige tijd toont. We zullen het versieren om de huidige tijd met intervallen van één seconde bij te werken. Zonder decoratie zal het altijd dezelfde tijd weergeven.
<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
}
};
});
Verfraai filter
Bij het decoreren van filters moet de parameter name het achtervoegsel Filter bevatten (hoofdlettergevoelig). Als filter repeat wordt genoemd, is decorateurparameter repeatFilter . Hieronder zullen we een aangepast filter versieren dat elke gegeven string n keer herhaalt, zodat het resultaat wordt omgekeerd. U kunt de ingebouwde filters van Angular ook op dezelfde manier decoreren, hoewel niet aanbevolen, omdat dit de functionaliteit van het framework kan beïnvloeden.
<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);
};
});
