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

fix(ngTransclude): fix case where ngTransclude attribute value equals its key #13383

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/ng/directive/ngTransclude.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
*
* @element ANY
*
* @param {string} ngTransclude|ngTranscludeSlot the name of the slot to insert at this point. If this is not provided or empty then
* the default slot is used.
* @param {string} ngTransclude|ngTranscludeSlot the name of the slot to insert at this point. If this is not provided, is empty
* or its value is the same as the name of the attribute then the default slot is used.
*
* @example
* ### Default transclusion
Expand Down Expand Up @@ -113,6 +113,12 @@ var ngTranscludeDirective = ngDirective({
restrict: 'EAC',
link: function($scope, $element, $attrs, controller, $transclude) {

if ($attrs.ngTransclude === $attrs.$attr.ngTransclude) {
// If the attribute is of the form: `ng-transclude="ng-transclude"`
// then treat it like the default
$attrs.ngTransclude = '';
}

function ngTranscludeCloneAttachFn(clone) {
$element.empty();
$element.append(clone);
Expand Down
34 changes: 34 additions & 0 deletions test/ng/compileSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -7680,6 +7680,40 @@ describe('$compile', function() {
});
});

it('should use the default transclusion slot if the ng-transclude attribute has the same value as its key', function() {
module(function() {
directive('minionComponent', function() {
return {
restrict: 'E',
scope: {},
transclude: {},
template:
'<div class="a" ng-transclude="ng-transclude"></div>' +
'<div class="b" ng:transclude="ng:transclude"></div>' +
'<div class="c" data-ng-transclude="data-ng-transclude"></div>'
};
});
});
inject(function($rootScope, $compile) {
element = $compile(
'<minion-component>' +
'<span>stuart</span>' +
'<span>bob</span>' +
'<span>kevin</span>' +
'</minion-component>')($rootScope);
$rootScope.$apply();
var a = element.children().eq(0);
var b = element.children().eq(1);
var c = element.children().eq(2);
expect(a).toHaveClass('a');
expect(b).toHaveClass('b');
expect(c).toHaveClass('c');
expect(a.text()).toEqual('stuartbobkevin');
expect(b.text()).toEqual('stuartbobkevin');
expect(c.text()).toEqual('stuartbobkevin');
});
});

it('should transclude elements to an `ng-transclude` with a matching transclusion slot name', function() {
module(function() {
directive('minionComponent', function() {
Expand Down