Animation ng-repeat imbriquée

Question

J'ai essayé d'animer une liste d'éléments divisés par des lignes (le parent ng-repeat) et les colonnes (l'enfant ng-repeat). J'ai réalisé l'animation que je voulais avec ng-repeats. Le problème est que lorsque vous utilisez la même animation avec ng-repeats imbriqué, l'animation n'est pas tout à fait ce que je m'attendais à être. Voici le PLUNKER sur lequel je travaille actuellement. Si quelqu'un peut me diriger dans la bonne direction, je l'apprécierais grandement.

Answer 1

La portée d'animation utilisée pour l'échelonnement est liée à un ID unique stocké sur le parent de l'élément animé. Par défaut, il est généré automatiquement la première fois qu'il est utilisé. En définissant manuellement la même valeur pour plusieurs éléments différents, les animations de ces éléments peuvent être décalées même s'ils ont des parents différents. Notez que cette technique utilise les détails d'implémentation interne d'AngularJS-Animation et peut ne pas fonctionner dans les futures versions

Voici la directive qui remplace l'ID d'étendue d'animation. Appliquez-le au parent des éléments animés. (example)

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