Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit d6098ee

Browse files
itchynymgol
authored andcommitted
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
1 parent c903b76 commit d6098ee

File tree

2 files changed

+41
-1
lines changed

2 files changed

+41
-1
lines changed

src/ng/directive/ngStyle.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,14 @@
5454
var ngStyleDirective = ngDirective(function(scope, element, attr) {
5555
scope.$watchCollection(attr.ngStyle, function ngStyleWatchAction(newStyles, oldStyles) {
5656
if (oldStyles && (newStyles !== oldStyles)) {
57-
forEach(oldStyles, function(val, style) { element.css(style, '');});
57+
if (!newStyles) {
58+
newStyles = {};
59+
}
60+
forEach(oldStyles, function(val, style) {
61+
if (newStyles[style] == null) {
62+
newStyles[style] = '';
63+
}
64+
});
5865
}
5966
if (newStyles) element.css(newStyles);
6067
});

test/ng/directive/ngStyleSpec.js

+33
Original file line numberDiff line numberDiff line change
@@ -120,5 +120,38 @@ describe('ngStyle', function() {
120120
expect(element.css(preCompStyle)).not.toBe('88px');
121121
expect(element.css(postCompStyle)).not.toBe('99px');
122122
});
123+
124+
it('should clear style when the new model is null', function() {
125+
scope.styleObj = {'height': '99px', 'width': '88px'};
126+
scope.$apply();
127+
expect(element.css(preCompStyle)).toBe('88px');
128+
expect(element.css(postCompStyle)).toBe('99px');
129+
scope.styleObj = null;
130+
scope.$apply();
131+
expect(element.css(preCompStyle)).not.toBe('88px');
132+
expect(element.css(postCompStyle)).not.toBe('99px');
133+
});
134+
135+
it('should clear style when the value is undefined or null', function() {
136+
scope.styleObj = {'height': '99px', 'width': '88px'};
137+
scope.$apply();
138+
expect(element.css(preCompStyle)).toBe('88px');
139+
expect(element.css(postCompStyle)).toBe('99px');
140+
scope.styleObj = {'height': undefined, 'width': null};
141+
scope.$apply();
142+
expect(element.css(preCompStyle)).not.toBe('88px');
143+
expect(element.css(postCompStyle)).not.toBe('99px');
144+
});
145+
146+
it('should set style when the value is zero', function() {
147+
scope.styleObj = {'height': '99px', 'width': '88px'};
148+
scope.$apply();
149+
expect(element.css(preCompStyle)).toBe('88px');
150+
expect(element.css(postCompStyle)).toBe('99px');
151+
scope.styleObj = {'height': 0, 'width': 0};
152+
scope.$apply();
153+
expect(element.css(preCompStyle)).toBe('0px');
154+
expect(element.css(postCompStyle)).toBe('0px');
155+
});
123156
});
124157
});

0 commit comments

Comments
 (0)