javascript - event - Contando los ciclos $ digest de Angular
angular title (1)
tl; dr:
Quiero tener animaciones css de disparador angular en la carga de la página. ¿Hay alguna manera de contar los ciclos de resumen de angular dentro de, digamos, un controlador o directiva?
Versión larga:
Tengo algunas animaciones angulares que quiero ejecutar cuando se carga la página, usando ng-enter, ng-leave, ng-move y así sucesivamente ... con una directiva ng-repeat.
Desde 1.3.6, sé que angular espera para aplicar cualquier animación hasta después de 2 ciclos de digestión, por lo que estas animaciones no están sucediendo en absoluto porque los datos están (casi siempre) cargados en la vista en el primer ciclo de resumen de mi solicitud. (salsa: https://docs.angularjs.org/api/ngAnimate#css-staggering-animations )
Me pregunto si hay alguna manera de contar los ciclos de resumen y activar las animaciones o cargar los datos después del segundo ciclo de resumen.
Además, si espero hasta 2 ciclos de resumen, ¿existe el riesgo de que el segundo ciclo no ocurra en algunos casos, lo que significa que mis datos no se cargarán en la vista? Si este es el caso, ¿hay alguna manera de garantizar que al menos se realizarán 2 ciclos de digestión todo el tiempo?
Como solución temporal, estoy usando $ timeout para cargar mis datos después de 500 ms, pero sé que esta es una muy mala idea.
código relevante:
(cambió algunos de los nombres de ciertas cosas debido a un NDA en este proyecto)
html:
<div ng-repeat="pizza in pizzas" class="za" ng-click="bake(pizza)"></div>
css / sass (prefijos del navegador eliminados por brevedad):
.za {
//other styles
&.ng-enter,
&.ng-leave,
&.ng-move {
transition: all 1s $slowOut;
transform: translate(1000px, 0px) rotateZ(90deg);
}
&.ng-enter,
&.ng-leave.ng-leave-active
&.ng-move, {
transform: translate(1000px, 0px) rotateZ(90deg);
}
&.ng-enter.ng-enter-active,
&.ng-leave,
&.ng-move.ng-move-active {
transform: translate(0, 0) rotateZ(0deg);
}
&.ng-enter-stagger,
&.ng-leave-stagger,
&.ng-move-stagger {
transition-delay: 2s;
transition-duration: 0s;
}
}
js:
// inside a controller
timeout(function() {
scope.pizza = [ // actually injecting ''myData'' and using `myData.get()` which returns an array of objects
{toppings: [''cheese'', ''formaldehyde'']},
{toppings: [''mayo'', ''mustard'', ''garlic'']},
{toppings: [''red sauce'', ''blue sauce'']}
];
}, 500);
Como se señala en la documentación :
Si desea que se le notifique cuando se invoca $ digest, puede registrar una función watchExpression sin escucha. (Dado que watchExpression puede ejecutarse varias veces por $ ciclo de resumen cuando se detecta un cambio, prepárese para realizar múltiples llamadas a su oyente).
Entonces puedes contar el $digest con el siguiente código:
var nbDigest = 0;
$rootScope.$watch(function() {
nbDigest++;
}); Actualización: ilustración de por qué no puedes confiar en HTML, si miras a tu consola de desarrollo, verás que Angular se queja de no poder finalizar un ciclo de diagnóstico (aborto después de 10 ciclos)
angular.module("test", []).controller("test", function($scope) {
$scope.digestCount = 0;
$scope.incrementDigestCount = function() {
return ++$scope.digestCount;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="test" ng-controller="test">
<div>{{incrementDigestCount()}}</div>
</body>