X Tutup
Skip to content

Commit ff1b110

Browse files
pkozlowski-opensourcepkozlowski-opensource
committed
fix(CSSClass): change selector to ng-class
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
1 parent 748c2d6 commit ff1b110

File tree

5 files changed

+24
-41
lines changed

5 files changed

+24
-41
lines changed

‎modules/angular2/directives.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {NgIf} from './src/directives/ng_if';
1010
import {NgNonBindable} from './src/directives/ng_non_bindable';
1111
import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from './src/directives/ng_switch';
1212

13-
export * from './src/directives/class';
13+
export * from './src/directives/ng_class';
1414
export * from './src/directives/ng_for';
1515
export * from './src/directives/ng_if';
1616
export * from './src/directives/ng_non_bindable';

‎modules/angular2/docs/core/01_templates.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ Example:
9494

9595
<pre>
9696
```
97-
<div [class]="stringify(selected)">
97+
<div [title]="stringify(selected)">
9898
```
9999
</pre>
100100
</td>

modules/angular2/src/directives/class.ts renamed to modules/angular2/src/directives/ng_class.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,17 @@ import {ListWrapper, StringMapWrapper, isListLikeIterable} from 'angular2/src/fa
2525
* # Example:
2626
*
2727
* ```
28-
* <div class="message" [class]="{error: errorCount > 0}">
28+
* <div class="message" [ng-class]="{error: errorCount > 0}">
2929
* Please check errors.
3030
* </div>
3131
* ```
3232
*/
3333
@Directive({
34-
selector: '[class]',
34+
selector: '[ng-class]',
3535
lifecycle: [LifecycleEvent.onCheck, LifecycleEvent.onDestroy],
36-
properties: ['rawClass: class']
36+
properties: ['rawClass: ng-class']
3737
})
38-
export class CSSClass {
38+
export class NgClass {
3939
private _differ: any;
4040
private _mode: string;
4141
_rawClass;

‎modules/angular2/src/render/dom/compiler/compile_element.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export class CompileElement {
1919
// inherited down to children if they don't have an own elementBinder
2020
inheritedElementBinder: ElementBinderBuilder = null;
2121
compileChildren: boolean = true;
22-
elementDescription: string; // e.g. '<div [class]="foo">' : used to provide context in case of
22+
elementDescription: string; // e.g. '<div [title]="foo">' : used to provide context in case of
2323
// error
2424

2525
constructor(public element, compilationUnit: string = '') {

modules/angular2/test/directives/class_spec.ts renamed to modules/angular2/test/directives/ng_class_spec.ts

Lines changed: 17 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@ import {
1515
} from 'angular2/test_lib';
1616
import {List, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
1717
import {Component, View, NgFor, bind} from 'angular2/angular2';
18-
import {DOM} from 'angular2/src/dom/dom_adapter';
19-
import {CSSClass} from 'angular2/src/directives/class';
18+
import {NgClass} from 'angular2/src/directives/ng_class';
2019
import {APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_pool';
2120

2221
export function main() {
@@ -27,7 +26,7 @@ export function main() {
2726

2827
it('should clean up when the directive is destroyed',
2928
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
30-
var template = '<div *ng-for="var item of items" [class]="item"></div>';
29+
var template = '<div *ng-for="var item of items" [ng-class]="item"></div>';
3130
tcb.overrideTemplate(TestComponent, template)
3231
.createAsync(TestComponent)
3332
.then((rootTC) => {
@@ -48,7 +47,7 @@ export function main() {
4847

4948
it('should add classes specified in an object literal',
5049
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
51-
var template = '<div [class]="{foo: true, bar: false}"></div>';
50+
var template = '<div [ng-class]="{foo: true, bar: false}"></div>';
5251

5352
tcb.overrideTemplate(TestComponent, template)
5453
.createAsync(TestComponent)
@@ -64,7 +63,7 @@ export function main() {
6463

6564
it('should add classes specified in an object literal without change in class names',
6665
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
67-
var template = `<div [class]="{'foo-bar': true, 'fooBar': true}"></div>`;
66+
var template = `<div [ng-class]="{'foo-bar': true, 'fooBar': true}"></div>`;
6867

6968
tcb.overrideTemplate(TestComponent, template)
7069
.createAsync(TestComponent)
@@ -79,7 +78,7 @@ export function main() {
7978

8079
it('should add and remove classes based on changes in object literal values',
8180
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
82-
var template = '<div [class]="{foo: condition, bar: !condition}"></div>';
81+
var template = '<div [ng-class]="{foo: condition, bar: !condition}"></div>';
8382

8483
tcb.overrideTemplate(TestComponent, template)
8584
.createAsync(TestComponent)
@@ -99,7 +98,7 @@ export function main() {
9998

10099
it('should add and remove classes based on changes to the expression object',
101100
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
102-
var template = '<div [class]="objExpr"></div>';
101+
var template = '<div [ng-class]="objExpr"></div>';
103102

104103
tcb.overrideTemplate(TestComponent, template)
105104
.createAsync(TestComponent)
@@ -129,7 +128,7 @@ export function main() {
129128

130129
it('should add and remove classes based on reference changes to the expression object',
131130
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
132-
var template = '<div [class]="objExpr"></div>';
131+
var template = '<div [ng-class]="objExpr"></div>';
133132

134133
tcb.overrideTemplate(TestComponent, template)
135134
.createAsync(TestComponent)
@@ -157,7 +156,7 @@ export function main() {
157156

158157
it('should add classes specified in a list literal',
159158
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
160-
var template = `<div [class]="['foo', 'bar', 'foo-bar', 'fooBar']"></div>`;
159+
var template = `<div [ng-class]="['foo', 'bar', 'foo-bar', 'fooBar']"></div>`;
161160

162161
tcb.overrideTemplate(TestComponent, template)
163162
.createAsync(TestComponent)
@@ -172,7 +171,7 @@ export function main() {
172171

173172
it('should add and remove classes based on changes to the expression',
174173
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
175-
var template = '<div [class]="arrExpr"></div>';
174+
var template = '<div [ng-class]="arrExpr"></div>';
176175

177176
tcb.overrideTemplate(TestComponent, template)
178177
.createAsync(TestComponent)
@@ -205,7 +204,7 @@ export function main() {
205204

206205
it('should add and remove classes when a reference changes',
207206
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
208-
var template = '<div [class]="arrExpr"></div>';
207+
var template = '<div [ng-class]="arrExpr"></div>';
209208

210209
tcb.overrideTemplate(TestComponent, template)
211210
.createAsync(TestComponent)
@@ -228,7 +227,7 @@ export function main() {
228227

229228
it('should add classes specified in a string literal',
230229
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
231-
var template = `<div [class]="'foo bar foo-bar fooBar'"></div>`;
230+
var template = `<div [ng-class]="'foo bar foo-bar fooBar'"></div>`;
232231

233232
tcb.overrideTemplate(TestComponent, template)
234233
.createAsync(TestComponent)
@@ -243,7 +242,7 @@ export function main() {
243242

244243
it('should add and remove classes based on changes to the expression',
245244
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
246-
var template = '<div [class]="strExpr"></div>';
245+
var template = '<div [ng-class]="strExpr"></div>';
247246

248247
tcb.overrideTemplate(TestComponent, template)
249248
.createAsync(TestComponent)
@@ -269,7 +268,7 @@ export function main() {
269268

270269
it('should remove active classes when switching from string to null',
271270
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
272-
var template = `<div [class]="strExpr"></div>`;
271+
var template = `<div [ng-class]="strExpr"></div>`;
273272

274273
tcb.overrideTemplate(TestComponent, template)
275274
.createAsync(TestComponent)
@@ -290,7 +289,7 @@ export function main() {
290289

291290
it('should remove active classes when expression evaluates to null',
292291
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
293-
var template = '<div [class]="objExpr"></div>';
292+
var template = '<div [ng-class]="objExpr"></div>';
294293

295294
tcb.overrideTemplate(TestComponent, template)
296295
.createAsync(TestComponent)
@@ -313,25 +312,9 @@ export function main() {
313312
});
314313
}));
315314

316-
it('should have no effect when activated by a static class attribute',
317-
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
318-
var template = '<div class="init foo"></div>';
319-
320-
tcb.overrideTemplate(TestComponent, template)
321-
.createAsync(TestComponent)
322-
.then((rootTC) => {
323-
rootTC.detectChanges();
324-
// TODO(pk): in CJS className isn't initialized properly if we don't mutate classes
325-
expect(ListWrapper.join(DOM.classList(rootTC.componentViewChildren[0].nativeElement),
326-
' '))
327-
.toEqual('init foo ng-binding');
328-
async.done();
329-
});
330-
}));
331-
332315
it('should co-operate with the class attribute',
333316
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
334-
var template = '<div [class]="objExpr" class="init foo"></div>';
317+
var template = '<div [ng-class]="objExpr" class="init foo"></div>';
335318

336319
tcb.overrideTemplate(TestComponent, template)
337320
.createAsync(TestComponent)
@@ -352,7 +335,7 @@ export function main() {
352335

353336
it('should co-operate with the class attribute and class.name binding',
354337
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
355-
var template = '<div class="init foo" [class]="objExpr" [class.baz]="condition"></div>';
338+
var template = '<div class="init foo" [ng-class]="objExpr" [class.baz]="condition"></div>';
356339

357340
tcb.overrideTemplate(TestComponent, template)
358341
.createAsync(TestComponent)
@@ -383,7 +366,7 @@ export function main() {
383366
}
384367

385368
@Component({selector: 'test-cmp'})
386-
@View({directives: [CSSClass, NgFor]})
369+
@View({directives: [NgClass, NgFor]})
387370
class TestComponent {
388371
condition: boolean = true;
389372
items: any[];

0 commit comments

Comments
 (0)
X Tutup