fix(ngSwitch): avoid removing DOM nodes twice within watch operation

src/ng/directive/ngSwitch.js

@@ -141,22 +141,23 @@ var ngSwitchDirective = ['$animate', function($animate) {
       var watchExpr = attr.ngSwitch || attr.on,
           selectedTranscludes = [],
           selectedElements = [],
-          previousElements = [],
+          previousLeaveAnimations = [],
           selectedScopes = [];
 
       scope.$watch(watchExpr, function ngSwitchWatchAction(value) {
         var i, ii;
-        for (i = 0, ii = previousElements.length; i < ii; ++i) {
-          previousElements[i].remove();
+        for (i = 0, ii = previousLeaveAnimations.length; i < ii; ++i) {
+          $animate.cancel(previousLeaveAnimations[i]);
         }
-        previousElements.length = 0;
+        previousLeaveAnimations.length = 0;
 
         for (i = 0, ii = selectedScopes.length; i < ii; ++i) {
           var selected = getBlockNodes(selectedElements[i].clone);
           selectedScopes[i].$destroy();
-          previousElements[i] = selected;
-          $animate.leave(selected).then(function() {
-            previousElements.splice(i, 1);
+
+          var promise = previousLeaveAnimations[i] = $animate.leave(selected);
+          promise.then(function() {
+            previousLeaveAnimations.splice(i, 1);
           });
         }
 

test/ng/directive/ngSwitchSpec.js

@@ -314,7 +314,7 @@ describe('ngSwitch', function() {
   }));
 });
 
-describe('ngSwitch animations', function() {
+describe('ngSwitch animation', function() {
   var body, element, $rootElement;
 
   function html(content) {
@@ -323,8 +323,6 @@ describe('ngSwitch animations', function() {
     return element;
   }
 
-  beforeEach(module('ngAnimateMock'));
-
   beforeEach(module(function() {
     // we need to run animation on attached elements;
     return function(_$rootElement_) {
@@ -339,117 +337,122 @@ describe('ngSwitch animations', function() {
     dealoc(element);
   });
 
-  it('should fire off the enter animation',
-    inject(function($compile, $rootScope, $animate) {
-      var item;
-      var $scope = $rootScope.$new();
-      element = $compile(html(
-        '<div ng-switch on="val">' +
-          '<div ng-switch-when="one">one</div>' +
-          '<div ng-switch-when="two">two</div>' +
-          '<div ng-switch-when="three">three</div>' +
-        '</div>'
-      ))($scope);
-
-      $rootScope.$digest(); // re-enable the animations;
-      $scope.val = 'one';
-      $scope.$digest();
-
-      item = $animate.queue.shift();
-      expect(item.event).toBe('enter');
-      expect(item.element.text()).toBe('one');
-    })
-  );
-
-
-  it('should fire off the leave animation',
-    inject(function($compile, $rootScope, $animate) {
-      var item;
-      var $scope = $rootScope.$new();
-      element = $compile(html(
-        '<div ng-switch on="val">' +
-          '<div ng-switch-when="one">one</div>' +
-          '<div ng-switch-when="two">two</div>' +
-          '<div ng-switch-when="three">three</div>' +
-        '</div>'
-      ))($scope);
-
-      $rootScope.$digest(); // re-enable the animations;
-      $scope.val = 'two';
-      $scope.$digest();
-
-      item = $animate.queue.shift();
-      expect(item.event).toBe('enter');
-      expect(item.element.text()).toBe('two');
-
-      $scope.val = 'three';
-      $scope.$digest();
-
-      item = $animate.queue.shift();
-      expect(item.event).toBe('leave');
-      expect(item.element.text()).toBe('two');
-
-      item = $animate.queue.shift();
-      expect(item.event).toBe('enter');
-      expect(item.element.text()).toBe('three');
-    })
-  );
-
-  it('should destroy the previous leave animation if a new one takes place', function() {
-    module(function($provide) {
-      $provide.decorator('$animate', function($delegate, $$q) {
-        var emptyPromise = $$q.defer().promise;
-        $delegate.leave = function() {
-          return emptyPromise;
-        };
-        return $delegate;
-      });
-    });
-    inject(function ($compile, $rootScope, $animate, $templateCache) {
-      var item;
-      var $scope = $rootScope.$new();
-      element = $compile(html(
-        '<div ng-switch="inc">' +
-          '<div ng-switch-when="one">one</div>' +
-          '<div ng-switch-when="two">two</div>' +
-        '</div>'
-      ))($scope);
-
-      $scope.$apply('inc = "one"');
-
-      var destroyed, inner = element.children(0);
-      inner.on('$destroy', function() {
-        destroyed = true;
+  describe('behavior', function() {
+    it('should destroy the previous leave animation if a new one takes place', function() {
+      module('ngAnimate');
+      module(function($animateProvider) {
+        $animateProvider.register('.long-leave', function() {
+          return {
+            leave : function(element, done) {
+              //do nothing at all
+            }
+          };
+        });
       });
+      inject(function ($compile, $rootScope, $animate, $templateCache) {
+        var item;
+        var $scope = $rootScope.$new();
+        element = $compile(html(
+          '<div ng-switch="inc">' +
+            '<div ng-switch-when="one">one</div>' +
+            '<div ng-switch-when="two">two</div>' +
+          '</div>'
+        ))($scope);
+
+        $scope.$apply('inc = "one"');
 
-      $scope.$apply('inc = "two"');
+        var destroyed, inner = element.children(0);
+        inner.on('$destroy', function() {
+          destroyed = true;
+        });
 
-      $scope.$apply('inc = "one"');
+        $scope.$apply('inc = "two"');
 
-      $scope.$apply('inc = "two"');
+        $scope.$apply('inc = "one"');
 
-      expect(destroyed).toBe(true);
+        expect(destroyed).toBe(true);
+      });
     });
   });
 
-  it('should work with svg elements when the svg container is transcluded', function() {
-    module(function($compileProvider) {
-      $compileProvider.directive('svgContainer', function() {
-        return {
-          template: '<svg ng-transclude></svg>',
-          replace: true,
-          transclude: true
-        };
+  describe('events', function() {
+    beforeEach(module('ngAnimateMock'));
+
+    it('should fire off the enter animation',
+      inject(function($compile, $rootScope, $animate) {
+        var item;
+        var $scope = $rootScope.$new();
+        element = $compile(html(
+          '<div ng-switch on="val">' +
+            '<div ng-switch-when="one">one</div>' +
+            '<div ng-switch-when="two">two</div>' +
+            '<div ng-switch-when="three">three</div>' +
+          '</div>'
+        ))($scope);
+
+        $rootScope.$digest(); // re-enable the animations;
+        $scope.val = 'one';
+        $scope.$digest();
+
+        item = $animate.queue.shift();
+        expect(item.event).toBe('enter');
+        expect(item.element.text()).toBe('one');
+      })
+    );
+
+
+    it('should fire off the leave animation',
+      inject(function($compile, $rootScope, $animate) {
+        var item;
+        var $scope = $rootScope.$new();
+        element = $compile(html(
+          '<div ng-switch on="val">' +
+            '<div ng-switch-when="one">one</div>' +
+            '<div ng-switch-when="two">two</div>' +
+            '<div ng-switch-when="three">three</div>' +
+          '</div>'
+        ))($scope);
+
+        $rootScope.$digest(); // re-enable the animations;
+        $scope.val = 'two';
+        $scope.$digest();
+
+        item = $animate.queue.shift();
+        expect(item.event).toBe('enter');
+        expect(item.element.text()).toBe('two');
+
+        $scope.val = 'three';
+        $scope.$digest();
+
+        item = $animate.queue.shift();
+        expect(item.event).toBe('leave');
+        expect(item.element.text()).toBe('two');
+
+        item = $animate.queue.shift();
+        expect(item.event).toBe('enter');
+        expect(item.element.text()).toBe('three');
+      })
+    );
+
+    it('should work with svg elements when the svg container is transcluded', function() {
+      module(function($compileProvider) {
+        $compileProvider.directive('svgContainer', function() {
+          return {
+            template: '<svg ng-transclude></svg>',
+            replace: true,
+            transclude: true
+          };
+        });
+      });
+      inject(function($compile, $rootScope) {
+        element = $compile('<svg-container ng-switch="inc"><circle ng-switch-when="one"></circle>' +
+          '</svg-container>')($rootScope);
+        $rootScope.inc = 'one';
+        $rootScope.$apply();
+
+        var circle = element.find('circle');
+        expect(circle[0].toString()).toMatch(/SVG/);
       });
-    });
-    inject(function($compile, $rootScope) {
-      element = $compile('<svg-container ng-switch="inc"><circle ng-switch-when="one"></circle>' +
-        '</svg-container>')($rootScope);
-      $rootScope.inc = 'one';
-      $rootScope.$apply();
-
-      var circle = element.find('circle');
-      expect(circle[0].toString()).toMatch(/SVG/);
     });
   });
 });