fix(ngTransclude): clear the translusion point before transcluding

when the transluded content is being teleported to the translusion point, we should ensure that
the translusion point is empty before appending otherwise we end up with junk before the transcluded
content

2 files changed, 24 insertions, 3 deletions

diff --git a/src/ng/directive/ngTransclude.js b/src/ng/directive/ngTransclude.js
index 0b9b919d..71d0635a 100644
--- a/src/ng/directive/ngTransclude.js
+++ b/src/ng/directive/ngTransclude.js
@@ -5,7 +5,9 @@
  * @name ng.directive:ngTransclude
  *
  * @description
- * Insert the transcluded DOM here.
+ * Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.
+ *
+ * Any existing content of the element that this directive is placed on will be removed before the transcluded content is inserted.
  *
  * @element ANY
  *
@@ -58,6 +60,7 @@ var ngTranscludeDirective = ngDirective({
 
   link: function($scope, $element, $attrs, controller) {
     controller.$transclude(function(clone) {
+      $element.html('');
       $element.append(clone);
     });
   }
diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
index 7c24e1d9..844511a3 100755
--- a/test/ng/compileSpec.js
+++ b/test/ng/compileSpec.js
@@ -2450,7 +2450,7 @@ describe('$compile', function() {
         element = $compile('<div parent-directive><div child-directive></div>childContentText;</div>')($rootScope);
         $rootScope.$apply();
         expect(log).toEqual('parentController; childController');
-        expect(element.text()).toBe('parentTemplateText;childTemplateText;childContentText;')
+        expect(element.text()).toBe('childTemplateText;childContentText;')
       });
     });
 
@@ -2554,7 +2554,7 @@ describe('$compile', function() {
                             '</div>')($rootScope);
         $rootScope.$apply();
         expect(log).toEqual('parentController; childController; babyController');
-        expect(element.text()).toBe('parentTemplateText;childTemplateText;childContentText;babyTemplateText;')
+        expect(element.text()).toBe('childContentText;babyTemplateText;')
       });
     });
 
@@ -2825,6 +2825,24 @@ describe('$compile', function() {
     });
 
 
+    it('should clear contents of the ng-translude element before appending transcluded content',
+        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>unicorn!</div>')($rootScope);
+        $rootScope.$apply();
+        expect(sortedHtml(element.html())).toEqual('<div ng-transclude=""><span>unicorn!</span></div>');
+      });
+    });
+
+
     it('should make the result of a transclusion available to the parent directive in post-linking phase (template)',
         function() {
       module(function() {