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

Commit 10d1b19

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 c8d985a commit 10d1b19

File tree

2 files changed

+12
-8
lines changed

2 files changed

+12
-8
lines changed

src/ng/directive/ngStyle.js

Lines changed: 1 addition & 8 deletions
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

Lines changed: 11 additions & 0 deletions
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)