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

feat(NgStyle): add new NgStyle directive

Browse Source 
Closes #2665
This commit is contained in:
Pawel Kozlowski 2015-06-21 14:18:28 +02:00
parent dd7910347a
commit b50edfd1f3
2 changed files with 164 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
modules/angular2/src/directives/ng_style.ts Normal file
View File

@ -0,0 +1,38 @@
import {Directive, onCheck} from 'angular2/annotations';
import {ElementRef} from 'angular2/core';
import {Pipe} from 'angular2/src/change_detection/pipes/pipe';
import {PipeRegistry} from 'angular2/src/change_detection/pipes/pipe_registry';
import {KeyValueChanges} from 'angular2/src/change_detection/pipes/keyvalue_changes';
import {isPresent, print} from 'angular2/src/facade/lang';
import {Renderer} from 'angular2/src/render/api';
@Directive({selector: '[ng-style]', lifecycle: [onCheck], properties: ['rawStyle: ng-style']})
export class NgStyle {
_pipe: Pipe;
_rawStyle;
constructor(private _pipeRegistry: PipeRegistry, private _ngEl: ElementRef,
private _renderer: Renderer) {}
set rawStyle(v) {
this._rawStyle = v;
this._pipe = this._pipeRegistry.get('keyValDiff', this._rawStyle);
}
onCheck() {
var diff = this._pipe.transform(this._rawStyle);
if (isPresent(diff) && isPresent(diff.wrapped)) {
this._applyChanges(diff.wrapped);
}
}
private _applyChanges(diff: KeyValueChanges): void {
diff.forEachAddedItem((record) => { this._setStyle(record.key, record.currentValue); });
diff.forEachChangedItem((record) => { this._setStyle(record.key, record.currentValue); });
diff.forEachRemovedItem((record) => { this._setStyle(record.key, null); });
}
private _setStyle(name: string, val: string): void {
this._renderer.setElementStyle(this._ngEl, name, val);
}
}

126
modules/angular2/test/directives/ng_style_spec.ts Normal file
View File

@ -0,0 +1,126 @@
import {
AsyncTestCompleter,
beforeEach,
beforeEachBindings,
ddescribe,
xdescribe,
describe,
el,
expect,
iit,
inject,
it,
xit,
} from 'angular2/test_lib';
import {StringMapWrapper} from 'angular2/src/facade/collection';
import {Component, View} from 'angular2/angular2';
import {TestBed} from 'angular2/src/test_lib/test_bed';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {NgStyle} from 'angular2/src/directives/ng_style';
export function main() {
describe('binding to CSS styles', () => {
it('should add styles specified in an object literal',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = `<div [ng-style]="{'text-align': 'right'}"></div>`;
tb.createView(TestComponent, {html: template})
.then((view) => {
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('right');
async.done();
});
}));
it('should add and change styles specified in an object expression',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = `<div [ng-style]="expr"></div>`;
tb.createView(TestComponent, {html: template})
.then((view) => {
var expr: Map<string, any>;
view.context.expr = {'text-align': 'right'};
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('right');
expr = view.context.expr;
expr['text-align'] = 'left';
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('left');
async.done();
});
}));
it('should remove styles when deleting a key in an object expression',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = `<div [ng-style]="expr"></div>`;
tb.createView(TestComponent, {html: template})
.then((view) => {
view.context.expr = {'text-align': 'right'};
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('right');
StringMapWrapper.delete(view.context.expr, 'text-align');
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('');
async.done();
});
}));
it('should co-operate with the style attribute',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = `<div style="font-size: 12px" [ng-style]="expr"></div>`;
tb.createView(TestComponent, {html: template})
.then((view) => {
view.context.expr = {'text-align': 'right'};
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('right');
expect(DOM.getStyle(view.rootNodes[0], 'font-size')).toEqual('12px');
StringMapWrapper.delete(view.context.expr, 'text-align');
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('');
expect(DOM.getStyle(view.rootNodes[0], 'font-size')).toEqual('12px');
async.done();
});
}));
it('should co-operate with the style.[styleName]="expr" special-case in the compiler',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
var template = `<div [style.font-size.px]="12" [ng-style]="expr"></div>`;
tb.createView(TestComponent, {html: template})
.then((view) => {
view.context.expr = {'text-align': 'right'};
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('right');
expect(DOM.getStyle(view.rootNodes[0], 'font-size')).toEqual('12px');
StringMapWrapper.delete(view.context.expr, 'text-align');
expect(DOM.getStyle(view.rootNodes[0], 'font-size')).toEqual('12px');
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('');
async.done();
});
}));
})
}
@Component({selector: 'test-cmp'})
@View({directives: [NgStyle]})
class TestComponent {
expr;
}