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

Commit 75c4cbf

Browse files
tboschtbosch
committed
refactor($compile): rename directive.type to directive.templateNamespace
Also corrects the tests for MathML that use `directive.templateNamespace`. BREAKING CHANGE (within 1.3.0-beta): `directive.type` was renamed to `directive.templateNamespace` The property name `type` was too general.
1 parent 642af96 commit 75c4cbf

File tree

2 files changed

+111
-95
lines changed

2 files changed

+111
-95
lines changed

‎src/ng/compile.js

+11-12
Original file line numberDiff line numberDiff line change
@@ -219,18 +219,17 @@
219219
* * `M` - Comment: `<!-- directive: my-directive exp -->`
220220
*
221221
*
222-
* #### `type`
223-
* String representing the document type used by the markup. This is useful for templates where the root
224-
* node is non-HTML content (such as SVG or MathML). The default value is "html".
222+
* #### `templateNamespace`
223+
* String representing the document type used by the markup in the template.
224+
* AngularJS needs this information as those elements need to be created and cloned
225+
* in a special way when they are defined outside their usual containers like `<svg>` and `<math>`.
225226
*
226-
* * `html` - All root template nodes are HTML, and don't need to be wrapped. Root nodes may also be
227+
* * `html` - All root nodes in the template are HTML. Root nodes may also be
227228
* top-level elements such as `<svg>` or `<math>`.
228-
* * `svg` - The template contains only SVG content, and must be wrapped in an `<svg>` node prior to
229-
* processing.
230-
* * `math` - The template contains only MathML content, and must be wrapped in an `<math>` node prior to
231-
* processing.
229+
* * `svg` - The root nodes in the template are SVG elements (excluding `<math>`).
230+
* * `math` - The root nodes in the template are MathML elements (excluding `<svg>`).
232231
*
233-
* If no `type` is specified, then the type is considered to be html.
232+
* If no `templateNamespace` is specified, then the namespace is considered to be `html`.
234233
*
235234
* #### `template`
236235
* HTML markup that may:
@@ -1339,7 +1338,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
13391338
if (jqLiteIsTextNode(directiveValue)) {
13401339
$template = [];
13411340
} else {
1342-
$template = jqLite(wrapTemplate(directive.type, trim(directiveValue)));
1341+
$template = jqLite(wrapTemplate(directive.templateNamespace, trim(directiveValue)));
13431342
}
13441343
compileNode = $template[0];
13451344

@@ -1786,7 +1785,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
17861785
templateUrl = (isFunction(origAsyncDirective.templateUrl))
17871786
? origAsyncDirective.templateUrl($compileNode, tAttrs)
17881787
: origAsyncDirective.templateUrl,
1789-
type = origAsyncDirective.type;
1788+
templateNamespace = origAsyncDirective.templateNamespace;
17901789

17911790
$compileNode.empty();
17921791

@@ -1800,7 +1799,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
18001799
if (jqLiteIsTextNode(content)) {
18011800
$template = [];
18021801
} else {
1803-
$template = jqLite(wrapTemplate(type, trim(content)));
1802+
$template = jqLite(wrapTemplate(templateNamespace, trim(content)));
18041803
}
18051804
compileNode = $template[0];
18061805

‎test/ng/compileSpec.js

+100-83
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,25 @@ function calcCacheSize() {
77
return size;
88
}
99

10-
1110
describe('$compile', function() {
11+
function isUnknownElement(el) {
12+
return !!el.toString().match(/Unknown/);
13+
}
14+
15+
function isSVGElement(el) {
16+
return !!el.toString().match(/SVG/);
17+
}
18+
19+
function isHTMLElement(el) {
20+
return !!el.toString().match(/HTML/);
21+
}
22+
23+
function supportsMathML() {
24+
var d = document.createElement('div');
25+
d.innerHTML = '<math></math>';
26+
return !isUnknownElement(d.firstChild);
27+
}
28+
1229
var element, directive, $compile, $rootScope;
1330

1431
beforeEach(module(provideLog, function($provide, $compileProvider){
@@ -838,58 +855,58 @@ describe('$compile', function() {
838855
expect(nodeName_(element)).toMatch(/optgroup/i);
839856
}));
840857

841-
if (window.SVGAElement) {
842-
it('should support SVG templates using directive.type=svg', function() {
858+
it('should support SVG templates using directive.templateNamespace=svg', function() {
859+
module(function() {
860+
directive('svgAnchor', valueFn({
861+
replace: true,
862+
template: '<a xlink:href="{{linkurl}}">{{text}}</a>',
863+
templateNamespace: 'SVG',
864+
scope: {
865+
linkurl: '@svgAnchor',
866+
text: '@?'
867+
}
868+
}));
869+
});
870+
inject(function($compile, $rootScope) {
871+
element = $compile('<svg><g svg-anchor="/foo/bar" text="foo/bar!"></g></svg>')($rootScope);
872+
var child = element.children().eq(0);
873+
$rootScope.$digest();
874+
expect(nodeName_(child)).toMatch(/a/i);
875+
expect(isSVGElement(child[0])).toBe(true);
876+
expect(child[0].href.baseVal).toBe("/foo/bar");
877+
});
878+
});
879+
880+
if (supportsMathML()) {
881+
// MathML is only natively supported in Firefox at the time of this test's writing,
882+
// and even there, the browser does not export MathML element constructors globally.
883+
it('should support MathML templates using directive.templateNamespace=math', function() {
843884
module(function() {
844-
directive('svgAnchor', valueFn({
885+
directive('pow', valueFn({
845886
replace: true,
846-
template: '<a xlink:href="{{linkurl}}">{{text}}</a>',
847-
type: 'SVG',
887+
transclude: true,
888+
template: '<msup><mn>{{pow}}</mn></msup>',
889+
templateNamespace: 'MATH',
848890
scope: {
849-
linkurl: '@svgAnchor',
850-
text: '@?'
891+
pow: '@pow',
892+
},
893+
link: function(scope, elm, attr, ctrl, transclude) {
894+
transclude(function(node) {
895+
elm.prepend(node[0]);
896+
});
851897
}
852898
}));
853899
});
854900
inject(function($compile, $rootScope) {
855-
element = $compile('<svg><g svg-anchor="/foo/bar" text="foo/bar!"></g></svg>')($rootScope);
856-
var child = element.children().eq(0);
901+
element = $compile('<math><mn pow="2"><mn>8</mn></mn></math>')($rootScope);
857902
$rootScope.$digest();
858-
expect(nodeName_(child)).toMatch(/a/i);
859-
expect(child[0].constructor).toBe(window.SVGAElement);
860-
expect(child[0].href.baseVal).toBe("/foo/bar");
903+
var child = element.children().eq(0);
904+
expect(nodeName_(child)).toMatch(/msup/i);
905+
expect(isUnknownElement(child[0])).toBe(false);
906+
expect(isHTMLElement(child[0])).toBe(false);
861907
});
862908
});
863909
}
864-
865-
// MathML is only natively supported in Firefox at the time of this test's writing,
866-
// and even there, the browser does not export MathML element constructors globally.
867-
// So the test is slightly limited in what it does. But as browsers begin to
868-
// implement MathML natively, this can be tightened up to be more meaningful.
869-
it('should support MathML templates using directive.type=math', function() {
870-
module(function() {
871-
directive('pow', valueFn({
872-
replace: true,
873-
transclude: true,
874-
template: '<msup><mn>{{pow}}</mn></msup>',
875-
type: 'MATH',
876-
scope: {
877-
pow: '@pow',
878-
},
879-
link: function(scope, elm, attr, ctrl, transclude) {
880-
transclude(function(node) {
881-
elm.prepend(node[0]);
882-
});
883-
}
884-
}));
885-
});
886-
inject(function($compile, $rootScope) {
887-
element = $compile('<math><mn pow="2"><mn>8</mn></mn></math>')($rootScope);
888-
$rootScope.$digest();
889-
var child = element.children().eq(0);
890-
expect(nodeName_(child)).toMatch(/msup/i);
891-
});
892-
});
893910
});
894911

895912

@@ -1735,60 +1752,60 @@ describe('$compile', function() {
17351752
expect(nodeName_(element)).toMatch(/optgroup/i);
17361753
}));
17371754

1738-
if (window.SVGAElement) {
1739-
it('should support SVG templates using directive.type=svg', function() {
1755+
it('should support SVG templates using directive.templateNamespace=svg', function() {
1756+
module(function() {
1757+
directive('svgAnchor', valueFn({
1758+
replace: true,
1759+
templateUrl: 'template.html',
1760+
templateNamespace: 'SVG',
1761+
scope: {
1762+
linkurl: '@svgAnchor',
1763+
text: '@?'
1764+
}
1765+
}));
1766+
});
1767+
inject(function($compile, $rootScope, $templateCache) {
1768+
$templateCache.put('template.html', '<a xlink:href="{{linkurl}}">{{text}}</a>');
1769+
element = $compile('<svg><g svg-anchor="/foo/bar" text="foo/bar!"></g></svg>')($rootScope);
1770+
$rootScope.$digest();
1771+
var child = element.children().eq(0);
1772+
expect(nodeName_(child)).toMatch(/a/i);
1773+
expect(isSVGElement(child[0])).toBe(true);
1774+
expect(child[0].href.baseVal).toBe("/foo/bar");
1775+
});
1776+
});
1777+
1778+
if (supportsMathML()) {
1779+
// MathML is only natively supported in Firefox at the time of this test's writing,
1780+
// and even there, the browser does not export MathML element constructors globally.
1781+
it('should support MathML templates using directive.templateNamespace=math', function() {
17401782
module(function() {
1741-
directive('svgAnchor', valueFn({
1783+
directive('pow', valueFn({
17421784
replace: true,
1785+
transclude: true,
17431786
templateUrl: 'template.html',
1744-
type: 'SVG',
1787+
templateNamespace: 'math',
17451788
scope: {
1746-
linkurl: '@svgAnchor',
1747-
text: '@?'
1789+
pow: '@pow',
1790+
},
1791+
link: function(scope, elm, attr, ctrl, transclude) {
1792+
transclude(function(node) {
1793+
elm.prepend(node[0]);
1794+
});
17481795
}
17491796
}));
17501797
});
17511798
inject(function($compile, $rootScope, $templateCache) {
1752-
$templateCache.put('template.html', '<a xlink:href="{{linkurl}}">{{text}}</a>');
1753-
element = $compile('<svg><g svg-anchor="/foo/bar" text="foo/bar!"></g></svg>')($rootScope);
1799+
$templateCache.put('template.html', '<msup><mn>{{pow}}</mn></msup>');
1800+
element = $compile('<math><mn pow="2"><mn>8</mn></mn></math>')($rootScope);
17541801
$rootScope.$digest();
17551802
var child = element.children().eq(0);
1756-
expect(nodeName_(child)).toMatch(/a/i);
1757-
expect(child[0].constructor).toBe(window.SVGAElement);
1758-
expect(child[0].href.baseVal).toBe("/foo/bar");
1803+
expect(nodeName_(child)).toMatch(/msup/i);
1804+
expect(isUnknownElement(child[0])).toBe(false);
1805+
expect(isHTMLElement(child[0])).toBe(false);
17591806
});
17601807
});
17611808
}
1762-
1763-
// MathML is only natively supported in Firefox at the time of this test's writing,
1764-
// and even there, the browser does not export MathML element constructors globally.
1765-
// So the test is slightly limited in what it does. But as browsers begin to
1766-
// implement MathML natively, this can be tightened up to be more meaningful.
1767-
it('should support MathML templates using directive.type=math', function() {
1768-
module(function() {
1769-
directive('pow', valueFn({
1770-
replace: true,
1771-
transclude: true,
1772-
templateUrl: 'template.html',
1773-
type: 'MATH',
1774-
scope: {
1775-
pow: '@pow',
1776-
},
1777-
link: function(scope, elm, attr, ctrl, transclude) {
1778-
transclude(function(node) {
1779-
elm.prepend(node[0]);
1780-
});
1781-
}
1782-
}));
1783-
});
1784-
inject(function($compile, $rootScope, $templateCache) {
1785-
$templateCache.put('template.html', '<msup><mn>{{pow}}</mn></msup>');
1786-
element = $compile('<math><mn pow="2"><mn>8</mn></mn></math>')($rootScope);
1787-
$rootScope.$digest();
1788-
var child = element.children().eq(0);
1789-
expect(nodeName_(child)).toMatch(/msup/i);
1790-
});
1791-
});
17921809
});
17931810

17941811

0 commit comments

Comments
 (0)