ryeballar
ryeballar

Reputation: 30088

Nested ng-repeat animation

I have been trying to animate a list of elements divided by rows(the parent ng-repeat) and the columns(the child ng-repeat). I have achieved the animation that I wanted with singly ng-repeats. The problem is that when using the same animation with nested ng-repeats, the animation isn't quite what I expected it to be. Here is the PLUNKER that I'm currently working on. If anyone can point me to the right direction, I would greatly appreciate it.

Upvotes: 1

Views: 508

Answers (1)

Dark Falcon
Dark Falcon

Reputation: 44181

The animation scope used for staggering is tied to a unique ID stored on the parent of the animated element. By default, this is auto-generated the first time it is used. By setting this manually to the same value for several different elements, the animations in those elements can be staggered even though they have different parents. Note that this technique uses internal implementation details of AngularJS-Animation and may not work in future versions

Here is the directive which overrides the animation scope ID. Apply it to the parent of the animated elements. (example)

.directive('forceAnimationScope', function()
{
  return {
    restrict: 'A',
    link: function(scope, element, attributes) {
      element.data('$$ngAnimateKey', attributes.forceAnimationScope);
    }
  };
});

Upvotes: 2

Related Questions