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

fix(NgClass): take initial classes into account during cleanup 

Closes #3557
This commit is contained in:
Pawel Kozlowski 2015-08-10 12:25:46 +02:00
parent a7a1851c0f
commit ed25a29cc8
2 changed files with 177 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
modules/angular2/src/directives/ng_class.ts
View File

@ -33,16 +33,24 @@ import {ListWrapper, StringMapWrapper, isListLikeIterable} from 'angular2/src/fa
@Directive({
selector: '[ng-class]',
lifecycle: [LifecycleEvent.onCheck, LifecycleEvent.onDestroy],
properties: ['rawClass: ng-class']
properties: ['rawClass: ng-class', 'initialClasses: class']
})
export class NgClass {
private _differ: any;
private _mode: string;
_rawClass;
private _initialClasses = [];
private _rawClass;
constructor(private _iterableDiffers: IterableDiffers, private _keyValueDiffers: KeyValueDiffers,
private _ngEl: ElementRef, private _renderer: Renderer) {}
set initialClasses(v) {
this._applyInitialClasses(true);
this._initialClasses = isPresent(v) && isString(v) ? v.split(' ') : [];
this._applyInitialClasses(false);
this._applyClasses(this._rawClass, false);
}
set rawClass(v) {
this._cleanupClasses(this._rawClass);
@ -59,6 +67,8 @@ export class NgClass {
this._differ = this._keyValueDiffers.find(v).create(null);
this._mode = 'keyValue';
}
} else {
this._differ = null;
}
}
@ -78,15 +88,8 @@ export class NgClass {
onDestroy(): void { this._cleanupClasses(this._rawClass); }
private _cleanupClasses(rawClassVal): void {
if (isPresent(rawClassVal)) {
if (isListLikeIterable(rawClassVal)) {
ListWrapper.forEach(rawClassVal, (className) => { this._toggleClass(className, false); });
} else {
StringMapWrapper.forEach(rawClassVal, (expVal, className) => {
if (expVal) this._toggleClass(className, false);
});
}
}
this._applyClasses(rawClassVal, true);
this._applyInitialClasses(false);
}
private _applyKeyValueChanges(changes: any): void {
@ -104,6 +107,23 @@ export class NgClass {
changes.forEachRemovedItem((record) => { this._toggleClass(record.item, false); });
}
private _applyInitialClasses(isCleanup: boolean) {
ListWrapper.forEach(this._initialClasses,
(className) => { this._toggleClass(className, !isCleanup); });
}
private _applyClasses(rawClassVal, isCleanup: boolean) {
if (isPresent(rawClassVal)) {
if (isListLikeIterable(rawClassVal)) {
ListWrapper.forEach(rawClassVal, (className) => this._toggleClass(className, !isCleanup));
} else {
StringMapWrapper.forEach(rawClassVal, (expVal, className) => {
if (expVal) this._toggleClass(className, !isCleanup);
});
}
}
}
private _toggleClass(className: string, enabled): void {
this._renderer.setElementClass(this._ngEl, className, enabled);
}

190
modules/angular2/test/directives/ng_class_spec.ts
View File

@ -127,6 +127,25 @@ export function main() {
rootTC.componentInstance.objExpr = {baz: true};
detectChangesAndCheck(rootTC, 'ng-binding baz');
async.done();
});
}));
it('should remove active classes when expression evaluates to null',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="objExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
detectChangesAndCheck(rootTC, 'ng-binding foo');
rootTC.componentInstance.objExpr = null;
detectChangesAndCheck(rootTC, 'ng-binding');
rootTC.componentInstance.objExpr = {'foo': false, 'bar': true};
detectChangesAndCheck(rootTC, 'ng-binding bar');
async.done();
});
}));
@ -181,6 +200,22 @@ export function main() {
rootTC.componentInstance.arrExpr = ['bar'];
detectChangesAndCheck(rootTC, 'ng-binding bar');
async.done();
});
}));
it('should take initial classes into account when a reference changes',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div class="foo" [ng-class]="arrExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
detectChangesAndCheck(rootTC, 'foo ng-binding');
rootTC.componentInstance.arrExpr = ['bar'];
detectChangesAndCheck(rootTC, 'ng-binding foo bar');
async.done();
});
}));
@ -220,7 +255,6 @@ export function main() {
});
}));
it('should remove active classes when switching from string to null',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-class]="strExpr"></div>`;
@ -236,65 +270,133 @@ export function main() {
async.done();
});
}));
it('should take initial classes into account when switching from string to null',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div class="foo" [ng-class]="strExpr"></div>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
detectChangesAndCheck(rootTC, 'foo ng-binding');
rootTC.componentInstance.strExpr = null;
detectChangesAndCheck(rootTC, 'ng-binding foo');
async.done();
});
}));
});
it('should remove active classes when expression evaluates to null',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="objExpr"></div>';
describe('cooperation with other class-changing constructs', () => {
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
detectChangesAndCheck(rootTC, 'ng-binding foo');
it('should co-operate with the class attribute',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="objExpr" class="init foo"></div>';
rootTC.componentInstance.objExpr = null;
detectChangesAndCheck(rootTC, 'ng-binding');
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(rootTC, 'init foo ng-binding bar');
rootTC.componentInstance.objExpr = {'foo': false, 'bar': true};
detectChangesAndCheck(rootTC, 'ng-binding bar');
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false);
detectChangesAndCheck(rootTC, 'init ng-binding bar');
async.done();
});
}));
rootTC.componentInstance.objExpr = null;
detectChangesAndCheck(rootTC, 'init ng-binding foo');
it('should co-operate with the class attribute',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="objExpr" class="init foo"></div>';
async.done();
});
}));
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(rootTC, 'init foo ng-binding bar');
it('should co-operate with the interpolated class attribute',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-class]="objExpr" class="{{'init foo'}}"></div>`;
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false);
detectChangesAndCheck(rootTC, 'init ng-binding bar');
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(rootTC, `{{'init foo'}} ng-binding init foo bar`);
async.done();
});
}));
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false);
detectChangesAndCheck(rootTC, `{{'init foo'}} ng-binding init bar`);
it('should co-operate with the class attribute and class.name binding',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div class="init foo" [ng-class]="objExpr" [class.baz]="condition"></div>';
rootTC.componentInstance.objExpr = null;
detectChangesAndCheck(rootTC, `{{'init foo'}} ng-binding init foo`);
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
detectChangesAndCheck(rootTC, 'init foo ng-binding baz');
async.done();
});
}));
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(rootTC, 'init foo ng-binding baz bar');
it('should co-operate with the class attribute and binding to it',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-class]="objExpr" class="init" [class]="'foo'"></div>`;
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false);
detectChangesAndCheck(rootTC, 'init ng-binding baz bar');
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(rootTC, `init ng-binding foo bar`);
rootTC.componentInstance.condition = false;
detectChangesAndCheck(rootTC, 'init ng-binding bar');
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false);
detectChangesAndCheck(rootTC, `init ng-binding bar`);
async.done();
});
}));
rootTC.componentInstance.objExpr = null;
detectChangesAndCheck(rootTC, `init ng-binding foo`);
async.done();
});
}));
it('should co-operate with the class attribute and class.name binding',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template =
'<div class="init foo" [ng-class]="objExpr" [class.baz]="condition"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
detectChangesAndCheck(rootTC, 'init foo ng-binding baz');
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(rootTC, 'init foo ng-binding baz bar');
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false);
detectChangesAndCheck(rootTC, 'init ng-binding baz bar');
rootTC.componentInstance.condition = false;
detectChangesAndCheck(rootTC, 'init ng-binding bar');
async.done();
});
}));
it('should co-operate with initial class and class attribute binding when binding changes',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div class="init" [ng-class]="objExpr" [class]="strExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
detectChangesAndCheck(rootTC, 'init ng-binding foo');
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(rootTC, 'init ng-binding foo bar');
rootTC.componentInstance.strExpr = 'baz';
detectChangesAndCheck(rootTC, 'init ng-binding bar baz foo');
rootTC.componentInstance.objExpr = null;
detectChangesAndCheck(rootTC, 'init ng-binding baz');
async.done();
});
}));
});
})
}