AngularJS
dekoratörer
Sök…
Syntax
- dekoratör (namn, dekoratör);
Anmärkningar
Dekoratör är en funktion som gör att en service , fabrik , direktiv eller filter kan ändras innan den används. Decorator används för att åsidosätta eller ändra beteendet hos tjänsten. Returvärdet för dekoratörsfunktionen kan vara den ursprungliga tjänsten, eller en ny tjänst som ersätter, eller lindar och delegerar till, den ursprungliga tjänsten.
All dekorering måste göras i vinkelapplikationens config genom att injicera $provide och använda dess $provide.decorator funktion.
Dekoratörsfunktionen har ett
$delegateobjekt injicerat för att ge åtkomst till den tjänst som matchar väljaren i dekoratören. Denna$delegateär tjänsten du dekorerar. Returvärdet för den funktion som tillhandahålls till dekoratören kommer att ske när tjänsten, direktivet eller filtret dekoreras.
Man bör överväga att använda dekoratörer endast om något annat tillvägagångssätt inte är lämpligt eller visar sig vara för tråkigt. Om stor applikation använder samma tjänst och en del ändrar servicebeteende är det enkelt att skapa förvirring och / eller buggar i processen.
Ett typiskt användningsfall skulle vara när du har ett tredjepartsberoende som du inte kan uppgradera men behöver det för att fungera lite annorlunda eller förlänga det.
Dekorera service, fabrik
Nedan är ett exempel på serviceinredare, åsidosättande av null returneras av tjänsten.
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>
Dekorera direktivet
Direktiv kan dekoreras precis som tjänster och vi kan ändra eller ersätta någon av dess funktioner. Observera att själva direktivet nås på position 0 i $ delegat-array och namnparameter i dekoratör måste innehålla Directive (skiftlägeskänsligt).
Så om direktivet kallas myDate kan det nås med myDateDirective med $delegate[0] .
Nedan är ett enkelt exempel där direktiv visar aktuell tid. Vi dekorerar det för att uppdatera aktuell tid med en sekunders intervall. Utan dekoration kommer det alltid att visas samma gång.
<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
}
};
});
Dekorera filter
När filter dekoreras måste Filter innehålla Filter (skiftlägeskänsligt). Om filter kallas repeat är dekoratörsparameteren repeatFilter . Nedan dekorerar vi ett anpassat filter som upprepar en given sträng n gånger så att resultatet blir omvänd. Du kan också dekorera vinkelens inbyggda filter på samma sätt, även om det inte rekommenderas eftersom det kan påverka ramens funktionalitet.
<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);
};
});
