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

Commit 5edd253

Browse files
committed
fix(ngStyle): correctly remove old style when new style value is invalid
Since d6098ee, old styles were not removed if `newStyles` specified an invalid value for the style (e.g. `false`). The assumption was that the new style would overwrite the old style value, but using an invalid value made browsers ignore the new value and thus keep the old style. This would typically happen when guarding a style with a boolean flag; e.g.: `ng-style="{backgroundColor: isError && 'red'}"` This commit essentially revers commit d6098ee, whose main purpose was to work around jquery/jquery#4185. The jQuery issue has been fixed in 3.4.0, so that should not be a problem any more. Fixes #16860 Closes #16868
1 parent 019dded commit 5edd253

File tree

2 files changed

+12
-8
lines changed

2 files changed

+12
-8
lines changed

src/ng/directive/ngStyle.js

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

test/ng/directive/ngStyleSpec.js

+11
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,17 @@ describe('ngStyle', function() {
143143
expect(element.css(postCompStyle)).not.toBe('99px');
144144
});
145145

146+
it('should clear style when the value is false', 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': false, 'width': false};
152+
scope.$apply();
153+
expect(element.css(preCompStyle)).not.toBe('88px');
154+
expect(element.css(postCompStyle)).not.toBe('99px');
155+
});
156+
146157
it('should set style when the value is zero', function() {
147158
scope.styleObj = {'height': '99px', 'width': '88px'};
148159
scope.$apply();

0 commit comments

Comments
 (0)