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

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

Browse Source 
Fixes #1057

Closes #1059
This commit is contained in:
Pawel Kozlowski 2015-03-23 20:13:02 +01:00
parent e706f3477b
commit edc3709451
2 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
modules/angular2/src/core/compiler/property_setter_factory.js vendored
View File

@ -32,7 +32,7 @@ export function setterFactory(property: string): Function {
if (DOM.hasProperty(receiver, property)) { if (DOM.hasProperty(receiver, property)) {
return propertySetterFn(receiver, value); return propertySetterFn(receiver, value);
} }
} };
StringMapWrapper.set(propertySettersCache, property, setterFn); StringMapWrapper.set(propertySettersCache, property, setterFn);
} }
} }
@ -78,13 +78,14 @@ var classSettersCache = StringMapWrapper.create();
function classSetterFactory(className:string): Function { function classSetterFactory(className:string): Function {
var setterFn = StringMapWrapper.get(classSettersCache, className); var setterFn = StringMapWrapper.get(classSettersCache, className);
var dashCasedClassName;
if (isBlank(setterFn)) { if (isBlank(setterFn)) {
dashCasedClassName = camelCaseToDashCase(className);
setterFn = function(element, value) { setterFn = function(element, value) {
if (value) { if (value) {
DOM.addClass(element, className); DOM.addClass(element, dashCasedClassName);
} else { } else {
DOM.removeClass(element, className); DOM.removeClass(element, dashCasedClassName);
} }
}; };
StringMapWrapper.set(classSettersCache, className, setterFn); StringMapWrapper.set(classSettersCache, className, setterFn);

22
modules/angular2/test/core/compiler/pipeline/element_binder_builder_spec.js vendored
View File

@ -349,6 +349,28 @@ export function main() {
expect(view.nodes[0].className).toEqual('foo ng-binding'); 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', () => { it('should bind style with a dot', () => {
var propertyBindings = MapWrapper.createFromStringMap({ var propertyBindings = MapWrapper.createFromStringMap({
'style.color': 'prop1', 'style.color': 'prop1',