diff --git a/modules/angular2/src/core/compiler/property_setter_factory.js b/modules/angular2/src/core/compiler/property_setter_factory.js index 3232603143..4240f2bd77 100644 --- a/modules/angular2/src/core/compiler/property_setter_factory.js +++ b/modules/angular2/src/core/compiler/property_setter_factory.js @@ -32,7 +32,7 @@ export function setterFactory(property: string): Function { if (DOM.hasProperty(receiver, property)) { return propertySetterFn(receiver, value); } - } + }; StringMapWrapper.set(propertySettersCache, property, setterFn); } } @@ -61,7 +61,7 @@ function attributeSetterFactory(attrName:string): Function { DOM.setAttribute(element, dashCasedAttributeName, stringify(value)); } else { if (isPresent(value)) { - throw new BaseException("Invalid " + dashCasedAttributeName + + throw new BaseException("Invalid " + dashCasedAttributeName + " attribute, only string values are allowed, got '" + stringify(value) + "'"); } DOM.removeAttribute(element, dashCasedAttributeName); @@ -78,13 +78,14 @@ var classSettersCache = StringMapWrapper.create(); function classSetterFactory(className:string): Function { var setterFn = StringMapWrapper.get(classSettersCache, className); - + var dashCasedClassName; if (isBlank(setterFn)) { + dashCasedClassName = camelCaseToDashCase(className); setterFn = function(element, value) { if (value) { - DOM.addClass(element, className); + DOM.addClass(element, dashCasedClassName); } else { - DOM.removeClass(element, className); + DOM.removeClass(element, dashCasedClassName); } }; StringMapWrapper.set(classSettersCache, className, setterFn); diff --git a/modules/angular2/test/core/compiler/pipeline/element_binder_builder_spec.js b/modules/angular2/test/core/compiler/pipeline/element_binder_builder_spec.js index dba449e5d5..62089aa5ca 100644 --- a/modules/angular2/test/core/compiler/pipeline/element_binder_builder_spec.js +++ b/modules/angular2/test/core/compiler/pipeline/element_binder_builder_spec.js @@ -349,6 +349,28 @@ export function main() { expect(view.nodes[0].className).toEqual('foo ng-binding'); }); + it('should properly bind to class containing "-" using the class. syntax', () => { + var propertyBindings = MapWrapper.createFromStringMap({ + 'class.foo-bar': 'prop1' + }); + var pipeline = createPipeline({propertyBindings: propertyBindings}); + var results = pipeline.process(el('')); + var pv = results[0].inheritedProtoView; + + expect(pv.elementBinders[0].hasElementPropertyBindings).toBe(true); + + instantiateView(pv); + + evalContext.prop1 = true; + changeDetector.detectChanges(); + expect(view.nodes[0].className).toEqual('foo ng-binding foo-bar'); + + evalContext.prop1 = false; + changeDetector.detectChanges(); + expect(view.nodes[0].className).toEqual('foo ng-binding'); + }); + + it('should bind style with a dot', () => { var propertyBindings = MapWrapper.createFromStringMap({ 'style.color': 'prop1',