diff --git a/modules/angular2/src/render/dom/compiler/property_binding_parser.ts b/modules/angular2/src/render/dom/compiler/property_binding_parser.ts index 1304ce5d0f..ddca683404 100644 --- a/modules/angular2/src/render/dom/compiler/property_binding_parser.ts +++ b/modules/angular2/src/render/dom/compiler/property_binding_parser.ts @@ -1,4 +1,4 @@ -import {isPresent, RegExpWrapper} from 'angular2/src/facade/lang'; +import {isPresent, RegExpWrapper, StringWrapper} from 'angular2/src/facade/lang'; import {MapWrapper} from 'angular2/src/facade/collection'; import {Parser} from 'angular2/change_detection'; @@ -30,6 +30,9 @@ export class PropertyBindingParser implements CompileStep { var newAttrs = new Map(); MapWrapper.forEach(attrs, (attrValue, attrName) => { + + attrName = this._normalizeAttributeName(attrName); + var bindParts = RegExpWrapper.firstMatch(BIND_NAME_REGEXP, attrName); if (isPresent(bindParts)) { if (isPresent(bindParts[1])) { // match: bind-prop @@ -69,6 +72,11 @@ export class PropertyBindingParser implements CompileStep { MapWrapper.forEach(newAttrs, (attrValue, attrName) => { attrs.set(attrName, attrValue); }); } + _normalizeAttributeName(attrName: string): string { + return StringWrapper.startsWith(attrName, 'data-') ? StringWrapper.substring(attrName, 5) : + attrName; + } + _bindVariable(identifier, value, current: CompileElement, newAttrs: Map) { current.bindElement().bindVariable(dashCaseToCamelCase(identifier), value); newAttrs.set(identifier, value); diff --git a/modules/angular2/test/render/dom/compiler/property_binding_parser_spec.ts b/modules/angular2/test/render/dom/compiler/property_binding_parser_spec.ts index e052d6ada1..2e49fbd805 100644 --- a/modules/angular2/test/render/dom/compiler/property_binding_parser_spec.ts +++ b/modules/angular2/test/render/dom/compiler/property_binding_parser_spec.ts @@ -34,6 +34,11 @@ export function main() { expect(results[0].propertyBindings.get('a').source).toEqual('b'); }); + it('should detect [] syntax with data- prefix', () => { + var results = process(el('
')); + expect(results[0].propertyBindings.get('a').source).toEqual('b'); + }); + it('should detect [] syntax only if an attribute name starts and ends with []', () => { expect(process(el('
'))[0]).toBe(null); expect(process(el('
'))[0]).toBe(null); @@ -44,6 +49,11 @@ export function main() { expect(results[0].propertyBindings.get('a').source).toEqual('b'); }); + it('should detect bind- syntax with data- prefix', () => { + var results = process(el('
')); + expect(results[0].propertyBindings.get('a').source).toEqual('b'); + }); + it('should detect bind- syntax only if an attribute name starts with bind', () => { expect(process(el('
'))[0]).toEqual(null); }); @@ -52,6 +62,11 @@ export function main() { expect(results[0].propertyBindings.get('a').source).toEqual('{{b}}'); }); + it('should detect interpolation syntax with data- prefix', () => { + var results = process(el('
')); + expect(results[0].propertyBindings.get('a').source).toEqual('{{b}}'); + }); + it('should store property setters as camel case', () => { var element = el('
'); var results = process(element); @@ -63,6 +78,11 @@ export function main() { expect(results[0].variableBindings.get('b')).toEqual('a'); }); + it('should detect var- syntax with data- prefix', () => { + var results = process(el('')); + expect(results[0].variableBindings.get('b')).toEqual('a'); + }); + it('should store variable binding for a template element on the nestedProtoView', () => { var results = process(el('