Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
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
12 changes: 7 additions & 5 deletions src/ng/compile.js
Original file line number Diff line number Diff line change
Expand Up @@ -480,11 +480,13 @@
*
* **Mult-slot transclusion** is declared by providing an object for the `transclude` property.
*
* This object is a map where the keys are the name of the slot to fill and the value is the element selector
* used to match the HTML to the slot. Only element names are supported for matching. If the element selector
* is prefixed with a `?` then that slot is optional.
* This object is a map where the keys are the name of the slot to fill and the value is an element selector
* used to match the HTML to the slot. The element selector can be in normalized camelCase form and will match
Copy link
Contributor

Choose a reason for hiding this comment

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

We could link to the directive guide/normalization here

* elements using any of the standard variants of the camelCase form.
*
* For example, the transclude object `{ slotA: '?my-custom-element' }` maps `<my-custom-element>` elements to
* If the element selector is prefixed with a `?` then that slot is optional.
*
* For example, the transclude object `{ slotA: '?myCustomElement' }` maps `<my-custom-element>` elements to
* the `slotA` slot, which can be accessed via the `$transclude` function or via the {@link ngTransclude} directive.
*
* Slots that are not marked as optional (`?`) will trigger a compile time error if there are no matching elements
Expand Down Expand Up @@ -1910,7 +1912,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {

// Add the matching elements into their slot
forEach($compileNode.contents(), function(node) {
var slotName = slotMap[nodeName_(node)];
var slotName = slotMap[directiveNormalize(nodeName_(node))];
if (slotName) {
filledSlots[slotName] = true;
slots[slotName] = slots[slotName] || [];
Expand Down
6 changes: 3 additions & 3 deletions src/ng/directive/ngTransclude.js
Original file line number Diff line number Diff line change
Expand Up @@ -126,9 +126,9 @@
* return {
* restrict: 'E',
* transclude: {
* 'title': '?pane-title',
* 'body': 'pane-body',
* 'footer': '?pane-footer'
* 'title': '?paneTitle',
* 'body': 'paneBody',
* 'footer': '?paneFooter'
* },
* template: '<div style="border: 1px solid black;">' +
* '<div class="title" ng-transclude="title">Fallback Title</div>' +
Expand Down
16 changes: 11 additions & 5 deletions test/ng/compileSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -7941,27 +7941,33 @@ describe('$compile', function() {
});


it('should not normalize the element name', function() {
it('should match the normalized form of the element name', function() {
module(function() {
directive('foo', function() {
return {
restrict: 'E',
scope: {},
transclude: {
fooBarSlot: 'foo-bar'
fooBarSlot: 'fooBar',
mooKarSlot: 'mooKar'
},
template:
'<div class="other" ng-transclude="fooBarSlot"></div>'
'<div class="a" ng-transclude="fooBarSlot"></div>' +
'<div class="b" ng-transclude="mooKarSlot"></div>'
};
});
});
inject(function($rootScope, $compile) {
element = $compile(
'<foo>' +
'<foo-bar>baz</foo-bar>' +
'<foo-bar>bar1</foo-bar>' +
'<foo:bar>bar2</foo:bar>' +
'<moo-kar>baz1</moo-kar>' +
'<data-moo-kar>baz2</data-moo-kar>' +
'</foo>')($rootScope);
$rootScope.$apply();
expect(element.text()).toEqual('baz');
expect(element.children().eq(0).text()).toEqual('bar1bar2');
expect(element.children().eq(1).text()).toEqual('baz1baz2');
});
});

Expand Down