NG-重复动画完成回调 [英] ng-repeat animation complete callback

问题描述

所以我有一个简单的NG-重复输入与javascript中定义的动画。

So I have a simple ng-repeat with enter animation defined in javascript.

沙箱：的http：//$c$cpen.io/anri82/pen/KwgGeY

code：

<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 到进行推唯一的之后的动画完成？答案应该是角度的方式，不建议的setTimeout 。

How do I switch $scope.state to done pushing only after animation is complete? Answer should be in angular way, don't suggest setTimeout.

推荐答案

通过你正在做的JavaScript动画的方式，你需要动画的完成回调中得到当前元素的范围举行。既然是升级你需要做 $范围手动调用摘要周期变量后角背景之外。$适用（）（或使用 $超时，范围。$ evalAsync 等）。而且还因为NG-重复创建一个子范围，元素的范围实际上有继承的财产状态从父控制范围，因此在为了得到反映在更新父范围，使用对象来包装状态属性，所以这两个孩子的范围和家长有相同的对象引用。

With the javascript animation approach you are doing, you would need to get hold of the scope of the current element within the animation's done callback. Since it is outside of angular context after updating the variable you need to manually invoke the digest cycle by doing $scope.$apply() (or use $timeout, scope.$evalAsync and so on). And also since ng-repeat creates a child scope, element's scope would actually have the inherited property state from the parent controller scope, so in-order for the update to get reflected on the parent scope, use an object to wrap state property, so that both child scope and parent has the same object reference.

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

这篇关于NG-重复动画完成回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！