fix($compile): remove comment nodes from templates before asserting single root node

The compiler will no longer throw if a directive template contains comment nodes in addition to a
single root node. If a template contains less than 2 nodes, the nodes are unaltered.

BREAKING CHANGE:

If a template contains directives within comment nodes, and there is more than a single node in the
template, those comment nodes are removed. The impact of this breaking change is expected to be
quite low.

Closes angular#9212
Closes angular#9215

Author: caitp

src/.jshintrc

@@ -11,6 +11,7 @@
     "jqLite": false,
     "jQuery": false,
     "slice": false,
+    "splice": false,
     "push": false,
     "toString": false,
     "ngMinErr": false,

src/Angular.js

@@ -6,6 +6,7 @@
   jqLite: true,
   jQuery: true,
   slice: true,
+  splice: true,
   push: true,
   toString: true,
   ngMinErr: true,
@@ -161,6 +162,7 @@ var /** holds major version number for IE or NaN for real browsers */
     jqLite,           // delay binding since jQuery could be loaded after us.
     jQuery,           // delay binding
     slice             = [].slice,
+    splice            = [].splice,
     push              = [].push,
     toString          = Object.prototype.toString,
     ngMinErr          = minErr('ng'),

src/ng/compile.js

@@ -1623,7 +1623,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
             if (jqLiteIsTextNode(directiveValue)) {
               $template = [];
             } else {
-              $template = jqLite(wrapTemplate(directive.templateNamespace, trim(directiveValue)));
+              $template = removeComments(wrapTemplate(directive.templateNamespace, trim(directiveValue)));
             }
             compileNode = $template[0];
 
@@ -2105,7 +2105,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
             if (jqLiteIsTextNode(content)) {
               $template = [];
             } else {
-              $template = jqLite(wrapTemplate(templateNamespace, trim(content)));
+              $template = removeComments(wrapTemplate(templateNamespace, trim(content)));
             }
             compileNode = $template[0];
 
@@ -2519,3 +2519,20 @@ function tokenDifference(str1, str2) {
   }
   return values;
 }
+
+function removeComments(jqNodes) {
+  jqNodes = jqLite(jqNodes);
+  var i = jqNodes.length;
+
+  if (i <= 1) {
+    return jqNodes;
+  }
+
+  while (i--) {
+    var node = jqNodes[i];
+    if (node.nodeType === 8) {
+      splice.call(jqNodes, i, 1);
+    }
+  }
+  return jqNodes;
+}

test/ng/compileSpec.js

@@ -1078,6 +1078,22 @@ describe('$compile', function() {
             });
           });
         }
+
+        it('should ignore comment nodes when replacing with a template', function() {
+          module(function() {
+            directive('replaceWithComments', valueFn({
+              replace: true,
+              template: '<!-- ignored comment --><p>Hello, world!</p><!-- ignored comment-->'
+            }));
+          });
+          inject(function($compile, $rootScope) {
+            expect(function() {
+              element = $compile('<div><div replace-with-comments></div></div>')($rootScope);
+            }).not.toThrow();
+            expect(element.find('p').length).toBe(1);
+            expect(element.find('p').text()).toBe('Hello, world!');
+          });
+        });
       });
 
 
@@ -1977,6 +1993,26 @@ describe('$compile', function() {
             });
           });
         }
+
+        it('should ignore comment nodes when replacing with a templateUrl', function() {
+          module(function() {
+            directive('replaceWithComments', valueFn({
+              replace: true,
+              templateUrl: 'templateWithComments.html'
+            }));
+          });
+          inject(function($compile, $rootScope, $httpBackend) {
+            $httpBackend.whenGET('templateWithComments.html').
+              respond('<!-- ignored comment --><p>Hello, world!</p><!-- ignored comment-->');
+            expect(function() {
+              element = $compile('<div><div replace-with-comments></div></div>')($rootScope);
+            }).not.toThrow();
+            $httpBackend.flush();
+            expect(element.find('p').length).toBe(1);
+            expect(element.find('p').text()).toBe('Hello, world!');
+          });
+        });
+
       });