fix(ElementBinderBuilder): properly bind CSS classes with "-" in their names
Fixes #1057 Closes #1059
This commit is contained in:
parent
e706f3477b
commit
edc3709451
|
@ -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);
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue