Emm*_*mma 16 javascript animation cycle digest angularjs
我想在页面加载时使用角度触发css动画.有没有办法计算角度的消化周期,例如控制器或指令？
我有一些角度动画,我想在页面加载时运行,使用ng-enter,ng-leave,ng-move等...使用ng-repeat指令.
从1.3.6开始,我知道角度等待应用任何动画,直到2个摘要周期发生,所以这些动画根本不会发生,因为数据(几乎总是)加载到我的第一个摘要周期的视图中应用.(酱:https://docs.angularjs.org/api/ngAnimate#css-staggering-animations)
我想知道是否有一些方法可以计算摘要周期并触发动画,或者在第二个摘要周期后加载数据？
此外,如果我等到2个摘要周期,是否有可能在某些情况下第二个周期不会发生,这意味着我的数据不会加载到视图中？如果是这种情况,有没有办法可以保证每次至少会发生2个消化周期？
作为临时修复,我使用$ timeout在500ms后加载我的数据,但我知道这是一个非常糟糕的主意.
(由于该项目的NDA,改变了某些事物的名称)
<div ng-repeat="pizza in pizzas" class="za" ng-click="bake(pizza)"></div>
.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;
}
}
// 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);
flo*_*bon 13
正如文件中指出的那样:
如果您希望在调用$ digest时收到通知,则可以注册一个没有监听器的watchExpression函数.(由于watchExpression可以在检测到更改时每$摘要周期执行多次,因此请准备多次调用您的侦听器.)
所以你可以$digest使用以下代码计算:
var nbDigest = 0;
$rootScope.$watch(function() {
nbDigest++;
});
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>| 归档时间： |
|
| 查看次数： |
7049 次 |
| 最近记录： |