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
+399 −128
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
6 changes: 3 additions & 3 deletions src/ng/directive/ngClass.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,12 @@ function classDirective(name, selector) {
link: function(scope, element, attr) {
var oldVal;

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

if (name !== 'ngClass') {
scope.$watch('$index', function($index, old$index) {
/* eslint-disable no-bitwise */
var mod = $index & 1;
if (mod !== (old$index & 1)) {
var classes = arrayClasses(scope.$eval(attr[name]));
var classes = arrayClasses(oldVal);
if (mod === selector) {
addClasses(classes);
} else {
Expand All @@ -33,6 +31,8 @@ function classDirective(name, selector) {
});
}

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

function addClasses(classes) {
var newClasses = digestClassCounts(classes, 1);
attr.$addClass(newClasses);
Expand Down
41 changes: 41 additions & 0 deletions test/ng/directive/ngClassSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -462,6 +462,47 @@ fdescribe('ngClass', function() {
expect(e2.hasClass('odd')).toBeFalsy();
}));


it('should keep track of old classes even if odd/even does not match `$index` atm',
Copy link
Contributor

Choose a reason for hiding this comment

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

This description makes hard to understand what is actually being tested.

Are you saying that ngClass is not removing old classes when both the $index and the expression value changes?

Copy link
Member Author

Choose a reason for hiding this comment

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

It might be because I was trying to solve it differently at first. Here is what was happening before this change:

  1. Assume ng-class-odd="foo", $index = 0, foo = 'foo'. The element has className === 'foo'.
  2. If the $index and foo change simultaneously, say $index = 1, foo = 'bar', then:
    1. The attr[name] watch kicks in first and it checks if scope.$index & 1 === selector (i.e. it uses the current value of $index to determine if it needs to update the classes). It decides it doesn't need to do anything, so at this point the element still has className === 'foo'.
    2. The $index watch kicks in. Since it determines that $index & 1 !== old$index & 1, it decides to remove the classes. But it tries to scope.$eval(attr[name]) which now evaluates to 'bar'. So the element will still have className === 'foo'.

Basically, the problem is that both watch-actions check against the current value of each other to determine what to do, which fails when both change in the same digest.
I.e. the attr[name] watch uses scope.$index (while it should use the previous index) and the $index watch uses scope.$eval(attr[name]) (while it should use the previous value - the "old classes").

The commit fxes it by:

  1. Moving the $index watch before the attr[name] watch.
  2. Using oldVal from the $index watch to add/remove.

This way, when the $index & 1 changes, the $index watch will correctly add/remove the classes and then the attr[name] watch will update the classes (i.e. add the new ones) if necessary.

I hope this makes sense 😃

How about:

It should add/remove the correct classes when the expression and $index change simultaneously

inject(function($compile, $rootScope) {
element = $compile(
'<div>' +
'<div ng-class-odd="foo"></div>' +
'<div ng-class-even="foo"></div>' +
'</div>')($rootScope);
var odd = element.children().eq(0);
var even = element.children().eq(1);

$rootScope.$apply('$index = 0; foo = "class1"');

expect(odd).toHaveClass('class1');
expect(odd).not.toHaveClass('class2');
expect(even).not.toHaveClass('class1');
expect(even).not.toHaveClass('class2');

$rootScope.$apply('$index = 1; foo = "class2"');

expect(odd).not.toHaveClass('class1');
expect(odd).not.toHaveClass('class2');
expect(even).not.toHaveClass('class1');
expect(even).toHaveClass('class2');

$rootScope.$apply('foo = "class1"');

expect(odd).not.toHaveClass('class1');
expect(odd).not.toHaveClass('class2');
expect(even).toHaveClass('class1');
expect(even).not.toHaveClass('class2');

$rootScope.$apply('$index = 2');

expect(odd).toHaveClass('class1');
expect(odd).not.toHaveClass('class2');
expect(even).not.toHaveClass('class1');
expect(even).not.toHaveClass('class2');
})
);

it('should support mixed array/object variable with a mutating object',
inject(function($rootScope, $compile) {
element = $compile('<div ng-class="classVar"></div>')($rootScope);
Expand Down