Skip to content

Commit 60dad74

Browse files
fix($compile): swap keys and values for transclude definition object
Closes angular#13439 BREAKING CHANGE: The keys and values for the `transclude` map of the directive definition have been swapped around to be more consistent with the other maps, such as `scope` and `bindToController`. Now the key is the slot name and the value is an element selector.
1 parent 7a668cd commit 60dad74

File tree

2 files changed

+19
-11
lines changed

2 files changed

+19
-11
lines changed

src/ng/compile.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -480,11 +480,13 @@
480480
*
481481
* **Mult-slot transclusion** is declared by providing an object for the `transclude` property.
482482
*
483-
* This object is a map where the keys are the name of the slot to fill and the value is the element selector
484-
* used to match the HTML to the slot. Only element names are supported for matching. If the element selector
485-
* is prefixed with a `?` then that slot is optional.
483+
* This object is a map where the keys are the name of the slot to fill and the value is an element selector
484+
* used to match the HTML to the slot. The element selector can be in normalized camelCase form and will match
485+
* elements using any of the standard variants of the camelCase form.
486486
*
487-
* For example, the transclude object `{ slotA: '?my-custom-element' }` maps `<my-custom-element>` elements to
487+
* If the element selector is prefixed with a `?` then that slot is optional.
488+
*
489+
* For example, the transclude object `{ slotA: '?myCustomElement' }` maps `<my-custom-element>` elements to
488490
* the `slotA` slot, which can be accessed via the `$transclude` function or via the {@link ngTransclude} directive.
489491
*
490492
* Slots that are not marked as optional (`?`) will trigger a compile time error if there are no matching elements
@@ -1896,7 +1898,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
18961898
var optional = (elementSelector.charAt(0) === '?');
18971899
elementSelector = optional ? elementSelector.substring(1) : elementSelector;
18981900

1899-
slotMap[elementSelector] = slotName;
1901+
slotMap[directiveNormalize(elementSelector)] = slotName;
19001902

19011903
// We explicitly assign `null` since this implies that a slot was defined but not filled.
19021904
// Later when calling boundTransclusion functions with a slot name we only error if the
@@ -1910,7 +1912,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
19101912

19111913
// Add the matching elements into their slot
19121914
forEach($compileNode.contents(), function(node) {
1913-
var slotName = slotMap[nodeName_(node)];
1915+
var slotName = slotMap[directiveNormalize(nodeName_(node))];
19141916
if (slotName) {
19151917
filledSlots[slotName] = true;
19161918
slots[slotName] = slots[slotName] || [];

test/ng/compileSpec.js

+11-5
Original file line numberDiff line numberDiff line change
@@ -7941,27 +7941,33 @@ describe('$compile', function() {
79417941
});
79427942

79437943

7944-
it('should not normalize the element name', function() {
7944+
it('should match against both exact element name and the normalized form of the element name', function() {
79457945
module(function() {
79467946
directive('foo', function() {
79477947
return {
79487948
restrict: 'E',
79497949
scope: {},
79507950
transclude: {
7951-
fooBarSlot: 'foo-bar'
7951+
fooBarSlot: 'fooBar',
7952+
mooKarSlot: 'moo-kar'
79527953
},
79537954
template:
7954-
'<div class="other" ng-transclude="fooBarSlot"></div>'
7955+
'<div class="a" ng-transclude="fooBarSlot"></div>' +
7956+
'<div class="b" ng-transclude="mooKarSlot"></div>'
79557957
};
79567958
});
79577959
});
79587960
inject(function($rootScope, $compile) {
79597961
element = $compile(
79607962
'<foo>' +
7961-
'<foo-bar>baz</foo-bar>' +
7963+
'<foo-bar>bar1</foo-bar>' +
7964+
'<foo:bar>bar2</foo:bar>' +
7965+
'<moo-kar>baz1</moo-kar>' +
7966+
'<data-moo-kar>baz2</data-moo-kar>' +
79627967
'</foo>')($rootScope);
79637968
$rootScope.$apply();
7964-
expect(element.text()).toEqual('baz');
7969+
expect(element.children().eq(0).text()).toEqual('bar1bar2');
7970+
expect(element.children().eq(1).text()).toEqual('baz1baz2');
79657971
});
79667972
});
79677973

0 commit comments

Comments
 (0)