feat($compile): support compiling text nodes by wrapping them in <span>

Author: mhevery

src/jqLite.js

@@ -627,6 +627,15 @@ forEach({
     }
   },
 
+  wrap: function(element, wrapNode) {
+    wrapNode = jqLite(wrapNode)[0];
+    var parent = element.parentNode;
+    if (parent) {
+      parent.replaceChild(wrapNode, element);
+    }
+    wrapNode.appendChild(element);
+  },
+
   remove: function(element) {
     JQLiteDealoc(element);
     var parent = element.parentNode;

src/service/compiler.js

@@ -180,6 +180,13 @@ function $CompileProvider($provide) {
 
     return function(templateElement) {
       templateElement = jqLite(templateElement);
+      // We can not compile top level text elements since text nodes can be merged and we will
+      // not be able to attach scope data to them, so we will wrap them in <span>
+      forEach(templateElement, function(node, index){
+        if (node.nodeType == 3 /* text node */) {
+          templateElement[index] = jqLite(node).wrap('<span>').parent()[0];
+        }
+      });
       var linkingFn = compileNodes(templateElement, templateElement);
       return function(scope, cloneConnectFn){
         assertArg(scope, 'scope');

test/jqLiteSpec.js

@@ -802,6 +802,26 @@ describe('jqLite', function() {
     });
   });
 
+
+  describe('wrap', function() {
+    it('should wrap text node', function() {
+      var root = jqLite('<div>A&lt;a&gt;B&lt;/a&gt;C</div>');
+      var text = root.contents();
+      expect(text.wrap("<span>")[0]).toBe(text[0]);
+      expect(root.find('span').text()).toEqual('A<a>B</a>C');
+    });
+    it('should wrap free text node', function() {
+      var root = jqLite('<div>A&lt;a&gt;B&lt;/a&gt;C</div>');
+      var text = root.contents();
+      text.remove();
+      expect(root.text()).toBe('');
+
+      text.wrap("<span>");
+      expect(text.parent().text()).toEqual('A<a>B</a>C');
+    });
+  });
+
+
   describe('prepend', function() {
     it('should prepend to empty', function() {
       var root = jqLite('<div>');

test/service/compilerSpec.js

@@ -96,6 +96,15 @@ describe('$compile', function() {
 
   describe('compile phase', function() {
 
+    it('should wrap root text nodes in spans', inject(function($compile, $rootScope) {
+      element = jqLite('<div>A&lt;a&gt;B&lt;/a&gt;C</div>');
+      var text = element.contents();
+      expect(text[0].nodeName).toEqual('#text');
+      text = $compile(text)($rootScope);
+      expect(lowercase(text[0].nodeName)).toEqual('span');
+      expect(element.find('span').text()).toEqual('A<a>B</a>C');
+    }));
+
     describe('multiple directives per element', function() {
       it('should allow multiple directives per element', inject(function($compile, $rootScope, log){
         element = $compile(