ng-repeat animation complete callback

Question

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

Sandbox: http://codepen.io/anri82/pen/KwgGeY

Code:

Answer 1

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