AngularJS
Decoradores
Buscar..
Sintaxis
- decorador (nombre, decorador);
Observaciones
Decorador es una función que permite modificar un servicio , una fábrica , una directiva o un filtro antes de su uso. Decorator se utiliza para anular o modificar el comportamiento del servicio. El valor de retorno de la función de decoración puede ser el servicio original o un nuevo servicio que reemplaza, o envuelve y delega, el servicio original.
Cualquier decoración debe realizarse en la fase de config la aplicación angular mediante la inyección de $provide y utilizando su función $provide.decorator .
La función de decorador tiene un objeto
$delegateinyectado para proporcionar acceso al servicio que coincide con el selector en el decorador. Este$delegateserá el servicio que estás decorando. El valor de retorno de la función proporcionada al decorador tendrá lugar en el servicio, directiva o filtro que se esté decorando.
Uno debería considerar usar el decorador solo si cualquier otro enfoque no es apropiado o resulta ser demasiado tedioso. Si la aplicación grande usa el mismo servicio y una parte cambia el comportamiento del servicio, es fácil crear confusión y / o errores en el proceso.
El caso de uso típico sería cuando tiene una dependencia de terceros que no puede actualizar, pero necesita que funcione de manera diferente o que la extienda.
Servicio de decoración, fábrica.
A continuación se muestra un ejemplo de decorador de servicios, anulando la fecha null devuelta por el servicio.
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>
Decorar directiva
Las directivas se pueden decorar como servicios y podemos modificar o reemplazar cualquiera de sus funciones. Tenga en cuenta que se accede a la directiva en la posición 0 en $ matriz de delegado y el parámetro de nombre en el decorador debe incluir el sufijo de la Directive (distingue entre mayúsculas y minúsculas).
Por lo tanto, si la directiva se llama myDate , se puede acceder a ella usando myDateDirective usando $delegate[0] .
A continuación se muestra un ejemplo simple donde la directiva muestra la hora actual. Lo decoraremos para actualizar la hora actual en intervalos de un segundo. Sin decoración siempre se mostrará el mismo tiempo.
<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
}
};
});
Decorar filtro
Al decorar filtros, el parámetro de nombre debe incluir el sufijo de Filter (distingue entre mayúsculas y minúsculas). Si el filtro se llama repeat , el parámetro decorador es repeatFilter . A continuación, decoraremos el filtro personalizado que repite cualquier cadena dada n veces para que el resultado se invierta. También puede decorar los filtros incorporados de angular de la misma forma, aunque no se recomienda ya que puede afectar la funcionalidad del marco.
<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);
};
});
