fix(ngTransclude): use fallback content if only whitespace is provided

If the transcluded content is only whitespace then we should use the
fallback content instead. This allows more flexibility in formatting
your HTML.

Closes #15077
Closes #15140

BREAKING CHANGE:

Previously whitespace only transclusion would be treated as the transclusion
being "not empty", which meant that fallback content was not used in that
case.

Now if you only provide whitespace as the transclusion content, it will be
assumed to be empty and the fallback content will be used instead.

If you really do want whitespace then you can force it to be used by adding
a comment to the whitespace.

Author: petebacondarwin

src/ng/directive/ngTransclude.js

@@ -13,8 +13,8 @@
  *
  * If the transcluded content is not empty (i.e. contains one or more DOM nodes, including whitespace text nodes), any existing
  * content of this element will be removed before the transcluded content is inserted.
- * If the transcluded content is empty, the existing content is left intact. This lets you provide fallback content in the case
- * that no transcluded content is provided.
+ * If the transcluded content is empty (or only whitespace), the existing content is left intact. This lets you provide fallback
+ * content in the case that no transcluded content is provided.
  *
  * @element ANY
  *
@@ -195,7 +195,7 @@ var ngTranscludeDirective = ['$compile', function($compile) {
         }
 
         function ngTranscludeCloneAttachFn(clone, transcludedScope) {
-          if (clone.length) {
+          if (clone.length && notWhitespace(clone)) {
             $element.append(clone);
           } else {
             useFallbackContent();
@@ -212,6 +212,15 @@ var ngTranscludeDirective = ['$compile', function($compile) {
             $element.append(clone);
           });
         }
+
+        function notWhitespace(nodes) {
+          for (var i = 0, ii = nodes.length; i < ii; i++) {
+            var node = nodes[i];
+            if (node.nodeType !== NODE_TYPE_TEXT || node.nodeValue.trim()) {
+              return true;
+            }
+          }
+        }
       };
     }
   };

test/ng/compileSpec.js

@@ -8728,6 +8728,60 @@ describe('$compile', function() {
             });
           });
 
+          it('should compile and link the fallback content if only whitespace transcluded content is provided', function() {
+            var linkSpy = jasmine.createSpy('postlink');
+
+            module(function() {
+              directive('inner', function() {
+                return {
+                  restrict: 'E',
+                  template: 'old stuff! ',
+                  link: linkSpy
+                };
+              });
+
+              directive('trans', function() {
+                return {
+                  transclude: true,
+                  template: '<div ng-transclude><inner></inner></div>'
+                };
+              });
+            });
+            inject(function(log, $rootScope, $compile) {
+              element = $compile('<div trans>\n  \n</div>')($rootScope);
+              $rootScope.$apply();
+              expect(sortedHtml(element.html())).toEqual('<div ng-transclude=""><inner>old stuff! </inner></div>');
+              expect(linkSpy).toHaveBeenCalled();
+            });
+          });
+
+          it('should not link the fallback content if only whitespace and comments are provided as transclude content', function() {
+            var linkSpy = jasmine.createSpy('postlink');
+
+            module(function() {
+              directive('inner', function() {
+                return {
+                  restrict: 'E',
+                  template: 'old stuff! ',
+                  link: linkSpy
+                };
+              });
+
+              directive('trans', function() {
+                return {
+                  transclude: true,
+                  template: '<div ng-transclude><inner></inner></div>'
+                };
+              });
+            });
+            inject(function(log, $rootScope, $compile) {
+              element = $compile('<div trans>\n<!-- some comment -->  \n</div>')($rootScope);
+              $rootScope.$apply();
+              expect(sortedHtml(element.html())).toEqual('<div ng-transclude="">\n<!-- some comment -->  \n</div>');
+              expect(linkSpy).not.toHaveBeenCalled();
+            });
+          });
+
           it('should compile and link the fallback content if an optional transclusion slot is not provided', function() {
             var linkSpy = jasmine.createSpy('postlink');