fix(ngTransclude): don't replace existing content if no transcluded content exists

Closes #11839

Author: dmaslov

src/ng/directive/ngTransclude.js

@@ -11,7 +11,8 @@
  * 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.
+ * Any existing content of this element will be removed before the transcluded content is inserted,
+ * but only if the transcluded content is not empty.
  *
  * @element ANY
  *
@@ -62,6 +63,42 @@
    </example>
  *
  * @example
+ * ### Transclude default content
+ * This example shows how to use `NgTransclude` with default ng-transclude element content
+ *
+ * <example module="transcludeDefaultContentExample">
+   <file name="index.html">
+   <script>
+   angular.module('transcludeDefaultContentExample', [])
+   .directive('myButton', function(){
+               return {
+                 restrict: 'E',
+                 transclude: true,
+                 scope: true,
+                 template: '<button style="cursor: pointer;">' +
+                             '<ng-transclude>' +
+                               '<b style="color: red;">Button1</b>' +
+                             '</ng-transclude>' +
+                           '</button>'
+               };
+           });
+   </script>
+   <!-- default button content -->
+   <my-button id="default"></my-button>
+   <!-- modified button content -->
+   <my-button id="modified">
+     <i style="color: green;">Button2</i>
+   </my-button>
+   </file>
+   <file name="protractor.js" type="protractor">
+   it('should have different transclude element content', function() {
+            expect(element(by.id('default')).getText()).toBe('Button1');
+            expect(element(by.id('modified')).getText()).toBe('Button2');
+          });
+   </file>
+   </example>
+ *
+ * @example
  * ### Multi-slot transclusion
    <example name="multiSlotTranscludeExample" module="multiSlotTranscludeExample">
      <file name="index.html">
@@ -120,8 +157,10 @@ var ngTranscludeDirective = ngDirective({
     }
 
     function ngTranscludeCloneAttachFn(clone) {
-      $element.empty();
-      $element.append(clone);
+      if (clone.length) {
+        $element.empty();
+        $element.append(clone);
+      }
     }
 
     if (!$transclude) {

test/ng/compileSpec.js

@@ -6252,7 +6252,8 @@ describe('$compile', function() {
       });
 
 
-      it('should clear contents of the ng-translude element before appending transcluded content', function() {
+      it('should clear contents of the ng-translude element before appending transcluded content' +
+        ' if transcluded content exists', function() {
         module(function() {
           directive('trans', function() {
             return {
@@ -6268,6 +6269,23 @@ describe('$compile', function() {
         });
       });
 
+      it('should NOT clear contents of the ng-translude element before appending transcluded content' +
+        ' if transcluded content does NOT exist', function() {
+        module(function() {
+          directive('trans', function() {
+            return {
+              transclude: true,
+              template: '<div ng-transclude>old stuff! </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>');
+        });
+      });
+
 
       it('should throw on an ng-transclude element inside no transclusion directive', function() {
         inject(function($rootScope, $compile) {