feat(ngTransclude): don't overwrite the contents with an unfilled optional slot

Previously the contents of the `ngTransclude` element would always be emptied,
even if there was no transclusion to replace it.
Now, optional slots that have not been filled with content will not cause
the `ngTransclude` contents to be emptied.

Closes #13426

Author: petebacondarwin

src/ng/directive/ngTransclude.js

@@ -11,7 +11,9 @@
  * You can specify that you want to insert a named transclusion slot, instead of the default slot, by providing the slot name
  * as the value of the `ng-transclude` or `ng-transclude-slot` attribute.
  *
- * Any existing content of the element that this directive is placed on, will be removed before the transcluded content is inserted.
+ * For required slots and the default transclusion, existing content will be removed before the transcluded content is inserted.
+ *
+ * For optional slots, existing content is left in place, if the slot was not filled.
  *
  * @element ANY
  *
@@ -81,11 +83,13 @@
             restrict: 'E',
             transclude: {
               'paneTitle': '?title',
-              'paneBody': 'body'
+              'paneBody': 'body',
+              'paneFooter': '?footer'
             },
             template: '<div style="border: 1px solid black;">' +
                         '<div ng-transclude="title" style="background-color: gray"></div>' +
                         '<div ng-transclude="body"></div>' +
+                        '<div ng-transclude="footer" style="background-color: gray">Default Footer</div>' +
                       '</div>'
           };
       })
@@ -132,7 +136,12 @@ var ngTranscludeDirective = ngDirective({
        startingTag($element));
     }
 
-    $transclude(ngTranscludeCloneAttachFn, null, $attrs.ngTransclude || $attrs.ngTranscludeSlot);
+    // If there is no slot name defined or the slot name is not optional
+    // then transclude the slot
+    var slotName = $attrs.ngTransclude || $attrs.ngTranscludeSlot;
+    if (!slotName || $transclude.$slots[slotName] !== null) {
+      $transclude(ngTranscludeCloneAttachFn, null, slotName);
+    }
   }
 });
 

test/ng/compileSpec.js

@@ -8030,6 +8030,37 @@ describe('$compile', function() {
         expect(capturedTranscludeFn.$slots.bossSlot).toBe(null);
       });
     });
+
+    it('should not overwrite the contents of an `ng-transclude` element, if the matching optional slot is not filled', function() {
+      module(function() {
+        directive('minionComponent', function() {
+          return {
+            restrict: 'E',
+            scope: {},
+            transclude: {
+              minion: 'minionSlot',
+              boss: '?bossSlot'
+            },
+            template:
+              '<div class="boss" ng-transclude="bossSlot">default boss content</div>' +
+              '<div class="minion" ng-transclude="minionSlot">default minion content</div>' +
+              '<div class="other" ng-transclude>default content</div>'
+          };
+        });
+      });
+      inject(function($rootScope, $compile) {
+        element = $compile(
+          '<minion-component>' +
+            '<minion>stuart</minion>' +
+            '<span>dorothy</span>' +
+            '<minion>kevin</minion>' +
+          '</minion-component>')($rootScope);
+        $rootScope.$apply();
+        expect(element.children().eq(0).text()).toEqual('default boss content');
+        expect(element.children().eq(1).text()).toEqual('stuartkevin');
+        expect(element.children().eq(2).text()).toEqual('dorothy');
+      });
+    });
   });