fix(compiler): properly bind to properties that don't have matching attr name
Fixes #619 Closes #783
This commit is contained in:
@ -1,5 +1,5 @@
|
||||
import {int, isPresent, isBlank, Type, BaseException, StringWrapper, RegExpWrapper, isString, stringify} from 'angular2/src/facade/lang';
|
||||
import {Element, DOM} from 'angular2/src/facade/dom';
|
||||
import {Element, DOM, attrToPropMap} from 'angular2/src/facade/dom';
|
||||
import {ListWrapper, List, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
|
||||
|
||||
import {reflector} from 'angular2/src/reflection/reflection';
|
||||
@ -91,11 +91,19 @@ function roleSetter(element:Element, value) {
|
||||
}
|
||||
}
|
||||
|
||||
// special mapping for cases where attribute name doesn't match property name
|
||||
var attrToProp = StringMapWrapper.merge({
|
||||
"inner-html": "innerHTML",
|
||||
"readonly": "readOnly",
|
||||
"tabindex": "tabIndex",
|
||||
}, attrToPropMap);
|
||||
|
||||
// tells if an attribute is handled by the ElementBinderBuilder step
|
||||
export function isSpecialProperty(propName:string) {
|
||||
return StringWrapper.startsWith(propName, ARIA_PREFIX)
|
||||
|| StringWrapper.startsWith(propName, CLASS_PREFIX)
|
||||
|| StringWrapper.startsWith(propName, STYLE_PREFIX);
|
||||
return StringWrapper.startsWith(propName, ARIA_PREFIX)
|
||||
|| StringWrapper.startsWith(propName, CLASS_PREFIX)
|
||||
|| StringWrapper.startsWith(propName, STYLE_PREFIX)
|
||||
|| StringMapWrapper.contains(attrToProp, propName);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -176,10 +184,14 @@ export class ElementBinderBuilder extends CompileStep {
|
||||
setterFn = classSetterFactory(StringWrapper.substring(property, CLASS_PREFIX.length));
|
||||
} else if (StringWrapper.startsWith(property, STYLE_PREFIX)) {
|
||||
styleParts = StringWrapper.split(property, DOT_REGEXP);
|
||||
styleSuffix = styleParts.length > 2 ? ListWrapper.get(styleParts, 2) : '';
|
||||
styleSuffix = styleParts.length > 2 ? ListWrapper.get(styleParts, 2) : '';
|
||||
setterFn = styleSetterFactory(ListWrapper.get(styleParts, 1), styleSuffix);
|
||||
} else if (DOM.hasProperty(compileElement.element, property)) {
|
||||
setterFn = reflector.setter(property);
|
||||
} else {
|
||||
property = this._resolvePropertyName(property);
|
||||
//TODO(pk): special casing innerHtml, see: https://github.com/angular/angular/issues/789
|
||||
if (DOM.hasProperty(compileElement.element, property) || StringWrapper.equals(property, 'innerHtml')) {
|
||||
setterFn = reflector.setter(property);
|
||||
}
|
||||
}
|
||||
|
||||
if (isPresent(setterFn)) {
|
||||
@ -236,4 +248,9 @@ export class ElementBinderBuilder extends CompileStep {
|
||||
var parts = StringWrapper.split(bindConfig, RegExpWrapper.create("\\|"));
|
||||
return ListWrapper.map(parts, (s) => s.trim());
|
||||
}
|
||||
|
||||
_resolvePropertyName(attrName:string) {
|
||||
var mappedPropName = StringMapWrapper.get(attrToProp, attrName);
|
||||
return isPresent(mappedPropName) ? mappedPropName : attrName;
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user