Question

TL; DR：

我想在页面加载时使用角度触发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，改变了某些事物的名称）

HTML：

<div ng-repeat="pizza in pizzas" class="za" ng-click="bake(pizza)"></div>

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：

// 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);

Answer 1

正如documentation中指出的那样：

如果您想在每次调用$ digest时收到通知，您可以注册一个没有监听器的watchExpression函数。（由于watchExpression可以在检测到更改时每$摘要周期执行多次，因此请准备好多次调用您的监听器。）

因此，您可以使用以下代码计算$digest：

var nbDigest = 0;

$rootScope.$watch(function() {
  nbDigest++;
});

<小时/> 更新：关于为什么你不能依赖HTML的插图，如果你看看你的开发控制台，你会看到Angular抱怨无法结束一个digect循环（10个周期后的流产）

＆＃13;

angular.module("test", []).controller("test", function($scope) {
  
  $scope.digestCount = 0;

  $scope.incrementDigestCount = function() {
      return ++$scope.digestCount;
  }
  
});

＆＃13;

<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>

＆＃13;

计算Angular的$ digest周期

TL; DR：

长版：

相关代码：

HTML：

css / sass（为简洁起见，删除了浏览器前缀）：

JS：

1 个答案: