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

Fixes angular#2687

Closes angular#2719

Author: pkozlowski-opensource

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

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('<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');
+    });
   });
 }