fix(ngIf): don't create multiple elements when changing from a truthy to another thruthy value.

tbosch · tbosch · commit 4612705ec297 · 2013-11-11T17:05:43.000-08:00
Fixes angular#4852.
diff --git a/src/ng/directive/ngIf.js b/src/ng/directive/ngIf.js
@@ -60,7 +60,7 @@
       }
 
       /&#42;
-        The transition styles can also be placed on the CSS base class above 
+        The transition styles can also be placed on the CSS base class above
       &#42;/
       .animate-if.ng-enter, .animate-if.ng-leave {
         -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
@@ -92,16 +92,16 @@ var ngIfDirective = ['$animate', function($animate) {
         $scope.$watch($attr.ngIf, function ngIfWatchAction(value) {
 
           if (toBoolean(value)) {
-
-            childScope = $scope.$new();
-            transclude(childScope, function (clone) {
-              block = {
-                startNode: clone[0],
-                endNode: clone[clone.length++] = document.createComment(' end ngIf: ' + $attr.ngIf + ' ')
-              };
-              $animate.enter(clone, $element.parent(), $element);
-            });
-
+            if (!childScope) {
+              childScope = $scope.$new();
+              transclude(childScope, function (clone) {
+                block = {
+                  startNode: clone[0],
+                  endNode: clone[clone.length++] = document.createComment(' end ngIf: ' + $attr.ngIf + ' ')
+                };
+                $animate.enter(clone, $element.parent(), $element);
+              });
+            }
           } else {
 
             if (childScope) {
diff --git a/test/ng/directive/ngIfSpec.js b/test/ng/directive/ngIfSpec.js
@@ -28,6 +28,22 @@ describe('ngIf', function () {
     expect(element.children().length).toBe(1);
   });
 
+  it('should not add the element twice if the condition goes from true to true', function () {
+    $scope.hello = 'true1';
+    makeIf('hello');
+    expect(element.children().length).toBe(1);
+    $scope.$apply('hello = "true2"');
+    expect(element.children().length).toBe(1);
+  });
+
+  it('should not recreate the element if the condition goes from true to true', function () {
+    $scope.hello = 'true1';
+    makeIf('hello');
+    element.children().data('flag', true);
+    $scope.$apply('hello = "true2"');
+    expect(element.children().data('flag')).toBe(true);
+  });
+
   it('should create then remove the element if condition changes', function () {
     $scope.hello = true;
     makeIf('hello');
