AngularJS
Décorateurs
Recherche…
Syntaxe
- décorateur (nom, décorateur);
Remarques
Decorator est une fonction qui permet de modifier un service , une fabrique , une directive ou un filtre avant son utilisation. Decorator est utilisé pour remplacer ou modifier le comportement du service. La valeur de retour de la fonction décorateur peut être le service d'origine ou un nouveau service qui remplace ou encapsule et délègue le service d'origine.
Toute décoration doit être faite dans la phase de config l'application angulaire en injectant $provide et en utilisant la fonction $provide.decorator .
La fonction décorateur a un objet
$delegateinjecté pour fournir un accès au service correspondant au sélecteur du décorateur. Ce$delegatesera le service que vous décorez. La valeur de retour de la fonction fournie au décorateur prendra la place du service, de la directive ou du filtre en cours de décoration.
On devrait envisager d'utiliser un décorateur uniquement si une autre approche n'est pas appropriée ou s'avère trop fastidieuse. Si les applications volumineuses utilisent le même service et que l'une d'entre elles modifie le comportement du service, il est facile de créer de la confusion et / ou des bogues dans le processus.
Un cas d'utilisation typique serait lorsque vous avez une dépendance à une tierce partie que vous ne pouvez pas mettre à niveau mais que vous avez besoin de travailler différemment ou de l'étendre.
Décorer service, usine
Ci - dessous exemple de décorateur de service, remplaçant null date renvoyée par le 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>
Directive décorer
Les directives peuvent être décorées comme les services et nous pouvons modifier ou remplacer n'importe laquelle de ses fonctionnalités. Notez que la directive elle-même est accessible à la position 0 dans le tableau $ delegate et que le paramètre name dans le décorateur doit inclure le suffixe Directive (sensible à la casse).
Donc, si directive s'appelle myDate , on peut y accéder en utilisant myDateDirective utilisant $delegate[0] .
Voici un exemple simple où directive indique l'heure actuelle. Nous allons le décorer pour mettre à jour l'heure actuelle à intervalles d'une seconde. Sans décoration, il affichera toujours la même heure.
<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
}
};
});
Décorer le filtre
Lors de la décoration des filtres, le paramètre name doit inclure le suffixe Filter (sensible à la casse). Si le filtre est appelé repeat , le paramètre decorator est repeatFilter . Ci-dessous, nous allons décorer un filtre personnalisé qui répète une chaîne donnée n fois, afin que le résultat soit inversé. Vous pouvez également décorer les filtres intégrés angulaires de la même manière, bien que cela ne soit pas recommandé, car cela peut affecter les fonctionnalités du 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);
};
});
