ng:style remembers previous style and properly resets to it

This commit is contained in:
Misko Hevery 2010-07-14 17:07:23 -07:00
parent 0a57273f00
commit e3e9ac8675
3 changed files with 41 additions and 12 deletions

View file

@ -254,8 +254,17 @@ angularDirective("ng:hide", function(expression, element){
angularDirective("ng:style", function(expression, element){
return function(element){
var resetStyle = element.css();
this.$onEval(function(){
element.css(this.$eval(expression) || {});
var style = this.$eval(expression) || {}, key, mergedStyle = {};
for(key in style) {
if (typeof resetStyle[key] == 'undefined') resetStyle[key] = null;
mergedStyle[key] = style[key];
}
for(key in resetStyle) {
mergedStyle[key] = mergedStyle[key] || resetStyle[key];
}
element.css(mergedStyle);
}, element);
};
});

View file

@ -175,8 +175,15 @@ JQLite.prototype = {
} else {
return style[name];
}
} else {
} else if(name) {
extend(style, name);
} else {
var current = {};
for (var i=0; i<style.length; i++) {
name = style[i];
current[name] = style[name];
}
return current;
}
},

View file

@ -168,17 +168,30 @@ describe("directives", function(){
expect(e2.hasClass('even')).toBeTruthy();
});
it('should ng:style', function(){
var scope = compile('<div ng:style="{color:\'red\'}"></div>');
scope.$eval();
expect(element.css('color')).toEqual('red');
});
describe('ng:style', function(){
it('should set', function(){
var scope = compile('<div ng:style="{color:\'red\'}"></div>');
scope.$eval();
expect(element.css('color')).toEqual('red');
});
it('should silently ignore undefined ng:style', function() {
var scope = compile('<div ng:style="myStyle"></div>');
scope.$eval();
dump(sortedHtml(element));
expect(element.hasClass('ng-exception')).toBeFalsy();
it('should silently ignore undefined style', function() {
var scope = compile('<div ng:style="myStyle"></div>');
scope.$eval();
expect(element.hasClass('ng-exception')).toBeFalsy();
});
it('should preserve and remove previus style', function(){
var scope = compile('<div style="color:red;" ng:style="myStyle"></div>');
scope.$eval();
expect(element.css()).toEqual({color:'red'});
scope.myStyle = {color:'blue', width:'10px'};
scope.$eval();
expect(element.css()).toEqual({color:'blue', width:'10px'});
scope.myStyle = {};
scope.$eval();
expect(element.css()).toEqual({color:'red'});
});
});
it('should ng:show', function(){