fix(ElementBinderBuilder): properly bind CSS classes with "-" in their names

pkozlowski-opensource · pkozlowski-opensource · commit edc3709451c7 · 2015-03-26T19:25:31.000+01:00
Fixes angular#1057 Closes angular#1059
diff --git 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
@@ -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('<input class="foo" viewroot prop-binding>'));
+      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',
