fix(DomRenderer): correctly handle namespaced attributes

Closes #6363
This commit is contained in:
Victor Berchet
2016-01-08 12:01:29 -08:00
parent f1f5b45361
commit 61cf499b0b
12 changed files with 109 additions and 12 deletions

View File

@ -16,7 +16,7 @@ import {HtmlAst, HtmlAttrAst, HtmlTextAst, HtmlElementAst} from './html_ast';
import {Injectable} from 'angular2/src/core/di';
import {HtmlToken, HtmlTokenType, tokenizeHtml} from './html_lexer';
import {ParseError, ParseLocation, ParseSourceSpan} from './parse_util';
import {HtmlTagDefinition, getHtmlTagDefinition, getNsPrefix} from './html_tags';
import {HtmlTagDefinition, getHtmlTagDefinition, getNsPrefix, mergeNsAndName} from './html_tags';
export class HtmlTreeError extends ParseError {
static create(elementName: string, location: ParseLocation, msg: string): HtmlTreeError {
@ -238,10 +238,6 @@ class TreeBuilder {
}
}
function mergeNsAndName(prefix: string, localName: string): string {
return isPresent(prefix) ? `@${prefix}:${localName}` : localName;
}
function getElementFullName(prefix: string, localName: string,
parentElement: HtmlElementAst): string {
if (isBlank(prefix)) {

View File

@ -420,3 +420,7 @@ export function splitNsName(elementName: string): string[] {
export function getNsPrefix(elementName: string): string {
return splitNsName(elementName)[0];
}
export function mergeNsAndName(prefix: string, localName: string): string {
return isPresent(prefix) ? `@${prefix}:${localName}` : localName;
}

View File

@ -7,11 +7,10 @@ import {Parser, AST, ASTWithSource} from 'angular2/src/core/change_detection/cha
import {TemplateBinding} from 'angular2/src/core/change_detection/parser/ast';
import {CompileDirectiveMetadata, CompilePipeMetadata} from './directive_metadata';
import {HtmlParser} from './html_parser';
import {splitNsName} from './html_tags';
import {splitNsName, mergeNsAndName} from './html_tags';
import {ParseSourceSpan, ParseError, ParseLocation} from './parse_util';
import {RecursiveAstVisitor, BindingPipe} from 'angular2/src/core/change_detection/parser/ast';
import {
ElementAst,
BoundElementPropertyAst,
@ -584,6 +583,12 @@ class TemplateParseVisitor implements HtmlAstVisitor {
} else {
if (parts[0] == ATTRIBUTE_PREFIX) {
boundPropertyName = parts[1];
let nsSeparatorIdx = boundPropertyName.indexOf(':');
if (nsSeparatorIdx > -1) {
let ns = boundPropertyName.substring(0, nsSeparatorIdx);
let name = boundPropertyName.substring(nsSeparatorIdx + 1);
boundPropertyName = mergeNsAndName(ns, name);
}
bindingType = PropertyBindingType.Attribute;
} else if (parts[0] == CLASS_PREFIX) {
boundPropertyName = parts[1];

View File

@ -365,9 +365,15 @@ class BrowserDomAdapter extends GenericBrowserDomAdapter {
bool hasAttribute(Element element, String attribute) =>
element.attributes.containsKey(attribute);
bool hasAttributeNS(Element element, String ns, String attribute) =>
element.getAttributeNS(ns, attribute) != null;
String getAttribute(Element element, String attribute) =>
element.getAttribute(attribute);
String getAttributeNS(Element element, String ns, String attribute) =>
element.getAttributeNS(ns, attribute);
void setAttribute(Element element, String name, String value) {
element.setAttribute(name, value);
}
@ -382,6 +388,10 @@ class BrowserDomAdapter extends GenericBrowserDomAdapter {
element.attributes.remove(name);
}
void removeAttributeNS(Element element, String ns, String name) {
element.getNamespacedAttributes(ns).remove(name);
}
Node templateAwareRoot(Element el) => el is TemplateElement ? el.content : el;
HtmlDocument createHtmlDocument() =>

View File

@ -225,12 +225,19 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
return res;
}
hasAttribute(element, attribute: string): boolean { return element.hasAttribute(attribute); }
hasAttributeNS(element, ns: string, attribute: string): boolean {
return element.hasAttributeNS(ns, attribute);
}
getAttribute(element, attribute: string): string { return element.getAttribute(attribute); }
getAttributeNS(element, ns: string, name: string): string {
return element.getAttributeNS(ns, name);
}
setAttribute(element, name: string, value: string) { element.setAttribute(name, value); }
setAttributeNS(element, ns: string, name: string, value: string) {
element.setAttributeNS(ns, name, value);
}
removeAttribute(element, attribute: string) { element.removeAttribute(attribute); }
removeAttributeNS(element, ns: string, name: string) { element.removeAttributeNS(ns, name); }
templateAwareRoot(el): any { return this.isTemplateElement(el) ? this.content(el) : el; }
createHtmlDocument(): HTMLDocument {
return document.implementation.createHTMLDocument('fakeTitle');

View File

@ -97,10 +97,13 @@ export abstract class DomAdapter {
abstract tagName(element): string;
abstract attributeMap(element): Map<string, string>;
abstract hasAttribute(element, attribute: string): boolean;
abstract hasAttributeNS(element, ns: string, attribute: string): boolean;
abstract getAttribute(element, attribute: string): string;
abstract getAttributeNS(element, ns: string, attribute: string): string;
abstract setAttribute(element, name: string, value: string);
abstract setAttributeNS(element, ns: string, name: string, value: string);
abstract removeAttribute(element, attribute: string);
abstract removeAttributeNS(element, ns: string, attribute: string);
abstract templateAwareRoot(el);
abstract createHtmlDocument(): HTMLDocument;
abstract defaultDoc(): HTMLDocument;

View File

@ -178,17 +178,21 @@ export class DomRenderer implements Renderer {
var attrNs;
var nsAndName = splitNamespace(attributeName);
if (isPresent(nsAndName[0])) {
attributeName = nsAndName[0] + ':' + nsAndName[1];
attributeName = nsAndName[1];
attrNs = NAMESPACE_URIS[nsAndName[0]];
}
if (isPresent(attributeValue)) {
if (isPresent(attrNs)) {
DOM.setAttributeNS(renderElement, attrNs, attributeName, attributeValue);
} else {
DOM.setAttribute(renderElement, nsAndName[1], attributeValue);
DOM.setAttribute(renderElement, attributeName, attributeValue);
}
} else {
DOM.removeAttribute(renderElement, attributeName);
if (isPresent(attrNs)) {
DOM.removeAttributeNS(renderElement, attrNs, attributeName);
} else {
DOM.removeAttribute(renderElement, attributeName);
}
}
}
@ -332,4 +336,4 @@ function splitNamespace(name: string): string[] {
}
let match = RegExpWrapper.firstMatch(NS_PREFIX_RE, name);
return [match[1], match[2]];
}
}

View File

@ -295,6 +295,10 @@ abstract class AbstractHtml5LibAdapter implements DomAdapter {
return element.attributes.keys.any((key) => '$key' == attribute);
}
hasAttributeNS(element, String ns, String attribute) {
throw 'not implemented';
}
getAttribute(element, String attribute) {
// `attributes` keys can be {@link AttributeName}s.
var key = element.attributes.keys.firstWhere((key) => '$key' == attribute,
@ -302,6 +306,10 @@ abstract class AbstractHtml5LibAdapter implements DomAdapter {
return element.attributes[key];
}
getAttributeNS(element, String ns, String attribute) {
throw 'not implemented';
}
setAttribute(element, String name, String value) {
element.attributes[name] = value;
}
@ -314,6 +322,10 @@ abstract class AbstractHtml5LibAdapter implements DomAdapter {
element.attributes.remove(attribute);
}
removeAttributeNS(element, String ns, String attribute) {
throw 'not implemented';
}
templateAwareRoot(el) => el;
createHtmlDocument() {

View File

@ -429,11 +429,13 @@ export class Parse5DomAdapter extends DomAdapter {
hasAttribute(element, attribute: string): boolean {
return element.attribs && element.attribs.hasOwnProperty(attribute);
}
hasAttributeNS(element, ns: string, attribute: string): boolean { throw 'not implemented'; }
getAttribute(element, attribute: string): string {
return element.attribs && element.attribs.hasOwnProperty(attribute) ?
element.attribs[attribute] :
null;
}
getAttributeNS(element, ns: string, attribute: string): string { throw 'not implemented'; }
setAttribute(element, attribute: string, value: string) {
if (attribute) {
element.attribs[attribute] = value;
@ -448,6 +450,7 @@ export class Parse5DomAdapter extends DomAdapter {
StringMapWrapper.delete(element.attribs, attribute);
}
}
removeAttributeNS(element, ns: string, name: string) { throw 'not implemented'; }
templateAwareRoot(el): any { return this.isTemplateElement(el) ? this.content(el) : el; }
createHtmlDocument(): Document {
var newDoc = treeAdapter.createDocument();