计算Angular的$ digest周期
[英]Counting Angular's $digest Cycles
问题描述
tl;dr: 
TL;博士：
I want to have angular trigger css animations on page load. 我想在页面加载时使用角度触发css动画。 Is there a way to count angular's digest cycles within say, a controller or directive? 有没有办法计算角度的消化周期，例如控制器或指令？
long version: 长版：
I have some angular animations which I want to run when the page loads, using ng-enter, ng-leave, ng-move and so on... with an ng-repeat directive. 我有一些角度动画，我想在页面加载时运行，使用ng-enter，ng-leave，ng-move等...使用ng-repeat指令。
As of 1.3.6, I know that angular waits to apply any animations until after 2 digest cycles occur, so these animations aren't happening at all because the data is (almost always)loaded into the view on the first digest cycle of my application. 从1.3.6开始，我知道角度等待应用任何动画，直到2个摘要周期发生，所以这些动画根本不会发生，因为数据（几乎总是）加载到我的第一个摘要周期的视图中应用。 (sauce: https://docs.angularjs.org/api/ngAnimate#css-staggering-animations ) （酱： https ： //docs.angularjs.org/api/ngAnimate#css-staggering-animations ）
I'm wondering if there's some way that I can count digest cycles and either trigger the animations, or load the data in after the 2nd digest cycle? 我想知道是否有一些方法可以计算摘要周期并触发动画，或者在第二个摘要周期后加载数据？
Also, if I wait until 2 digest cycles, is there a risk that the second cycle wont occur in some instances meaning that my data wouldn't load into the view? 此外，如果我等到2个摘要周期，是否有可能在某些情况下第二个周期不会发生，这意味着我的数据不会加载到视图中？ If this is the case, is there a way that I can guarantee that at least 2 digest cycles will occur every time? 如果是这种情况，有没有办法可以保证每次至少会发生2个摘要周期？
As a temporary fix, I'm using $timeout to load my data in after 500ms, but I know this is a really bad idea. 作为临时修复，我使用$ timeout在500ms后加载我的数据，但我知道这是一个非常糟糕的主意。
relevant code: 相关代码：
(changed some of the names of certain things because of an NDA on this project) （由于该项目的NDA，改变了某些事物的名称）
html: HTML：
<div ng-repeat="pizza in pizzas" class="za" ng-click="bake(pizza)"></div>
css/sass (browser prefixes removed for brevity): css / sass（为简洁起见，删除了浏览器前缀）：
.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: 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);
1 个解决方案
解决方案1
12 已采纳 2015-02-24 20:11:16
As pointed out in the documentation : 正如文件中指出的那样：
If you want to be notified whenever $digest is called, you can register a watchExpression function with no listener.
So you can count the $digest with the following code: 因此，您可以使用以下代码计算$digest ：
var nbDigest = 0;
$rootScope.$watch(function() {
nbDigest++;
});
Update: illustration as to why you cannot rely on HTML, if you look at your dev console you will see Angular complaining about not being able to end a digect cycle (abortion after 10 cycles)
更新：图解为什么你不能依赖HTML，如果你看看你的开发控制台，你会看到Angular抱怨无法结束一个digect周期（10个周期后流产）
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.