honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(compiler): detect and strip data- prefix from bindings 

Fixes #2687

Closes #2719
This commit is contained in:
Pawel Kozlowski 2015-06-23 19:07:09 +02:00
parent e69af1a3cd
commit cd65fc2a5e
2 changed files with 55 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
modules/angular2/src/render/dom/compiler/property_binding_parser.ts
View File

@ -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<any, any>) {
current.bindElement().bindVariable(dashCaseToCamelCase(identifier), value);
newAttrs.set(identifier, value);

46
modules/angular2/test/render/dom/compiler/property_binding_parser_spec.ts
View File

@ -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('<div data-[a]="b"></div>'));
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('<div z[a]="b"></div>'))[0]).toBe(null);
expect(process(el('<div [a]v="b"></div>'))[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('<div data-bind-a="b"></div>'));
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('<div _bind-a="b"></div>'))[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('<div data-a="{{b}}"></div>'));
expect(results[0].propertyBindings.get('a').source).toEqual('{{b}}');
});
it('should store property setters as camel case', () => {
var element = el('<div bind-some-prop="1">');
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('<template data-var-a="b"></template>'));
expect(results[0].variableBindings.get('b')).toEqual('a');
});
it('should store variable binding for a template element on the nestedProtoView', () => {
var results = process(el('<template var-george="washington"></p>'), true);
expect(results[0].variableBindings).toEqual(EMPTY_MAP);
@ -113,6 +133,13 @@ export function main() {
expect(eventBinding.fullName).toEqual('click[]');
});
it('should detect () syntax with data- prefix', () => {
var results = process(el('<div data-(click)="b()"></div>'));
var eventBinding = results[0].eventBindings[0];
expect(eventBinding.source.source).toEqual('b()');
expect(eventBinding.fullName).toEqual('click');
});
it('should detect () syntax only if an attribute name starts and ends with ()', () => {
expect(process(el('<div z(a)="b()"></div>'))[0]).toEqual(null);
expect(process(el('<div (a)v="b()"></div>'))[0]).toEqual(null);
@ -132,6 +159,13 @@ export function main() {
expect(eventBinding.fullName).toEqual('click');
});
it('should detect on- syntax with data- prefix', () => {
var results = process(el('<div data-on-click="b()"></div>'));
var eventBinding = results[0].eventBindings[0];
expect(eventBinding.source.source).toEqual('b()');
expect(eventBinding.fullName).toEqual('click');
});
it('should parse event handlers using on- syntax as actions', () => {
var results = process(el('<div on-click="foo=bar"></div>'));
var eventBinding = results[0].eventBindings[0];
@ -157,11 +191,23 @@ export function main() {
expect(results[0].eventBindings[0].source.source).toEqual('b=$event');
});
it('should detect [()] syntax with data- prefix', () => {
var results = process(el('<div data-[(a)]="b"></div>'));
expect(results[0].propertyBindings.get('a').source).toEqual('b');
expect(results[0].eventBindings[0].source.source).toEqual('b=$event');
});
it('should detect bindon- syntax', () => {
var results = process(el('<div bindon-a="b"></div>'));
expect(results[0].propertyBindings.get('a').source).toEqual('b');
expect(results[0].eventBindings[0].source.source).toEqual('b=$event');
});
it('should detect bindon- syntax with data- prefix', () => {
var results = process(el('<div data-bindon-a="b"></div>'));
expect(results[0].propertyBindings.get('a').source).toEqual('b');
expect(results[0].eventBindings[0].source.source).toEqual('b=$event');
});
});
}