perf(*): don't trigger additional digests on enter/leave of structural directives

ngIf, ngInclude, ngSwitch, and ngView now use the `done` callback functions on animation runners returned
by leave/enter animations to do internal cleanup (and $anchorScroll for ngInclude and ngView).
Previously, they were using promise callbacks (`then`), which caused an unnessecary digest.

Background:

In bf0f550, animation
promises where introduced instead of animation callbacks. These promises were however not tied to
the digest cycle, so you had to manually call `$apply` inside them.

This was changed in c8700f0,
so animation promise callbacks would always trigger a `$digest`. This meant that several built-in
directives would now trigger additional digests on leave (ngIf, ngSwitch) or enter/leave (ngInclude,
ngView).

Note that this applies to all calls to $animate.enter/leave, even if no actual animations are running,
because the animation runner code is in the core ng module.

Fixes #15322

Author: Narretz

src/ng/directive/ngIf.js

@@ -115,7 +115,7 @@ var ngIfDirective = ['$animate', '$compile', function($animate, $compile) {
             }
             if (block) {
               previousElements = getBlockNodes(block.clone);
-              $animate.leave(previousElements).then(function() {
+              $animate.leave(previousElements).done(function() {
                 previousElements = null;
               });
               block = null;

src/ng/directive/ngInclude.js

@@ -214,7 +214,7 @@ var ngIncludeDirective = ['$templateRequest', '$anchorScroll', '$animate',
             currentScope = null;
           }
           if (currentElement) {
-            $animate.leave(currentElement).then(function() {
+            $animate.leave(currentElement).done(function() {
               previousElement = null;
             });
             previousElement = currentElement;
@@ -248,7 +248,7 @@ var ngIncludeDirective = ['$templateRequest', '$anchorScroll', '$animate',
               // directives to non existing elements.
               var clone = $transclude(newScope, function(clone) {
                 cleanupLastIncludeContent();
-                $animate.enter(clone, null, $element).then(afterAnimation);
+                $animate.enter(clone, null, $element).done(afterAnimation);
               });
 
               currentScope = newScope;

src/ng/directive/ngSwitch.js

@@ -153,21 +153,25 @@ var ngSwitchDirective = ['$animate', '$compile', function($animate, $compile) {
           selectedScopes = [];
 
       var spliceFactory = function(array, index) {
-          return function() { array.splice(index, 1); };
+          return function() {
+            array.splice(index, 1);
+          };
       };
 
       scope.$watch(watchExpr, function ngSwitchWatchAction(value) {
         var i, ii;
-        for (i = 0, ii = previousLeaveAnimations.length; i < ii; ++i) {
+
+        // Start from the end, in case the array is modified during the loop
+        for (i = previousLeaveAnimations.length - 1; i >= 0; i--) {
           $animate.cancel(previousLeaveAnimations[i]);
         }
         previousLeaveAnimations.length = 0;
 
         for (i = 0, ii = selectedScopes.length; i < ii; ++i) {
           var selected = getBlockNodes(selectedElements[i].clone);
           selectedScopes[i].$destroy();
-          var promise = previousLeaveAnimations[i] = $animate.leave(selected);
-          promise.then(spliceFactory(previousLeaveAnimations, i));
+          var runner = previousLeaveAnimations[i] = $animate.leave(selected);
+          runner.done(spliceFactory(previousLeaveAnimations, i));
         }
 
         selectedElements.length = 0;

src/ngRoute/directive/ngView.js

@@ -207,7 +207,7 @@ function ngViewFactory($route, $anchorScroll, $animate) {
           }
           if (currentElement) {
             previousLeaveAnimation = $animate.leave(currentElement);
-            previousLeaveAnimation.then(function() {
+            previousLeaveAnimation.done(function() {
               previousLeaveAnimation = null;
             });
             currentElement = null;
@@ -229,7 +229,7 @@ function ngViewFactory($route, $anchorScroll, $animate) {
             // function is called before linking the content, which would apply child
             // directives to non existing elements.
             var clone = $transclude(newScope, function(clone) {
-              $animate.enter(clone, null, currentElement || $element).then(function onNgViewEnter() {
+              $animate.enter(clone, null, currentElement || $element).done(function onNgViewEnter() {
                 if (angular.isDefined(autoScrollExp)
                   && (!autoScrollExp || scope.$eval(autoScrollExp))) {
                   $anchorScroll();

test/ng/directive/ngIfSpec.js

@@ -185,6 +185,23 @@ describe('ngIf', function() {
       expect(element.children().length).toBe(0);
       expect(element.text()).toBe('');
     }));
+
+    it('should not trigger a digest when the element is removed', inject(function($$rAF, $rootScope, $timeout) {
+      var spy = spyOn($rootScope, '$digest').and.callThrough();
+
+      $scope.hello = true;
+      makeIf('hello');
+      expect(element.children().length).toBe(1);
+      $scope.$apply('hello = false');
+      spy.calls.reset();
+      expect(element.children().length).toBe(0);
+      // The animation completion is async even without actual animations
+      $$rAF.flush();
+
+      expect(spy).not.toHaveBeenCalled();
+      // A digest may have been triggered asynchronously, so check the queue
+      $timeout.verifyNoPendingTasks();
+    }));
   });
 
   describe('and transcludes', function() {
@@ -319,6 +336,7 @@ describe('ngIf', function() {
       module(function($provide) {
         $provide.decorator('$animate', function($delegate, $$q) {
           var emptyPromise = $$q.defer().promise;
+          emptyPromise.done = noop;
 
           $delegate.leave = function() {
             return emptyPromise;

test/ng/directive/ngIncludeSpec.js

@@ -423,6 +423,34 @@ describe('ngInclude', function() {
     });
 
 
+    it('should not trigger a digest when the include is changed', function() {
+
+      inject(function($$rAF, $templateCache, $rootScope, $compile, $timeout) {
+        var spy = spyOn($rootScope, '$digest').and.callThrough();
+
+        $templateCache.put('myUrl', 'my template content');
+        $templateCache.put('myOtherUrl', 'my other template content');
+
+        $rootScope.url = 'myUrl';
+        element = jqLite('<div><ng-include src="url"></ng-include></div>');
+        element = $compile(element)($rootScope);
+        $rootScope.$digest();
+        // The animation completion is async even without actual animations
+        $$rAF.flush();
+        expect(element.text()).toEqual('my template content');
+
+        $rootScope.$apply('url = "myOtherUrl"');
+        spy.calls.reset();
+        expect(element.text()).toEqual('my other template content');
+        $$rAF.flush();
+
+        expect(spy).not.toHaveBeenCalled();
+        // A digest may have been triggered asynchronously, so check the queue
+        $timeout.verifyNoPendingTasks();
+      });
+    });
+
+
     describe('autoscroll', function() {
       var autoScrollSpy;
 
@@ -759,6 +787,7 @@ describe('ngInclude', function() {
       module(function($provide) {
         $provide.decorator('$animate', function($delegate, $$q) {
           var emptyPromise = $$q.defer().promise;
+          emptyPromise.done = noop;
 
           $delegate.leave = function() {
             return emptyPromise;

test/ng/directive/ngSwitchSpec.js

@@ -301,6 +301,32 @@ describe('ngSwitch', function() {
   }));
 
 
+  it('should not trigger a digest when an element is removed', inject(function($$rAF, $compile, $rootScope, $timeout) {
+    var spy = spyOn($rootScope, '$digest').and.callThrough();
+
+    $rootScope.select = 1;
+    element = $compile(
+      '<div ng-switch="select">' +
+        '<div ng-switch-when="1">first</div>' +
+        '<div ng-switch-when="2">second</div>' +
+      '</div>')($rootScope);
+    $rootScope.$apply();
+
+    expect(element.text()).toEqual('first');
+
+    $rootScope.select = 2;
+    $rootScope.$apply();
+    spy.calls.reset();
+    expect(element.text()).toEqual('second');
+    // The animation completion is async even without actual animations
+    $$rAF.flush();
+
+    expect(spy).not.toHaveBeenCalled();
+    // A digest may have been triggered asynchronously, so check the queue
+    $timeout.verifyNoPendingTasks();
+  }));
+
+
   describe('ngSwitchWhen separator', function() {
     it('should be possible to define a separator', inject(function($rootScope, $compile) {
       element = $compile(

test/ngRoute/directive/ngViewSpec.js

@@ -584,6 +584,40 @@ describe('ngView', function() {
         });
       });
     });
+
+
+    it('should not trigger a digest when the view is changed', function() {
+      module(function($routeProvider) {
+        $routeProvider.when('/foo', {templateUrl: 'myUrl1'});
+        $routeProvider.when('/bar', {templateUrl: 'myUrl2'});
+      });
+
+      inject(function($$rAF, $templateCache, $rootScope, $compile, $timeout, $location, $httpBackend) {
+        var spy = spyOn($rootScope, '$digest').and.callThrough();
+
+        $templateCache.put('myUrl1', 'my template content');
+        $templateCache.put('myUrl2', 'my other template content');
+
+        $location.path('/foo');
+        $rootScope.$digest();
+
+        // The animation completion is async even without actual animations
+        $$rAF.flush();
+        expect(element.text()).toEqual('my template content');
+
+        $location.path('/bar');
+        $rootScope.$digest();
+        spy.calls.reset();
+
+        $$rAF.flush();
+        expect(element.text()).toEqual('my other template content');
+
+        expect(spy).not.toHaveBeenCalled();
+        // A digest may have been triggered asynchronously, so check the queue
+        $timeout.verifyNoPendingTasks();
+      });
+    });
+
   });
 
   describe('and transcludes', function() {