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

feat($compile): support DOM nodes as template values #5508

Closed
wants to merge 1 commit into from
Closed

feat($compile): support DOM nodes as template values #5508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
22 changes: 17 additions & 5 deletions src/ng/compile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1234,14 +1234,22 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
directiveValue = (isFunction(directive.template))
? directive.template($compileNode, templateAttrs)
: directive.template;
var elementTemplate = isElement(directiveValue);

directiveValue = denormalizeTemplate(directiveValue);
if (!elementTemplate) {
Copy link
Contributor

Choose a reason for hiding this comment

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

this means that DOM templates won't be denormalized. that's not good.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think the individual nodes would end up denormalized later on though, no? Actually, I guess not.

Copy link
Contributor

Choose a reason for hiding this comment

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

denormalization is about taking all {{ }} bindings and turning them into whatever the the interpolation start and stop symbols are.

Copy link
Contributor

Choose a reason for hiding this comment

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

this needs to happen so that reusable components can be built with the usual {{ }} bindings but then in the actual app we use whatever symbols the developer configured.

directiveValue = denormalizeTemplate(directiveValue);
}

if (directive.replace) {
replaceDirective = directive;
$template = jqLite('<div>' +
trim(directiveValue) +
'</div>').contents();
if (elementTemplate) {
$template = jqLite(directiveValue).clone();
} else {
$template = jqLite('<div>' +
trim(directiveValue) +
'</div>').contents();
}

compileNode = $template[0];

if ($template.length != 1 || compileNode.nodeType !== 1) {
Expand Down Expand Up @@ -1270,7 +1278,11 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {

ii = directives.length;
} else {
$compileNode.html(directiveValue);
if (elementTemplate) {
$compileNode.html('').append(jqLite(directiveValue).clone());
} else {
$compileNode.html(directiveValue);
}
}
}

Expand Down
41 changes: 41 additions & 0 deletions test/ng/compileSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -512,6 +512,14 @@ describe('$compile', function() {
expect(element).toBe(attr.$$element);
}
}));

directive('svgCircle', valueFn({
replace: true,
template: jqLite('<svg><circle></circle></svg>').children()
}));
directive('domNodeTemplate', valueFn({
template: jqLite('<p>Hello!</p><p>world!</p>')
}));
}));


Expand Down Expand Up @@ -675,6 +683,17 @@ describe('$compile', function() {
}).not.toThrow();
});
});


it('should accept DOM nodes as a template', inject(function($compile, $rootScope) {
if (!(msie < 9)) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Only testing this on browsers which are not IE8, due to IE8 apparently not supporting SVG nodes... but I don't actually know if it would really fail on ie8

element = $compile('<svg><g svg-circle></g></svg>')($rootScope);
expect(element.find('g').length).toBe(0);
expect(element.find('circle').length).toBe(1);
}
element = $compile('<div dom-node-template></div>')($rootScope);
expect(element.find('p').length).toBe(2);
}));
});


Expand All @@ -693,6 +712,17 @@ describe('$compile', function() {
expect($attrs.id).toBe('templateContent');
}
}));
directive('svgCircle', valueFn({
replace: true,
template: function() {
return jqLite('<svg><circle></circle></svg>').children();
}
}));
directive('domNodeTemplate', valueFn({
template: function() {
return jqLite('<p>Hello!</p><p>world!</p>');
}
}));
}));


Expand All @@ -701,6 +731,17 @@ describe('$compile', function() {
element = $compile('<div my-directive="some value">original content<div>')($rootScope);
expect(element.text()).toEqual('template content');
}));


it('should accept DOM nodes as a template', inject(function($compile, $rootScope) {
if (!(msie < 9)) {
element = $compile('<svg><g svg-circle></g></svg>')($rootScope);
expect(element.find('g').length).toBe(0);
expect(element.find('circle').length).toBe(1);
}
element = $compile('<div dom-node-template></div>')($rootScope);
expect(element.find('p').length).toBe(2);
}));
});


Expand Down