kylefang/angular.js
1
0
Fork 0
mirror of https://github.com/zhigang1992/angular.js.git synced 2026-01-13 08:59:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ng:class): preserve classes added post compilation

Browse Source 
- make sure ng:class preserve classes added after compilation

Closes #355
This commit is contained in:
Di Peng
2011-07-07 11:42:02 -07:00
committed by Igor Minar
parent 8a8a2cf462
commit 2428907259
2 changed files with 56 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/directives.js
View File

@@ -568,18 +568,25 @@ angularDirective("ng:submit", function(expression, element) {
});
});
function ngClass(selector) {
return function(expression, element){
var existing = element[0].className + ' ';
return function(element){
this.$onEval(function(){
if (selector(this.$index)) {
var value = this.$eval(expression);
if (isArray(value)) value = value.join(' ');
element[0].className = trim(existing + value);
}
}, element);
if(selector(this.$index)) {
this.$watch(expression, function(newCls, oldCls) {
var cls = element.attr('class');
if (isArray(newCls)) newCls = newCls.join(' ');
if (isArray(oldCls)) oldCls = oldCls.join(' ');
// The time when newCls == oldCLs is when $watch just started
if (newCls == oldCls) {
cls += ' ' + newCls;
} else {
cls = cls.replace(' ' + oldCls, ' ' + newCls);
}
element.attr('class', cls);
});
}
};
};
}

41
test/directivesSpec.js
View File

@@ -177,7 +177,7 @@ describe("directive", function(){
describe('ng:class', function() {
it('should add new and remove old classes dynamically', function() {
it('should change current class or remove old classes dynamically', function() {
var scope = compile('<div class="existing" ng:class="dynClass"></div>');
scope.dynClass = 'A';
scope.$eval();
@@ -204,6 +204,45 @@ describe("directive", function(){
expect(element.hasClass('A')).toBeTruthy();
expect(element.hasClass('B')).toBeTruthy();
});
it('should preserve class added post compilation', function() {
var scope = compile('<div class="existing" ng:class="dynClass"></div>');
scope.dynClass = 'A';
scope.$eval();
expect(element.hasClass('existing')).toBe(true);
// add extra class, change model and eval
element.addClass('newClass');
scope.dynClass = 'B';
scope.$eval();
expect(element.hasClass('existing')).toBe(true);
expect(element.hasClass('B')).toBe(true);
expect(element.hasClass('newClass')).toBe(true);
});
it('should preserve class added post compilation even without existing classes"', function() {
var scope = compile('<div ng:class="dynClass"></div>');
scope.dynClass = 'A';
scope.$eval();
expect(element.hasClass('A')).toBe(true);
// add extra class, change model and eval
element.addClass('newClass');
scope.dynClass = 'B';
scope.$eval();
expect(element.hasClass('B')).toBe(true);
expect(element.hasClass('newClass')).toBe(true);
});
it('should preserve right classes"', function() {
var scope = compile('<div class="ui-panel ui-selected" ng:class="dynCls"></div>');
scope.dynCls = 'panel';
scope.dynCls = 'foo';
scope.$eval();
expect(element.attr('class')).toBe('ui-panel ui-selected ng-directive foo');
});
});