mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 07:40:22 +00:00
fix(svg): normalize class access for SVG
This commit is contained in:
parent
317adb36a4
commit
48096048cf
2 changed files with 31 additions and 10 deletions
|
|
@ -247,7 +247,7 @@ function $CompileProvider($provide) {
|
|||
var element = cloneConnectFn
|
||||
? JQLitePrototype.clone.call(templateElement) // IMPORTANT!!!
|
||||
: templateElement;
|
||||
element.data('$scope', scope).addClass('ng-scope');
|
||||
safeAddClass(element.data('$scope', scope), 'ng-scope');
|
||||
if (cloneConnectFn) cloneConnectFn(element, scope);
|
||||
if (linkingFn) linkingFn(scope, element, element);
|
||||
return element;
|
||||
|
|
@ -258,6 +258,15 @@ function $CompileProvider($provide) {
|
|||
throw Error("Unsupported '" + mode + "' for '" + localName + "'.");
|
||||
}
|
||||
|
||||
function safeAddClass(element, className) {
|
||||
try {
|
||||
element.addClass(className);
|
||||
} catch(e) {
|
||||
// ignore, since it means that we are trying to set class on
|
||||
// SVG element, where class name is read-only.
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Compile function matches each node in nodeList against the directives. Once all directives
|
||||
* for a particular node are collected their compile functions are executed. The compile
|
||||
|
|
@ -387,12 +396,14 @@ function $CompileProvider($provide) {
|
|||
|
||||
// use class as directive
|
||||
className = node.className;
|
||||
while (match = CLASS_DIRECTIVE_REGEXP.exec(className)) {
|
||||
nName = directiveNormalize(match[2]);
|
||||
if (addDirective(directives, nName, 'C', maxPriority)) {
|
||||
attrs[nName] = trim(match[3]);
|
||||
if (isString(className)) {
|
||||
while (match = CLASS_DIRECTIVE_REGEXP.exec(className)) {
|
||||
nName = directiveNormalize(match[2]);
|
||||
if (addDirective(directives, nName, 'C', maxPriority)) {
|
||||
attrs[nName] = trim(match[3]);
|
||||
}
|
||||
className = className.substr(match.index + match[0].length);
|
||||
}
|
||||
className = className.substr(match.index + match[0].length);
|
||||
}
|
||||
break;
|
||||
case 3: /* Text Node */
|
||||
|
|
@ -459,10 +470,10 @@ function $CompileProvider($provide) {
|
|||
if (directiveValue = directive.scope) {
|
||||
assertNoDuplicate('isolated scope', newIsolatedScopeDirective, directive, element);
|
||||
if (isObject(directiveValue)) {
|
||||
element.addClass('ng-isolate-scope');
|
||||
safeAddClass(element, 'ng-isolate-scope');
|
||||
newIsolatedScopeDirective = directive;
|
||||
}
|
||||
element.addClass('ng-scope');
|
||||
safeAddClass(element, 'ng-scope');
|
||||
newScopeDirective = newScopeDirective || directive;
|
||||
}
|
||||
|
||||
|
|
@ -725,7 +736,7 @@ function $CompileProvider($provide) {
|
|||
// copy the new attributes on the old attrs object
|
||||
forEach(src, function(value, key) {
|
||||
if (key == 'class') {
|
||||
element.addClass(value);
|
||||
safeAddClass(element, value);
|
||||
} else if (key == 'style') {
|
||||
element.attr('style', element.attr('style') + ';' + value);
|
||||
} else if (key.charAt(0) != '$' && !dst.hasOwnProperty(key)) {
|
||||
|
|
@ -837,7 +848,7 @@ function $CompileProvider($provide) {
|
|||
var parent = node.parent(),
|
||||
bindings = parent.data('$binding') || [];
|
||||
bindings.push(interpolateFn);
|
||||
parent.data('$binding', bindings).addClass('ng-binding');
|
||||
safeAddClass(parent.data('$binding', bindings), 'ng-binding');
|
||||
scope.$watch(interpolateFn, function(value) {
|
||||
node[0].nodeValue = value;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -138,6 +138,16 @@ describe('$compile', function() {
|
|||
}));
|
||||
|
||||
|
||||
it('should ignore not set CSS classes on SVG elements', inject(function($compile, $rootScope, log) {
|
||||
if (!window.SVGElement) return;
|
||||
// According to spec SVG element className property is readonly, but only FF
|
||||
// implements it this way which causes compile exceptions.
|
||||
element = $compile('<svg><text>{{1}}</text></svg>')($rootScope);
|
||||
$rootScope.$digest();
|
||||
expect(element.text()).toEqual('1');
|
||||
}));
|
||||
|
||||
|
||||
it('should allow directives in comments', inject(
|
||||
function($compile, $rootScope, log) {
|
||||
element = $compile('<div>0<!-- directive: log angular -->1</div>')($rootScope);
|
||||
|
|
|
|||
Loading…
Reference in a new issue