fix(ngIf): ngIf removes elements dynamically added to it

src/.jshintrc

@@ -99,6 +99,7 @@
     "assertArgFn": false,
     "assertNotHasOwnProperty": false,
     "getter": false,
+    "getBlockElements": false,
 
     /* AngularPublic.js */
     "version": false,

src/Angular.js

@@ -79,7 +79,8 @@
     -assertArg,
     -assertArgFn,
     -assertNotHasOwnProperty,
-    -getter
+    -getter,
+    -getBlockElements
 
 */
 
@@ -1318,3 +1319,25 @@ function getter(obj, path, bindFnToScope) {
   }
   return obj;
 }
+
+/**
+ * Return the siblings between `startNode` and `endNode`, inclusive
+ * @param {Object} object with `startNode` and `endNode` properties
+ * @returns jQlite object containing the elements
+ */
+function getBlockElements(block) {
+  if (block.startNode === block.endNode) {
+    return jqLite(block.startNode);
+  }
+
+  var element = block.startNode;
+  var elements = [element];
+
+  do {
+    element = element.nextSibling;
+    if (!element) break;
+    elements.push(element);
+  } while (element !== block.endNode);
+
+  return jqLite(elements);
+}

src/ng/compile.js

@@ -1173,9 +1173,10 @@ function $CompileProvider($provide) {
         }
 
         if (directiveValue = directive.transclude) {
-          // Special case ngRepeat so that we don't complain about duplicate transclusion, ngRepeat
-          // knows how to handle this on its own.
-          if (directiveName !== 'ngRepeat') {
+          // Special case ngIf and ngRepeat so that we don't complain about duplicate transclusion.
+          // This option should only be used by directives that know how to how to safely handle element transclusion,
+          // where the transcluded nodes are added or replaced after linking.
+          if (!directive.$$tlb) {
             assertNoDuplicate('transclusion', transcludeDirective, directive, $compileNode);
             transcludeDirective = directive;
           }

src/ng/directive/ngIf.js

@@ -84,22 +84,24 @@ var ngIfDirective = ['$animate', function($animate) {
     priority: 600,
     terminal: true,
     restrict: 'A',
+    $$tlb: true,
     compile: function (element, attr, transclude) {
       return function ($scope, $element, $attr) {
-        var childElement, childScope;
+        var block = {}, childScope;
         $scope.$watch($attr.ngIf, function ngIfWatchAction(value) {
-          if (childElement) {
-            $animate.leave(childElement);
-            childElement = undefined;
+          if (block.startNode) {
+            $animate.leave(getBlockElements(block));
+            block = {};
           }
-          if (childScope) {
-            childScope.$destroy();
-            childScope = undefined;
+          if (block.startNode) {
+            getBlockElements(block).$destroy();
+            block = {};
           }
           if (toBoolean(value)) {
             childScope = $scope.$new();
             transclude(childScope, function (clone) {
-              childElement = clone;
+              block.startNode = clone[0];
+              block.endNode = clone[clone.length++] = document.createComment(' end ngIf: ' + $attr.ngIf + ' ');
               $animate.enter(clone, $element.parent(), $element);
             });
           }

src/ng/directive/ngRepeat.js

@@ -214,6 +214,7 @@ var ngRepeatDirective = ['$parse', '$animate', function($parse, $animate) {
     transclude: 'element',
     priority: 1000,
     terminal: true,
+    $$tlb: true,
     compile: function(element, attr, linker) {
       return function($scope, $element, $attr){
         var expression = $attr.ngRepeat;
@@ -393,22 +394,5 @@ var ngRepeatDirective = ['$parse', '$animate', function($parse, $animate) {
       };
     }
   };
-
-  function getBlockElements(block) {
-    if (block.startNode === block.endNode) {
-      return jqLite(block.startNode);
-    }
-
-    var element = block.startNode;
-    var elements = [element];
-
-    do {
-      element = element.nextSibling;
-      if (!element) break;
-      elements.push(element);
-    } while (element !== block.endNode);
-
-    return jqLite(elements);
-  }
 }];
 

test/ng/directive/ngIfSpec.js

@@ -60,6 +60,43 @@ describe('ngIf', function () {
     expect(element.children().length).toBe(9);
   });
 
+  it('should play nice with ngInclude on the same element', inject(function($templateCache) {
+    $templateCache.put('test.html', [200, '{{value}}', {}]);
+
+    $scope.value = 'first';
+    element.append($compile(
+      '<div ng-if="value==\'first\'" ng-include="\'test.html\'"></div>'
+    )($scope));
+    $scope.$apply();
+    expect(element.text()).toBe('first');
+
+    $scope.value = 'later';
+    $scope.$apply();
+    expect(element.text()).toBe('');
+  }));
+
+  it('should work with multiple elements', function() {
+    $scope.show = true;
+    $scope.things = [1, 2, 3];
+    element.append($compile(
+      '<div>before;</div>' +
+        '<div ng-if-start="show">start;</div>' +
+        '<div ng-repeat="thing in things">{{thing}};</div>' +
+        '<div ng-if-end>end;</div>' +
+        '<div>after;</div>'
+    )($scope));
+    $scope.$apply();
+    expect(element.text()).toBe('before;start;1;2;3;end;after;');
+
+    $scope.things.push(4);
+    $scope.$apply();
+    expect(element.text()).toBe('before;start;1;2;3;4;end;after;');
+
+    $scope.show = false;
+    $scope.$apply();
+    expect(element.text()).toBe('before;after;');
+  });
+
   it('should restore the element to its compiled state', function() {
     $scope.value = true;
     makeIf('value');