fix(ngTransclude): ensure that fallback only appears and is compiled when needed

Author: petebacondarwin

src/ng/directive/ngTransclude.js

@@ -163,41 +163,54 @@ 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 = '';
-      }
+    compile: function ngTranscludeCompile(tElement, tAttrs) {
+      // Remove and cache any original content to act as a fallback
+      var fallbackContents = tElement.contents();
+      tElement.empty();
 
-      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);
+      return function ngTranscludePostLink($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 = '';
+        }
 
-          // 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();
+        function ngTranscludeCloneAttachFn(clone, transcludedScope) {
+          if (clone.length) {
+            $element.append(clone);
+          } else {
+            if (fallbackContents.length) {
+              // 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
+              $element.append(fallbackContents);
+              $compile(fallbackContents)($scope);
+            }
+            // 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 (!$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 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 (slotName && !$transclude.isSlotFilled(slotName)) {
+          // The slot was optional and no transclusion content was provided
+          // so we just compile and use the fallbackContents
+          $element.append(fallbackContents);
+          $compile(fallbackContents)($scope);
+        }
+      };
     }
   };
 }];