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

2 files changed, 16 insertions, 0 deletions

diff --git a/src/jqLite.js b/src/jqLite.js
index 48dfcc20..8d9ce09c 100644
--- a/src/jqLite.js
+++ b/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;
diff --git a/src/service/compiler.js b/src/service/compiler.js
index acfc7851..b73cc690 100644
--- a/src/service/compiler.js
+++ b/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');