From 81b65bfa4cd0fc319ab8ab5bcad1e5761eac9ec4 Mon Sep 17 00:00:00 2001 From: itchyny Date: Tue, 2 Oct 2018 18:14:47 +0900 Subject: [PATCH 1/7] 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 https://github.com/jquery/jquery/issues/4185. --- src/ng/directive/ngStyle.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/ng/directive/ngStyle.js b/src/ng/directive/ngStyle.js index afb7a79d269d..a3f6702b1a26 100644 --- a/src/ng/directive/ngStyle.js +++ b/src/ng/directive/ngStyle.js @@ -54,7 +54,11 @@ 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, '');}); + forEach(oldStyles, function(val, style) { + if (!(newStyles && newStyles.hasOwnProperty(style))) { + element.css(style, ''); + } + }); } if (newStyles) element.css(newStyles); }); From 02f0d0b11ea597b2bb9e144c19b8d7a4e8a3d3b3 Mon Sep 17 00:00:00 2001 From: itchyny Date: Tue, 2 Oct 2018 20:38:26 +0900 Subject: [PATCH 2/7] style(ngStyle): fix indentation --- src/ng/directive/ngStyle.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ng/directive/ngStyle.js b/src/ng/directive/ngStyle.js index a3f6702b1a26..b15c07c1b235 100644 --- a/src/ng/directive/ngStyle.js +++ b/src/ng/directive/ngStyle.js @@ -55,9 +55,9 @@ var ngStyleDirective = ngDirective(function(scope, element, attr) { scope.$watchCollection(attr.ngStyle, function ngStyleWatchAction(newStyles, oldStyles) { if (oldStyles && (newStyles !== oldStyles)) { forEach(oldStyles, function(val, style) { - if (!(newStyles && newStyles.hasOwnProperty(style))) { - element.css(style, ''); - } + if (!(newStyles && newStyles.hasOwnProperty(style))) { + element.css(style, ''); + } }); } if (newStyles) element.css(newStyles); From 5d74f0f2884f0455a6735f58966698ea70f609c9 Mon Sep 17 00:00:00 2001 From: itchyny Date: Tue, 2 Oct 2018 20:47:45 +0900 Subject: [PATCH 3/7] fix(ngStyle): clear the style even when newStyle has the property but falsy --- src/ng/directive/ngStyle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ng/directive/ngStyle.js b/src/ng/directive/ngStyle.js index b15c07c1b235..d60d3a010d68 100644 --- a/src/ng/directive/ngStyle.js +++ b/src/ng/directive/ngStyle.js @@ -55,7 +55,7 @@ var ngStyleDirective = ngDirective(function(scope, element, attr) { scope.$watchCollection(attr.ngStyle, function ngStyleWatchAction(newStyles, oldStyles) { if (oldStyles && (newStyles !== oldStyles)) { forEach(oldStyles, function(val, style) { - if (!(newStyles && newStyles.hasOwnProperty(style))) { + if (!(newStyles && newStyles[style])) { element.css(style, ''); } }); From 704ce65ae8b3140eb94db0cb78a243312c3acc7a Mon Sep 17 00:00:00 2001 From: itchyny Date: Tue, 2 Oct 2018 20:52:03 +0900 Subject: [PATCH 4/7] test(ngStyle): add a test for falsy values --- test/ng/directive/ngStyleSpec.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/test/ng/directive/ngStyleSpec.js b/test/ng/directive/ngStyleSpec.js index 7a8cfb2cd75f..ad5e8b06794b 100644 --- a/test/ng/directive/ngStyleSpec.js +++ b/test/ng/directive/ngStyleSpec.js @@ -120,5 +120,16 @@ describe('ngStyle', function() { expect(element.css(preCompStyle)).not.toBe('88px'); expect(element.css(postCompStyle)).not.toBe('99px'); }); + + it('should clear style when the value is falsy', 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'); + }); }); }); From 95d2458289f42b9c399258cb0f4df038abc4dbb7 Mon Sep 17 00:00:00 2001 From: itchyny Date: Thu, 4 Oct 2018 11:29:14 +0900 Subject: [PATCH 5/7] perf(ngStyle): use newStyles to reduce the number of element.css --- src/ng/directive/ngStyle.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/ng/directive/ngStyle.js b/src/ng/directive/ngStyle.js index d60d3a010d68..f1d3f66d90f0 100644 --- a/src/ng/directive/ngStyle.js +++ b/src/ng/directive/ngStyle.js @@ -54,9 +54,12 @@ var ngStyleDirective = ngDirective(function(scope, element, attr) { scope.$watchCollection(attr.ngStyle, function ngStyleWatchAction(newStyles, oldStyles) { if (oldStyles && (newStyles !== oldStyles)) { + if (!newStyles) { + newStyles = {}; + } forEach(oldStyles, function(val, style) { - if (!(newStyles && newStyles[style])) { - element.css(style, ''); + if (newStyles[style] == null) { + newStyles[style] = ''; } }); } From cbb0b7d801bbca166de317fc689fdc4457528594 Mon Sep 17 00:00:00 2001 From: itchyny Date: Thu, 4 Oct 2018 18:23:50 +0900 Subject: [PATCH 6/7] test(ngStyle): add a test for setting style when the new value is numeric 0 --- test/ng/directive/ngStyleSpec.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/test/ng/directive/ngStyleSpec.js b/test/ng/directive/ngStyleSpec.js index ad5e8b06794b..1bcff03ca1c8 100644 --- a/test/ng/directive/ngStyleSpec.js +++ b/test/ng/directive/ngStyleSpec.js @@ -121,7 +121,7 @@ describe('ngStyle', function() { expect(element.css(postCompStyle)).not.toBe('99px'); }); - it('should clear style when the value is falsy', function() { + 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'); @@ -131,5 +131,16 @@ describe('ngStyle', function() { 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'); + }); }); }); From c44b2f25011789183d80f13f00e8d1957c19e195 Mon Sep 17 00:00:00 2001 From: itchyny Date: Thu, 4 Oct 2018 20:02:23 +0900 Subject: [PATCH 7/7] test(ngStyle): add a test for the case the new model is null --- test/ng/directive/ngStyleSpec.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/test/ng/directive/ngStyleSpec.js b/test/ng/directive/ngStyleSpec.js index 1bcff03ca1c8..51dd1c3fcb0c 100644 --- a/test/ng/directive/ngStyleSpec.js +++ b/test/ng/directive/ngStyleSpec.js @@ -121,6 +121,17 @@ describe('ngStyle', function() { 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();