fix(ngAnimateSwap): make it compatible with ngIf on the same element

Previously, both `ngAnimateSwap` and `ngIf` had a priority of 600, which
meant that (while both are [terminal directives][1]) they were executed
on top of each other (essentially messing each other's comment node).

This commit fixes it, by giving `ngAnimateSwap` a priority of 550, which
is lower than `ngIf` but still higher than other directives.

For reference, here is a list of built-in directive per priority:

```
-400: ngInclude, ngView
  -1: ngRef
   1: ngMessage, ngMessageDefault, ngMessageExp, ngModel, select
  10: ngModelOptions
  99: ngHref, ngSrc, ngSrcset
 100: attr interpolation, ngChecked, ngDisabled, ngList, ngMax, ngMaxlength, ngMin, ngMinlength, ngModel (aria), ngMultiple, ngOpen, ngPattern, ngProp*, ngReadonly, ngRequired, ngSelected, ngStep, ngValue, option
 400: ngInclude, ngView
 450: ngInit
 500: ngController
 600: ngAnimateSwap, ngIf
1000: ngNonBindable, ngRepeat
1200: ngSwitchDefault, ngSwitchWhen
```

[1]: https://docs.angularjs.org/api/ng/service/$compile#-terminal-

Fixes #16616

Author: gkalpak

src/ngAnimate/ngAnimateSwap.js

@@ -92,7 +92,8 @@ var ngAnimateSwapDirective = ['$animate', function($animate) {
     restrict: 'A',
     transclude: 'element',
     terminal: true,
-    priority: 600, // we use 600 here to ensure that the directive is caught before others
+    priority: 550, // We use 550 here to ensure that the directive is caught before others,
+                   // but after `ngIf` (at priority 600).
     link: function(scope, $element, attrs, ctrl, $transclude) {
       var previousElement, previousScope;
       scope.$watchCollection(attrs.ngAnimateSwap || attrs['for'], function(value) {

test/ngAnimate/ngAnimateSwapSpec.js

@@ -20,7 +20,7 @@ describe('ngAnimateSwap', function() {
   }));
 
 
-  it('should render a new container when the expression changes', inject(function() {
+  it('should render a new container when the expression changes', function() {
     element = $compile('<div><div ng-animate-swap="exp">{{ exp }}</div></div>')($rootScope);
     $rootScope.$digest();
 
@@ -40,9 +40,9 @@ describe('ngAnimateSwap', function() {
     expect(third.textContent).toBe('super');
     expect(third).not.toEqual(second);
     expect(second.parentNode).toBeFalsy();
-  }));
+  });
 
-  it('should render a new container only when the expression property changes', inject(function() {
+  it('should render a new container only when the expression property changes', function() {
     element = $compile('<div><div ng-animate-swap="exp.prop">{{ exp.value }}</div></div>')($rootScope);
     $rootScope.exp = {
       prop: 'hello',
@@ -66,9 +66,9 @@ describe('ngAnimateSwap', function() {
     var three = element.find('div')[0];
     expect(three.textContent).toBe('planet');
     expect(three).not.toBe(two);
-  }));
+  });
 
-  it('should watch the expression as a collection', inject(function() {
+  it('should watch the expression as a collection', function() {
     element = $compile('<div><div ng-animate-swap="exp">{{ exp.a }} {{ exp.b }} {{ exp.c }}</div></div>')($rootScope);
     $rootScope.exp = {
       a: 1,
@@ -99,26 +99,24 @@ describe('ngAnimateSwap', function() {
     var four = element.find('div')[0];
     expect(four.textContent.trim()).toBe('4');
     expect(four).not.toEqual(three);
-  }));
+  });
 
   they('should consider $prop as a falsy value', [false, undefined, null], function(value) {
-    inject(function() {
-      element = $compile('<div><div ng-animate-swap="value">{{ value }}</div></div>')($rootScope);
-      $rootScope.value = true;
-      $rootScope.$digest();
+    element = $compile('<div><div ng-animate-swap="value">{{ value }}</div></div>')($rootScope);
+    $rootScope.value = true;
+    $rootScope.$digest();
 
-      var one = element.find('div')[0];
-      expect(one).toBeTruthy();
+    var one = element.find('div')[0];
+    expect(one).toBeTruthy();
 
-      $rootScope.value = value;
-      $rootScope.$digest();
+    $rootScope.value = value;
+    $rootScope.$digest();
 
-      var two = element.find('div')[0];
-      expect(two).toBeFalsy();
-    });
+    var two = element.find('div')[0];
+    expect(two).toBeFalsy();
   });
 
-  it('should consider "0" as a truthy value', inject(function() {
+  it('should consider "0" as a truthy value', function() {
     element = $compile('<div><div ng-animate-swap="value">{{ value }}</div></div>')($rootScope);
     $rootScope.$digest();
 
@@ -130,9 +128,9 @@ describe('ngAnimateSwap', function() {
 
     var two = element.find('div')[0];
     expect(two).toBeTruthy();
-  }));
+  });
 
-  it('should create a new (non-isolate) scope for each inserted clone', inject(function() {
+  it('should create a new (non-isolate) scope for each inserted clone', function() {
     var parentScope = $rootScope.$new();
     parentScope.foo = 'bar';
 
@@ -147,9 +145,9 @@ describe('ngAnimateSwap', function() {
     expect(scopeTwo.foo).toBe('bar');
 
     expect(scopeOne).not.toBe(scopeTwo);
-  }));
+  });
 
-  it('should destroy the previous scope when removing the element', inject(function() {
+  it('should destroy the previous scope when removing the element', function() {
     element = $compile('<div><div ng-animate-swap="value">{{ value }}</div></div>')($rootScope);
 
     $rootScope.$apply('value = 1');
@@ -166,9 +164,9 @@ describe('ngAnimateSwap', function() {
     // Removing the old element (without inserting a new one).
     $rootScope.$apply('value = null');
     expect(scopeTwo.$$destroyed).toBe(true);
-  }));
+  });
 
-  it('should destroy the previous scope when swapping elements', inject(function() {
+  it('should destroy the previous scope when swapping elements', function() {
     element = $compile('<div><div ng-animate-swap="value">{{ value }}</div></div>')($rootScope);
 
     $rootScope.$apply('value = 1');
@@ -177,13 +175,34 @@ describe('ngAnimateSwap', function() {
 
     $rootScope.$apply('value = 2');
     expect(scopeOne.$$destroyed).toBe(true);
-  }));
+  });
 
+  it('should work with `ngIf` on the same element', function() {
+    var tmpl = '<div><div ng-animate-swap="exp" ng-if="true">{{ exp }}</div></div>';
+    element = $compile(tmpl)($rootScope);
+    $rootScope.$digest();
 
-  describe('animations', function() {
-    it('should trigger a leave animation followed by an enter animation upon swap',
-      inject(function() {
+    var first = element.find('div')[0];
+    expect(first).toBeFalsy();
+
+    $rootScope.exp = 'yes';
+    $rootScope.$digest();
+
+    var second = element.find('div')[0];
+    expect(second.textContent).toBe('yes');
+
+    $rootScope.exp = 'super';
+    $rootScope.$digest();
 
+    var third = element.find('div')[0];
+    expect(third.textContent).toBe('super');
+    expect(third).not.toEqual(second);
+    expect(second.parentNode).toBeFalsy();
+  });
+
+
+  describe('animations', function() {
+    it('should trigger a leave animation followed by an enter animation upon swap',function() {
       element = $compile('<div><div ng-animate-swap="exp">{{ exp }}</div></div>')($rootScope);
       $rootScope.exp = 1;
       $rootScope.$digest();
@@ -208,6 +227,6 @@ describe('ngAnimateSwap', function() {
       var forth = $animate.queue.shift();
       expect(forth.event).toBe('leave');
       expect($animate.queue.length).toBe(0);
-    }));
+    });
   });
 });