revert: fix($compile): do not add <span> elements to root text nodes

petebacondarwin · petebacondarwin · commit fee7bac392db · 2016-03-17T09:56:30.000Z
This commit reverts 7617c08 which was accidentally merged into 1.5.x (by @petebacondarwin in a moment of rebase madness) despite it containing a breaking change.
diff --git a/src/ng/compile.js b/src/ng/compile.js
@@ -1529,6 +1529,19 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
         // modify it.
         $compileNodes = jqLite($compileNodes);
       }
+
+      var NOT_EMPTY = /\S+/;
+
+      // 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>
+      for (var i = 0, len = $compileNodes.length; i < len; i++) {
+        var domNode = $compileNodes[i];
+
+        if (domNode.nodeType === NODE_TYPE_TEXT && domNode.nodeValue.match(NOT_EMPTY) /* non-empty */) {
+          jqLiteWrapNode(domNode, $compileNodes[i] = document.createElement('span'));
+        }
+      }
+
       var compositeLinkFn =
               compileNodes($compileNodes, transcludeFn, $compileNodes,
                            maxPriority, ignoreDirective, previousCompileContext);
diff --git a/src/ng/directive/ngTransclude.js b/src/ng/directive/ngTransclude.js
@@ -47,7 +47,7 @@
  *     <div ng-controller="ExampleController">
  *       <input ng-model="title" aria-label="title"> <br/>
  *       <textarea ng-model="text" aria-label="text"></textarea> <br/>
- *       <pane title="{{title}}"><span>{{text}}</span></pane>
+ *       <pane title="{{title}}">{{text}}</pane>
  *     </div>
  *   </file>
  *   <file name="protractor.js" type="protractor">
diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
@@ -371,28 +371,27 @@ describe('$compile', function() {
       expect($document.scope()).toBe($rootScope);
     }));
 
+    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(text[0].nodeName).toEqual('SPAN');
+      expect(element.find('span').text()).toEqual('A<a>B</a>C');
+    }));
+
 
-    it('should not wrap root text nodes in spans', function() {
+    it('should not wrap root whitespace text nodes in spans', function() {
       element = jqLite(
-        '<div>   <div>A</div>\n  ' +
-        '<div>B</div>C\t\n  ' +
+        '<div>   <div>A</div>\n  ' + // The spaces and newlines here should not get wrapped
+        '<div>B</div>C\t\n  ' +  // The "C", tabs and spaces here will be wrapped
         '</div>');
       $compile(element.contents())($rootScope);
       var spans = element.find('span');
-      expect(spans.length).toEqual(0);
+      expect(spans.length).toEqual(1);
+      expect(spans.text().indexOf('C')).toEqual(0);
     });
 
-
-    it('should be able to compile text nodes at the root', inject(function($rootScope) {
-      element = jqLite('<div>Name: {{name}}<br />\nColor: {{color}}</div>');
-      $rootScope.name = 'Lucas';
-      $rootScope.color = 'blue';
-      $compile(element.contents())($rootScope);
-      $rootScope.$digest();
-      expect(element.text()).toEqual('Name: Lucas\nColor: blue');
-    }));
-
-
     it('should not leak memory when there are top level empty text nodes', function() {
       // We compile the contents of element (i.e. not element itself)
       // Then delete these contents and check the cache has been reset to zero
@@ -6595,8 +6594,8 @@ describe('$compile', function() {
           $rootScope.x = 'root';
           $rootScope.$apply();
           expect(element.text()).toEqual('W:iso-1-2;T:root-2-3;');
-          expect(jqLite(jqLite(element.find('li')[1]).contents()[0]).text()).toEqual('T:root-2-3');
-          expect(jqLite(element.find('span')[0]).text()).toEqual(';');
+          expect(jqLite(element.find('span')[0]).text()).toEqual('T:root-2-3');
+          expect(jqLite(element.find('span')[1]).text()).toEqual(';');
         });
       });
 
@@ -6634,37 +6633,6 @@ describe('$compile', function() {
       });
 
 
-      it('should not merge text elements from transcluded content', function() {
-        module(function() {
-          directive('foo', valueFn({
-            transclude: 'content',
-            template: '<div>This is before {{before}}. </div>',
-            link: function(scope, element, attr, ctrls, $transclude) {
-              var futureParent = element.children().eq(0);
-              $transclude(function(clone) {
-                futureParent.append(clone);
-              }, futureParent);
-            },
-            scope: true
-          }));
-        });
-        inject(function($rootScope, $compile) {
-          element = $compile('<div><div foo>This is after {{after}}</div></div>')($rootScope);
-          $rootScope.before = "BEFORE";
-          $rootScope.after = "AFTER";
-          $rootScope.$apply();
-          expect(element.text()).toEqual('This is before BEFORE. This is after AFTER');
-
-          $rootScope.before = "Not-Before";
-          $rootScope.after = "AfTeR";
-          $rootScope.$$childHead.before = "BeFoRe";
-          $rootScope.$$childHead.after = "Not-After";
-          $rootScope.$apply();
-          expect(element.text()).toEqual('This is before BeFoRe. This is after AfTeR');
-        });
-      });
-
-
       it('should only allow one content transclusion per element', function() {
         module(function() {
           directive('first', valueFn({
@@ -6963,11 +6931,11 @@ describe('$compile', function() {
               transclude: true,
               replace: true,
               scope: true,
-              template: '<div><span>I:{{$$transcluded}}</span><span ng-transclude></span></div>'
+              template: '<div><span>I:{{$$transcluded}}</span><div ng-transclude></div></div>'
             };
           });
         });
-        inject(function($rootScope, $compile) {
+        inject(function(log, $rootScope, $compile) {
           element = $compile('<div><div trans>T:{{$$transcluded}}</div></div>')($rootScope);
           $rootScope.$apply();
           expect(jqLite(element.find('span')[0]).text()).toEqual('I:');
@@ -6986,10 +6954,10 @@ describe('$compile', function() {
             };
           });
         });
-        inject(function($rootScope, $compile) {
+        inject(function(log, $rootScope, $compile) {
           element = $compile('<div trans>unicorn!</div>')($rootScope);
           $rootScope.$apply();
-          expect(sortedHtml(element.html())).toEqual('<div ng-transclude="">unicorn!</div>');
+          expect(sortedHtml(element.html())).toEqual('<div ng-transclude=""><span>unicorn!</span></div>');
         });
       });
 
