Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Commit

Permalink
fix(ngTransclude): clear the translusion point before transcluding
Browse files Browse the repository at this point in the history
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
  • Loading branch information
IgorMinar committed Aug 21, 2013
1 parent bf79bd4 commit eed299a
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 3 deletions.
5 changes: 4 additions & 1 deletion src/ng/directive/ngTransclude.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand Down Expand Up @@ -58,6 +60,7 @@ var ngTranscludeDirective = ngDirective({

link: function($scope, $element, $attrs, controller) {
controller.$transclude(function(clone) {
$element.html('');
$element.append(clone);
});
}
Expand Down
22 changes: 20 additions & 2 deletions test/ng/compileSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;')
});
});

Expand Down Expand Up @@ -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;')
});
});

Expand Down Expand Up @@ -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() {
Expand Down

8 comments on commit eed299a

@aptx4869
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh my god...this breaking change break all my directives that use ngTransclude in the template.

I don't get it, How could there be 'junk' in the translusion point if we don't put them in the template? Isn't that 'junk' element in the template mean to be there?

@fame
Copy link

@fame fame commented on eed299a Nov 19, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've a similar issue and looking for a work around.
@aptx4869, were you able to find any solution?

@frogomatic
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't found a work-around either. I also can't figure out why there would be "junk" in the transclusion point. If my template is "<div ng-transclude>foo</div>", what I want is for the transcluded content to be appended, not replaced. I do not see a good reason for this change.

I'm going to try my hand at an "ng-transclude-append" directive which follows the old semantics.

@fame
Copy link

@fame fame commented on eed299a Nov 21, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Igor, I've submitted a bug along with plunker examples #5060

Can you take a look. Thanks

@mbenford
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is kind of unfortunate. The old behavior seemed perfectly acceptable to me. As others have said already, it's hard to think of any situation where there would be leftover tags within the transclusion point.

There is a workaround, though, by manually transcluding the content:

link: function(scope, element, attrs, ctrl, transcludeFn) {          
  transcludeFn(function(clone) {
    element.append(clone);
  });
}

But doing that in every directive that uses transclusion isn't practical. So, inspired by @frogomatic message, I've created a ng-transclude-append directive that does what the old ng-transclude used to: https://gist.github.com/mbenford/7623472.

I've also created a Plunker script that shows it working: http://plnkr.co/edit/EjO8SpUT91PuXP0RMuJx.

At the end of the day, it would be really nice if ngTransclude had an option to append the transcluded content without clearing the target element.

@btford
Copy link
Contributor

@btford btford commented on eed299a Dec 11, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The append behavior will not work when we change the implementation to use Shadow DOM. See my comment here: #5060 (comment)

@mbenford
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the clarification, Brian. It makes sense now why you guys have changed the directive's behavior. But I think that the commit message lacks that explanation, though. It would have probably prevented this discussion from happening. ;)

@fame
Copy link

@fame fame commented on eed299a Dec 12, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you spoke my mind @mbenford

Please sign in to comment.