ngTransclude content by default

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.
+ * Existing content of the element that this directive is placed on will be removed before the transcluded content
+ * is inserted if transcluded content exists. In other case the content will be saved and used as content by default.
  *
  * @element ANY
  *
@@ -62,6 +63,40 @@
    </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>
+ *
  * ### Multi-slot transclusion
    <example name="multiSlotTranscludeExample" module="multiSlotTranscludeExample">
      <file name="index.html">
@@ -120,8 +155,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) {