Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-05-18 03:21:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(ngClass): should remove classes when object is the same but property has changed

Browse source 
If you wire up ngClass directly to an object on the scope, e.g. ng-class="myClasses",
where scope.myClasses = { 'classA': true, 'classB': false },
there was a bug that changing scope.myClasses.classA = false, was not being picked
up and classA was not being removed from the element's CSS classes.

This fix uses angular.equals for the comparison and ensures that oldVal is a copy of
(rather than a reference to) the newVal.
This commit is contained in:
Pete Bacon Darwin 2013-04-16 12:29:56 +01:00
parent 465238613b
commit 0ac969a5ee
2 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/ng/directive/ngClass.js
View file

@ -29,12 +29,12 @@ function classDirective(name, selector) {
function ngClassWatchAction(newVal) { function ngClassWatchAction(newVal) {
if (selector === true || scope.$index % 2 === selector) { if (selector === true || scope.$index % 2 === selector) {
if (oldVal && (newVal !== oldVal)) { if (oldVal && !equals(newVal,oldVal)) {
removeClass(oldVal); removeClass(oldVal);
} }
addClass(newVal); addClass(newVal);
} }
oldVal = newVal; oldVal = copy(newVal);
} }

18
test/ng/directive/ngClassSpec.js
View file

@ -43,7 +43,7 @@ describe('ngClass', function() {
'expressions', inject(function($rootScope, $compile) { 'expressions', inject(function($rootScope, $compile) {
var element = $compile( var element = $compile(
'<div class="existing" ' + '<div class="existing" ' +
'ng-class="{A: conditionA, B: conditionB(), AnotB: conditionA&&!conditionB}">' + 'ng-class="{A: conditionA, B: conditionB(), AnotB: conditionA&&!conditionB()}">' +
'</div>')($rootScope); '</div>')($rootScope);
$rootScope.conditionA = true; $rootScope.conditionA = true;
$rootScope.$digest(); $rootScope.$digest();
@ -52,7 +52,7 @@ describe('ngClass', function() {
expect(element.hasClass('B')).toBeFalsy(); expect(element.hasClass('B')).toBeFalsy();
expect(element.hasClass('AnotB')).toBeTruthy(); expect(element.hasClass('AnotB')).toBeTruthy();
$rootScope.conditionB = function() { return true }; $rootScope.conditionB = function() { return true; };
$rootScope.$digest(); $rootScope.$digest();
expect(element.hasClass('existing')).toBeTruthy(); expect(element.hasClass('existing')).toBeTruthy();
expect(element.hasClass('A')).toBeTruthy(); expect(element.hasClass('A')).toBeTruthy();
@ -61,6 +61,20 @@ describe('ngClass', function() {
})); }));
it('should remove classes when the referenced object is the same but its property is changed',
inject(function($rootScope, $compile) {
var element = $compile('<div ng-class="classes"></div>')($rootScope);
$rootScope.classes = { A: true, B: true };
$rootScope.$digest();
expect(element.hasClass('A')).toBeTruthy();
expect(element.hasClass('B')).toBeTruthy();
$rootScope.classes.A = false;
$rootScope.$digest();
expect(element.hasClass('A')).toBeFalsy();
expect(element.hasClass('B')).toBeTruthy();
}));
it('should support adding multiple classes via a space delimited string', inject(function($rootScope, $compile) { it('should support adding multiple classes via a space delimited string', inject(function($rootScope, $compile) {
element = $compile('<div class="existing" ng-class="\'A B\'"></div>')($rootScope); element = $compile('<div class="existing" ng-class="\'A B\'"></div>')($rootScope);
$rootScope.$digest(); $rootScope.$digest();