Skip to content

Commit

Permalink
fix(ngStyle): skip setting empty value when new style has the property
Browse files Browse the repository at this point in the history
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 angular#16709
  • Loading branch information
itchyny authored and mgol committed Oct 4, 2018
1 parent c903b76 commit d6098ee
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 1 deletion.
9 changes: 8 additions & 1 deletion src/ng/directive/ngStyle.js
Expand Up @@ -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);
});
Expand Down
33 changes: 33 additions & 0 deletions test/ng/directive/ngStyleSpec.js
Expand Up @@ -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');
});
});
});

0 comments on commit d6098ee

Please sign in to comment.