crear - directivas personalizadas angularjs

Ejecución de código después de que una animación AngularJS haya finalizado

Question

Tengo un elemento cuya visibilidad se alterna con ng-show . También estoy usando animaciones CSS, las automáticas de ng-animate, en este elemento para animar su entrada.

El elemento contendrá una imagen o un video.

En el caso de que el elemento contenga un video, quiero reproducirlo, pero no quiero reproducir el video hasta que termine de animarse.

Como tal, me preguntaba si hay una manera fácil de vincular una devolución de llamada al final de una animación CSS en AngularJS?

Los docs referencia a doneCallback , pero no puedo ver una forma de especificarlo ...

Una solución (?) Que he pensado es en $watch ing element.hasClass("ng-hide-add-active") y esperar a que se element.hasClass("ng-hide-add-active") con (true, false) , lo que implica que simplemente se ha eliminado.

¿Hay alguna manera mejor?

Answer 1

Como @zeroflagL ha sugerido, una directiva personalizada para reemplazar ngShow es probablemente el camino a seguir. Puede usar & para pasar las devoluciones de llamada a la directiva, que se puede llamar una vez que las animaciones hayan finalizado. Por coherencia, las animaciones se realizan agregando y eliminando la clase ng-hide , que es el mismo método utilizado por la directiva ngShow habitual:

app.directive(''myShow'', function($animate) {
return {
scope: {
''myShow'': ''='',
''afterShow'': ''&'',
''afterHide'': ''&''
},
link: function(scope, element) {
scope.$watch(''myShow'', function(show, oldShow) {
if (show) {
$animate.removeClass(element, ''ng-hide'', scope.afterShow);
}
if (!show) {
$animate.addClass(element, ''ng-hide'', scope.afterHide);
}
});
}
}
})

Ejemplo de uso de esta escucha de una variable de alcance sería:

<div my-show="show" after-hide="afterHide()" after-show="afterShow()">...</div>

Debido a que esto es agregar / eliminar la clase ng-hide, los puntos sobre la animación de los documentos sobre ngShow siguen siendo válidos, y debe agregar display: block !important para el CSS.

Puedes ver un ejemplo de esto en acción en este Plunker .

Answer 2

La respuesta de @ michael-charemza funcionó muy bien para mí. Si estás usando Angular 1.3, cambiaron un poco la promesa. Me quedé estancado en esto por un poco, pero aquí está el cambio que lo hizo funcionar:

if (show) {
$animate.removeClass(element, ''ng-hide'').then(scope.afterShow);
}
if (!show) {
$animate.addClass(element, ''ng-hide'').then(scope.afterHide);
}

Plunker: Ejemplo de código

Answer 3

La solución @ michal-charemza funciona muy bien, pero la directiva crea un alcance aislado, por lo que en algunos casos no puede ser un reemplazo directo de la directiva predeterminada ng-show.

Lo he modificado un poco, para que no cree nuevos ámbitos y se pueda usar de manera intercambiable con la directiva ng-show.

app.directive(''myShow'', function($animate) {
return {
link: function(scope, element, attrs) {
scope.$watch(attrs[''myShow''], function(show, oldShow) {
if (show) {
$animate.removeClass(element, ''ng-hide'').then(function(){
scope.$apply(attrs[''myAfterShow'']);
});
} else {
$animate.addClass(element, ''ng-hide'').then(function(){
scope.$apply(attrs[''myAfterHide'']);
});
}
});
}
}
})

Uso:

<div my-show="show" my-after-hide="afterHide()" my-after-show="afterShow()">...</div>

Plunker