fix(ngStyle): skip setting empty value when new style has the property
Previously, all the properties in oldStyles are set to empty value once. Using AngularJS with jQuery 3.3.1, this disables the CSS transition as reported in jquery/jquery#4185. Closes #16709
This commit is contained in:
committed by
Michał Gołębiowski-Owczarek
parent
33f801e7c2
commit
bb5a7e39ba
@@ -54,7 +54,14 @@
|
||||
var ngStyleDirective = ngDirective(function(scope, element, attr) {
|
||||
scope.$watchCollection(attr.ngStyle, function ngStyleWatchAction(newStyles, oldStyles) {
|
||||
if (oldStyles && (newStyles !== oldStyles)) {
|
||||
forEach(oldStyles, function(val, style) { element.css(style, '');});
|
||||
if (!newStyles) {
|
||||
newStyles = {};
|
||||
}
|
||||
forEach(oldStyles, function(val, style) {
|
||||
if (newStyles[style] == null) {
|
||||
newStyles[style] = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
if (newStyles) element.css(newStyles);
|
||||
});
|
||||
|
||||
@@ -120,5 +120,38 @@ describe('ngStyle', function() {
|
||||
expect(element.css(preCompStyle)).not.toBe('88px');
|
||||
expect(element.css(postCompStyle)).not.toBe('99px');
|
||||
});
|
||||
|
||||
it('should clear style when the new model is null', function() {
|
||||
scope.styleObj = {'height': '99px', 'width': '88px'};
|
||||
scope.$apply();
|
||||
expect(element.css(preCompStyle)).toBe('88px');
|
||||
expect(element.css(postCompStyle)).toBe('99px');
|
||||
scope.styleObj = null;
|
||||
scope.$apply();
|
||||
expect(element.css(preCompStyle)).not.toBe('88px');
|
||||
expect(element.css(postCompStyle)).not.toBe('99px');
|
||||
});
|
||||
|
||||
it('should clear style when the value is undefined or null', function() {
|
||||
scope.styleObj = {'height': '99px', 'width': '88px'};
|
||||
scope.$apply();
|
||||
expect(element.css(preCompStyle)).toBe('88px');
|
||||
expect(element.css(postCompStyle)).toBe('99px');
|
||||
scope.styleObj = {'height': undefined, 'width': null};
|
||||
scope.$apply();
|
||||
expect(element.css(preCompStyle)).not.toBe('88px');
|
||||
expect(element.css(postCompStyle)).not.toBe('99px');
|
||||
});
|
||||
|
||||
it('should set style when the value is zero', function() {
|
||||
scope.styleObj = {'height': '99px', 'width': '88px'};
|
||||
scope.$apply();
|
||||
expect(element.css(preCompStyle)).toBe('88px');
|
||||
expect(element.css(postCompStyle)).toBe('99px');
|
||||
scope.styleObj = {'height': 0, 'width': 0};
|
||||
scope.$apply();
|
||||
expect(element.css(preCompStyle)).toBe('0px');
|
||||
expect(element.css(postCompStyle)).toBe('0px');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user