fix(ngClass): ensure ngClass doesn't fire addClass or removeClass with an empty string

If ngClass fires off an add- or removeClass whilst the opposite animation is going on then
the animation will be skipped. The default behavior of ngClass was executing remoteClass
with an empty string while addClass had just fired. This commit fixes that bug.
This commit is contained in:
Matias Niemelä 2013-07-29 16:24:05 -04:00 committed by Misko Hevery
parent 419ed040b6
commit 33d45d8faf
2 changed files with 51 additions and 2 deletions

View file

@ -42,12 +42,18 @@ function classDirective(name, selector) {
function removeClass(classVal) {
$animate.removeClass(element, flattenClasses(classVal));
classVal = flattenClasses(classVal);
if(classVal && classVal.length > 0) {
$animate.removeClass(element, classVal);
}
}
function addClass(classVal) {
$animate.addClass(element, flattenClasses(classVal));
classVal = flattenClasses(classVal);
if(classVal && classVal.length > 0) {
$animate.addClass(element, classVal);
}
}
function flattenClasses(classVal) {

View file

@ -304,3 +304,46 @@ describe('ngClass', function() {
expect(e2.hasClass('odd')).toBeFalsy();
}));
});
describe('ngClass animations', function() {
var body, element, $rootElement;
beforeEach(module('mock.animate'));
it("should avoid calling addClass accidentally when removeClass is going on",
inject(function($compile, $rootScope, $animate, $timeout) {
var element = angular.element('<div ng-class="val"></div>');
var body = jqLite(document.body);
body.append(element);
$compile(element)($rootScope);
expect($animate.queue.length).toBe(0);
$rootScope.val = 'one';
$rootScope.$digest();
$animate.process('addClass');
$animate.process('addClass');
$timeout.flush();
expect($animate.queue.length).toBe(0);
$rootScope.val = '';
$rootScope.$digest();
$animate.process('removeClass'); //only removeClass is called
expect($animate.queue.length).toBe(0);
$timeout.flush();
$rootScope.val = 'one';
$rootScope.$digest();
$animate.process('addClass');
$timeout.flush();
expect($animate.queue.length).toBe(0);
$rootScope.val = 'two';
$rootScope.$digest();
$animate.process('removeClass');
$animate.process('addClass');
$timeout.flush();
expect($animate.queue.length).toBe(0);
}));
});