Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

ngClass[Odd/Even] overhaul #15228

Closed
wants to merge 15 commits into from
Closed

ngClass[Odd/Even] overhaul #15228

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
8822006
refactor(ngClass): remove unnecessary dependency on `$animate`
gkalpak Oct 7, 2016
0409589
refactor(ngClass): remove redundant `$observe`r
gkalpak Oct 7, 2016
2705085
test(ngClass): add some tests about one-time bindings and objects ins…
gkalpak Oct 7, 2016
0ba4be6
fix(ngClassOdd/Even): keep track of classes even if odd/even do not m…
gkalpak Oct 7, 2016
89268af
perf(ngClass): only access the element's `data` once
gkalpak Oct 7, 2016
2871a11
refactor(ngClass): simplify conditions
gkalpak Oct 7, 2016
a7e69f7
refactor(ngClass): move helper functions outside the closure
gkalpak Oct 7, 2016
37cec7a
refactor(ngClass): exit `arrayDifference()` early if an input is empty
gkalpak Oct 7, 2016
5708424
perf(ngClass): avoid deep-watching (if possible) and unnecessary copies
gkalpak Oct 7, 2016
739f723
fixup! refactor(ngClass): remove unnecessary dependency on `$animate`
gkalpak Oct 8, 2016
181c51b
fixup! refactor(ngClass): remove redundant `$observe`r
gkalpak Oct 8, 2016
16e666b
fixup! test(ngClass): add some tests about one-time bindings and obje…
gkalpak Oct 8, 2016
dfe4307
squash! fix(ngClassOdd/Even): keep track of classes even if odd/even …
gkalpak Oct 8, 2016
f766698
fixup! perf(ngClass): avoid deep-watching (if possible) and unnecessa…
gkalpak Oct 8, 2016
a9742f9
fixup! refactor(ngClass): simplify conditions
gkalpak Oct 10, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions src/ng/directive/ngClass.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,6 @@ function classDirective(name, selector) {

scope.$watch(attr[name], ngClassWatchAction, true);

attr.$observe('class', function(value) {
ngClassWatchAction(scope.$eval(attr[name]));
});


if (name !== 'ngClass') {
scope.$watch('$index', function($index, old$index) {
/* eslint-disable no-bitwise */
Expand Down
102 changes: 72 additions & 30 deletions test/ng/directive/ngClassSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,37 +311,79 @@ fdescribe('ngClass', function() {
}));


it('should reapply ngClass when interpolated class attribute changes', inject(function($rootScope, $compile) {
element = $compile('<div class="one {{cls}} three" ng-class="{four: four}"></div>')($rootScope);

$rootScope.$apply(function() {
$rootScope.cls = 'two';
$rootScope.four = true;
});
expect(element).toHaveClass('one');
expect(element).toHaveClass('two'); // interpolated
expect(element).toHaveClass('three');
expect(element).toHaveClass('four');
it('should reapply ngClass when interpolated class attribute changes',
inject(function($compile, $rootScope) {
element = $compile(
'<div>' +
'<div class="one {{two}} three" ng-class="{five: five}"></div>' +
'<div class="one {{two}} three {{four}}" ng-class="{five: five}"></div>' +
'</div>')($rootScope);
var e1 = element.children().eq(0);
var e2 = element.children().eq(1);

$rootScope.$apply(function() {
$rootScope.cls = 'too';
});
expect(element).toHaveClass('one');
expect(element).toHaveClass('too'); // interpolated
expect(element).toHaveClass('three');
expect(element).toHaveClass('four'); // should still be there
expect(element.hasClass('two')).toBeFalsy();

$rootScope.$apply(function() {
$rootScope.cls = 'to';
});
expect(element).toHaveClass('one');
expect(element).toHaveClass('to'); // interpolated
expect(element).toHaveClass('three');
expect(element).toHaveClass('four'); // should still be there
expect(element.hasClass('two')).toBeFalsy();
expect(element.hasClass('too')).toBeFalsy();
}));
$rootScope.$apply('two = "two"; five = true');

expect(e1).toHaveClass('one');
expect(e1).toHaveClass('two');
expect(e1).toHaveClass('three');
expect(e1).not.toHaveClass('four');
expect(e1).toHaveClass('five');
expect(e2).toHaveClass('one');
expect(e2).toHaveClass('two');
expect(e2).toHaveClass('three');
expect(e2).not.toHaveClass('four');
expect(e2).toHaveClass('five');

$rootScope.$apply('two = "too"');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

although this is very clever "two" and "too" are very similar and actually make the test harder to follow.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The cleverness credits go to the original test 😃
I can change it.


expect(e1).toHaveClass('one');
expect(e1).not.toHaveClass('two');
expect(e1).toHaveClass('too');
expect(e1).toHaveClass('three');
expect(e1).not.toHaveClass('four');
expect(e1).toHaveClass('five');
expect(e2).toHaveClass('one');
expect(e2).not.toHaveClass('two');
expect(e2).toHaveClass('too');
expect(e2).toHaveClass('three');
expect(e2).not.toHaveClass('four');
expect(e2).toHaveClass('five');

$rootScope.$apply('two = "to"; four = "four"');

expect(e1).toHaveClass('one');
expect(e1).not.toHaveClass('two');
expect(e1).not.toHaveClass('too');
expect(e1).toHaveClass('to');
expect(e1).toHaveClass('three');
expect(e1).not.toHaveClass('four');
expect(e1).toHaveClass('five');
expect(e2).toHaveClass('one');
expect(e2).not.toHaveClass('two');
expect(e2).not.toHaveClass('too');
expect(e2).toHaveClass('to');
expect(e2).toHaveClass('three');
expect(e2).toHaveClass('four');
expect(e2).toHaveClass('five');

$rootScope.$apply('five = false');

expect(e1).toHaveClass('one');
expect(e1).not.toHaveClass('two');
expect(e1).not.toHaveClass('too');
expect(e1).toHaveClass('to');
expect(e1).toHaveClass('three');
expect(e1).not.toHaveClass('four');
expect(e1).not.toHaveClass('five');
expect(e2).toHaveClass('one');
expect(e2).not.toHaveClass('two');
expect(e2).not.toHaveClass('too');
expect(e2).toHaveClass('to');
expect(e2).toHaveClass('three');
expect(e2).toHaveClass('four');
expect(e2).not.toHaveClass('five');
})
);


it('should not mess up class value due to observing an interpolated class attribute', inject(function($rootScope, $compile) {
Expand Down