fix(ngTransclude): correctly support fallback content

If the transclude function did not return content, then the transcluded
scope that was created needs to be cleaned up in order to avoid a slight
amount of unnecessary overhead since the additional scope is no longer
needed.

If the transcluded content did return content, the the fallback content
should never have been linked in the first place as it was intended to be
immediately removed.

Fixes angular#14768
Fixes angular#14765

Author: dcherman

src/ng/directive/ngTransclude.js

@@ -159,35 +159,45 @@
  * </example>
  */
 var ngTranscludeMinErr = minErr('ngTransclude');
-var ngTranscludeDirective = ngDirective({
-  restrict: 'EAC',
-  link: function($scope, $element, $attrs, controller, $transclude) {
+var ngTranscludeDirective = ['$compile', function($compile) {
+  return {
+    restrict: 'EAC',
+    terminal: true,
+    link: function($scope, $element, $attrs, controller, $transclude) {
+      if ($attrs.ngTransclude === $attrs.$attr.ngTransclude) {
+        // If the attribute is of the form: `ng-transclude="ng-transclude"`
+        // then treat it like the default
+        $attrs.ngTransclude = '';
+      }
 
-    if ($attrs.ngTransclude === $attrs.$attr.ngTransclude) {
-      // If the attribute is of the form: `ng-transclude="ng-transclude"`
-      // then treat it like the default
-      $attrs.ngTransclude = '';
-    }
+      function ngTranscludeCloneAttachFn(clone, transcludedScope) {
+        if (clone.length) {
+          $element.empty();
+          $element.append(clone);
+        } else {
+          // Since this is the fallback content rather than the transcluded content,
+          // we compile against the scope we were linked against rather than the transcluded
+          // scope since this is the directive's own content
+          $compile($element.contents())($scope);
 
-    function ngTranscludeCloneAttachFn(clone) {
-      if (clone.length) {
-        $element.empty();
-        $element.append(clone);
+          // There is nothing linked against the transcluded scope since no content was available,
+          // so it should be safe to clean up the generated scope.
+          transcludedScope.$destroy();
+        }
       }
-    }
 
-    if (!$transclude) {
-      throw ngTranscludeMinErr('orphan',
-       'Illegal use of ngTransclude directive in the template! ' +
-       'No parent directive that requires a transclusion found. ' +
-       'Element: {0}',
-       startingTag($element));
-    }
-
-    // If there is no slot name defined or the slot name is not optional
-    // then transclude the slot
-    var slotName = $attrs.ngTransclude || $attrs.ngTranscludeSlot;
-    $transclude(ngTranscludeCloneAttachFn, null, slotName);
-  }
-});
+      if (!$transclude) {
+        throw ngTranscludeMinErr('orphan',
+        'Illegal use of ngTransclude directive in the template! ' +
+        'No parent directive that requires a transclusion found. ' +
+        'Element: {0}',
+        startingTag($element));
+      }
 
+      // If there is no slot name defined or the slot name is not optional
+      // then transclude the slot
+      var slotName = $attrs.ngTransclude || $attrs.ngTranscludeSlot;
+      $transclude(ngTranscludeCloneAttachFn, null, slotName);
+    }
+  };
+}];

test/ng/compileSpec.js

@@ -7937,35 +7937,61 @@ describe('$compile', function() {
 
       it('should clear contents of the ng-translude element before appending transcluded content' +
         ' if transcluded content exists', function() {
+        var contentsDidLink = false;
+
         module(function() {
+          directive('inner', function() {
+            return {
+              restrict: 'E',
+              template: 'old stuff! ',
+              link: function() {
+                contentsDidLink = true;
+              }
+            };
+          });
+
           directive('trans', function() {
             return {
               transclude: true,
-              template: '<div ng-transclude>old stuff! </div>'
+              template: '<div ng-transclude><inner></inner></div>'
             };
           });
         });
         inject(function($rootScope, $compile) {
           element = $compile('<div trans>unicorn!</div>')($rootScope);
           $rootScope.$apply();
           expect(sortedHtml(element.html())).toEqual('<div ng-transclude="">unicorn!</div>');
+          expect(contentsDidLink).toBe(false);
         });
       });
 
       it('should NOT clear contents of the ng-translude element before appending transcluded content' +
         ' if transcluded content does NOT exist', function() {
+        var contentsDidLink = false;
+
         module(function() {
+          directive('inner', function() {
+            return {
+              restrict: 'E',
+              template: 'old stuff! ',
+              link: function() {
+                contentsDidLink = true;
+              }
+            };
+          });
+
           directive('trans', function() {
             return {
               transclude: true,
-              template: '<div ng-transclude>old stuff! </div>'
+              template: '<div ng-transclude><inner></inner></div>'
             };
           });
         });
         inject(function(log, $rootScope, $compile) {
           element = $compile('<div trans></div>')($rootScope);
           $rootScope.$apply();
-          expect(sortedHtml(element.html())).toEqual('<div ng-transclude="">old stuff! </div>');
+          expect(sortedHtml(element.html())).toEqual('<div ng-transclude=""><inner>old stuff! </inner></div>');
+          expect(contentsDidLink).toBe(true);
         });
       });