AngularJS
Dekorateure
Suche…
Syntax
- Dekorateur (Name, Dekorateur);
Bemerkungen
Decorator ist eine Funktion, mit der ein Dienst , eine Fabrik , eine Anweisung oder ein Filter vor seiner Verwendung geändert werden kann. Decorator wird verwendet, um das Verhalten des Dienstes zu überschreiben oder zu ändern. Der Rückgabewert der Decorator-Funktion kann der ursprüngliche Dienst sein oder ein neuer Dienst, der den ursprünglichen Dienst ersetzt oder an diesen delegiert.
Jede Dekoration muss in Winkel Anwendung erfolgen config - Phase durch die Injektion von $provide und verwendet es ist $provide.decorator Funktion.
Die Decorator-Funktion verfügt über ein
$delegateObjekt, das den Zugriff auf den Dienst ermöglicht, der mit dem Selektor im Decorator übereinstimmt. Dieser$delegatewird der Service sein, den Sie schmücken. Der Rückgabewert der Funktion, die dem Dekorateur zur Verfügung gestellt wird, wird für den Dienst, die Direktive oder den Filter vorgenommen, die dekoriert werden.
Der Dekorateur sollte nur in Betracht gezogen werden, wenn ein anderer Ansatz nicht angemessen ist oder sich als zu langweilig erweist. Wenn eine große Anwendung denselben Dienst verwendet und ein Teil das Dienstverhalten ändert, können leicht Verwirrung und / oder Fehler im Prozess auftreten.
Ein typischer Anwendungsfall wäre, wenn Sie eine Drittanbieter-Abhängigkeit haben, die Sie nicht aktualisieren können, aber etwas anders funktionieren oder erweitern müssen.
Service schmücken, Fabrik
Im Folgenden finden Sie Beispiel für Service - Dekorateur, zwingende null nach Dienst zurückgegebene Datum.
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>
Direktive dekorieren
Direktiven können genauso wie Dienste dekoriert werden, und wir können jede ihrer Funktionen ändern oder ersetzen. Beachten Sie, dass auf die Direktive selbst an Position 0 im Delegatenarray $ zugegriffen wird, und der Name-Parameter in decorator muss das Suffix Directive (Groß- / Kleinschreibung) enthalten.
Wenn die Direktive myDate heißt, kann mit myDateDirective mit $delegate[0] darauf zugegriffen werden.
Nachfolgend finden Sie ein einfaches Beispiel, in dem die Direktive die aktuelle Uhrzeit anzeigt. Wir werden es dekorieren, um die aktuelle Uhrzeit im Sekundentakt zu aktualisieren. Ohne Dekoration wird es immer gleich angezeigt.
<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
}
};
});
Filter dekorieren
Beim Dekorieren von Filtern muss der Name-Parameter das Suffix " Filter (Groß- und Kleinschreibung beachten) enthalten. Wenn der Filter " repeat , lautet der Parameter "decorator" " repeatFilter . Im Folgenden werden wir einen benutzerdefinierten Filter dekorieren, der eine bestimmte Zeichenfolge n- mal wiederholt, sodass das Ergebnis umgekehrt wird. Sie können auch die eingebauten Filter von Eawn auf dieselbe Weise dekorieren, dies wird jedoch nicht empfohlen, da dies die Funktionalität des Frameworks beeinflussen kann.
<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);
};
});
