Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-05-09 23:34:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(ngClass): works with class interpolation

Browse source 
Closes #1016
This commit is contained in:
Max Martinsson 2012-06-07 17:25:35 +02:00 committed by Misko Hevery
parent b936e52874
commit 79bb7b1f0b
2 changed files with 50 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,17 +3,25 @@
function classDirective(name, selector) { function classDirective(name, selector) {
name = 'ngClass' + name; name = 'ngClass' + name;
return ngDirective(function(scope, element, attr) { return ngDirective(function(scope, element, attr) {
scope.$watch(attr[name], function(newVal, oldVal) { // Reusable function for re-applying the ngClass
function reapply(newVal, oldVal) {
if (selector === true || scope.$index % 2 === selector) { if (selector === true || scope.$index % 2 === selector) {
if (oldVal && (newVal !== oldVal)) { if (oldVal && (newVal !== oldVal)) {
if (isObject(oldVal) && !isArray(oldVal)) if (isObject(oldVal) && !isArray(oldVal))
oldVal = map(oldVal, function(v, k) { if (v) return k }); oldVal = map(oldVal, function(v, k) { if (v) return k });
element.removeClass(isArray(oldVal) ? oldVal.join(' ') : oldVal); element.removeClass(isArray(oldVal) ? oldVal.join(' ') : oldVal);
} }
if (isObject(newVal) && !isArray(newVal)) if (isObject(newVal) && !isArray(newVal))
newVal = map(newVal, function(v, k) { if (v) return k }); newVal = map(newVal, function(v, k) { if (v) return k });
if (newVal) element.addClass(isArray(newVal) ? newVal.join(' ') : newVal); } if (newVal) element.addClass(isArray(newVal) ? newVal.join(' ') : newVal);
}, true); }
};
scope.$watch(attr[name], reapply, true);
attr.$observe('class', function(value) {
var ngClass = scope.$eval(attr[name]);
reapply(ngClass, ngClass);
});
}); });
} }

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

@ -201,4 +201,37 @@ describe('ngClass', function() {
expect(e2.hasClass('C')).toBeFalsy(); expect(e2.hasClass('C')).toBeFalsy();
expect(e2.hasClass('D')).toBeFalsy(); expect(e2.hasClass('D')).toBeFalsy();
})); }));
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');
$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();
}));
}); });