cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(CSSClass): change selector to ng-class

Browse Source 
BREAKING CHANGE:

The selector for the CSSClass directive was changed
from [class] to [ng-class]. The directive itself was
renamed from CSSClass to NgClass

Closes #3498
This commit is contained in:
Pawel Kozlowski
2015-08-06 10:38:40 +02:00
parent 748c2d6c97
commit ff1b110ae1
5 changed files with 24 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
modules/angular2/directives.ts
View File

@ -10,7 +10,7 @@ import {NgIf} from './src/directives/ng_if';
import {NgNonBindable} from './src/directives/ng_non_bindable';
import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from './src/directives/ng_switch';
export * from './src/directives/class';
export * from './src/directives/ng_class';
export * from './src/directives/ng_for';
export * from './src/directives/ng_if';
export * from './src/directives/ng_non_bindable';

2
modules/angular2/docs/core/01_templates.md
View File

@ -94,7 +94,7 @@ Example:
<pre>
```
<div [class]="stringify(selected)">
<div [title]="stringify(selected)">
```
</pre>
</td>

8
modules/angular2/src/directives/class.ts → modules/angular2/src/directives/ng_class.ts
View File

@ -25,17 +25,17 @@ import {ListWrapper, StringMapWrapper, isListLikeIterable} from 'angular2/src/fa
* # Example:
*
* ```
* <div class="message" [class]="{error: errorCount > 0}">
* <div class="message" [ng-class]="{error: errorCount > 0}">
* Please check errors.
* </div>
* ```
*/
@Directive({
selector: '[class]',
selector: '[ng-class]',
lifecycle: [LifecycleEvent.onCheck, LifecycleEvent.onDestroy],
properties: ['rawClass: class']
properties: ['rawClass: ng-class']
})
export class CSSClass {
export class NgClass {
private _differ: any;
private _mode: string;
_rawClass;

2
modules/angular2/src/render/dom/compiler/compile_element.ts
View File

@ -19,7 +19,7 @@ export class CompileElement {
// inherited down to children if they don't have an own elementBinder
inheritedElementBinder: ElementBinderBuilder = null;
compileChildren: boolean = true;
elementDescription: string; // e.g. '<div [class]="foo">' : used to provide context in case of
elementDescription: string; // e.g. '<div [title]="foo">' : used to provide context in case of
// error
constructor(public element, compilationUnit: string = '') {

51
modules/angular2/test/directives/class_spec.ts → modules/angular2/test/directives/ng_class_spec.ts
View File

@ -15,8 +15,7 @@ import {
} from 'angular2/test_lib';
import {List, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
import {Component, View, NgFor, bind} from 'angular2/angular2';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {CSSClass} from 'angular2/src/directives/class';
import {NgClass} from 'angular2/src/directives/ng_class';
import {APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_pool';
export function main() {
@ -27,7 +26,7 @@ export function main() {
it('should clean up when the directive is destroyed',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div *ng-for="var item of items" [class]="item"></div>';
var template = '<div *ng-for="var item of items" [ng-class]="item"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
@ -48,7 +47,7 @@ export function main() {
it('should add classes specified in an object literal',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="{foo: true, bar: false}"></div>';
var template = '<div [ng-class]="{foo: true, bar: false}"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
@ -64,7 +63,7 @@ export function main() {
it('should add classes specified in an object literal without change in class names',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [class]="{'foo-bar': true, 'fooBar': true}"></div>`;
var template = `<div [ng-class]="{'foo-bar': true, 'fooBar': true}"></div>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
@ -79,7 +78,7 @@ export function main() {
it('should add and remove classes based on changes in object literal values',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="{foo: condition, bar: !condition}"></div>';
var template = '<div [ng-class]="{foo: condition, bar: !condition}"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
@ -99,7 +98,7 @@ export function main() {
it('should add and remove classes based on changes to the expression object',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="objExpr"></div>';
var template = '<div [ng-class]="objExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
@ -129,7 +128,7 @@ export function main() {
it('should add and remove classes based on reference changes to the expression object',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="objExpr"></div>';
var template = '<div [ng-class]="objExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
@ -157,7 +156,7 @@ export function main() {
it('should add classes specified in a list literal',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [class]="['foo', 'bar', 'foo-bar', 'fooBar']"></div>`;
var template = `<div [ng-class]="['foo', 'bar', 'foo-bar', 'fooBar']"></div>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
@ -172,7 +171,7 @@ export function main() {
it('should add and remove classes based on changes to the expression',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="arrExpr"></div>';
var template = '<div [ng-class]="arrExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
@ -205,7 +204,7 @@ export function main() {
it('should add and remove classes when a reference changes',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="arrExpr"></div>';
var template = '<div [ng-class]="arrExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
@ -228,7 +227,7 @@ export function main() {
it('should add classes specified in a string literal',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [class]="'foo bar foo-bar fooBar'"></div>`;
var template = `<div [ng-class]="'foo bar foo-bar fooBar'"></div>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
@ -243,7 +242,7 @@ export function main() {
it('should add and remove classes based on changes to the expression',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="strExpr"></div>';
var template = '<div [ng-class]="strExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
@ -269,7 +268,7 @@ export function main() {
it('should remove active classes when switching from string to null',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [class]="strExpr"></div>`;
var template = `<div [ng-class]="strExpr"></div>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
@ -290,7 +289,7 @@ export function main() {
it('should remove active classes when expression evaluates to null',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="objExpr"></div>';
var template = '<div [ng-class]="objExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
@ -313,25 +312,9 @@ export function main() {
});
}));
it('should have no effect when activated by a static class attribute',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div class="init foo"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.detectChanges();
// TODO(pk): in CJS className isn't initialized properly if we don't mutate classes
expect(ListWrapper.join(DOM.classList(rootTC.componentViewChildren[0].nativeElement),
' '))
.toEqual('init foo ng-binding');
async.done();
});
}));
it('should co-operate with the class attribute',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="objExpr" class="init foo"></div>';
var template = '<div [ng-class]="objExpr" class="init foo"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
@ -352,7 +335,7 @@ export function main() {
it('should co-operate with the class attribute and class.name binding',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div class="init foo" [class]="objExpr" [class.baz]="condition"></div>';
var template = '<div class="init foo" [ng-class]="objExpr" [class.baz]="condition"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
@ -383,7 +366,7 @@ export function main() {
}
@Component({selector: 'test-cmp'})
@View({directives: [CSSClass, NgFor]})
@View({directives: [NgClass, NgFor]})
class TestComponent {
condition: boolean = true;
items: any[];