ng-repeat 动画完成回调

Question

所以我有一个简单的 ng-repeat，其中包含在 javascript 中定义的输入动画。

沙盒：http://codepen.io/anri82/pen/KwgGeY

代码：

<div ng-app="myApp" ng-controller="MyController">
  {{state}}
  <ul>
     <li class="repeat-animate" ng-repeat="item in list">{{item}}</li>
  </ul>
  <button ng-click="add()">add</button>
</div>

angular.module('myApp', ['ngAnimate'])
.controller("MyController", function($scope) { 
   $scope.state ="idle";
   $scope.id=3;
   $scope.list = [1,2];
   $scope.add = function () {
     $scope.state="pushing";
     $scope.list.push($scope.id++);
     $scope.state="done pushing";
   }; 
}).animation('.repeat-animate', function () {
  return {
    enter: function (element, done) {
      element.hide().show(2000, done);
    }
  };
});

只有在动画完成后，我如何将$scope.state 切换到done pushing？答案应该是有角度的，不要建议setTimeout。

Answer 1

使用您正在执行的 javascript 动画方法，您需要在动画的 done 回调中掌握当前元素的范围。由于更新变量后它在角度上下文之外，您需要通过执行$scope.$apply()（或使用$timeout、scope.$evalAsync 等）手动调用摘要循环。而且由于 ng-repeat 创建了一个子作用域，元素的作用域实际上将具有从父控制器作用域继承的属性 state，因此为了使更新反映在父作用域上，请使用一个对象来包装 @987654327 @ 属性，这样子作用域和父作用域具有相同的对象引用。

angular.module('myApp', ['ngAnimate'])
.controller("MyController", function($scope) { 
  $scope.push = {state: "idle" }; 
  $scope.id=3;
  $scope.list = [1,2];
  $scope.add = function () {
    $scope.push.state="pushing";
    $scope.list.push($scope.id++);

  }; 
}).animation('.repeat-animate', function () {
  return {
    enter: function (element, done) {
     element.hide().show(2000, function(){
          var scope = element.scope(); //Get the scope
          scope.$evalAsync(function(){ //Push it to async queue
             scope.push.state="done pushing"
          }); 
      });
    }
  };
});

Demo