fix(ngShow/ngHide): follow javscript truthy/falsy logic

Make ngShow and ngHide follow javascript `truthy`/`falsy` logic and not the custom toBoolean logic Fixes angular#5414 angular#4277 BREAKING CHANGE: The expressions * `<div ng-hide="[]">X</div>` * `<div ng-hide="'f'">X</div>` * `<div ng-hide="'[]'">X</div>` used to be evaluated to `false` and the elements were hidden. The same effect is present for `ng-show` and the elements are now visible
lgalfaso · Dec 30, 2013 · fe802c7 · fe802c7
1 parent 80e7a45
commit fe802c7
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js
@@ -142,8 +142,8 @@
  */
 var ngShowDirective = ['$animate', function($animate) {
   return function(scope, element, attr) {
-    scope.$watch(attr.ngShow, function ngShowWatchAction(value){
-      $animate[toBoolean(value) ? 'removeClass' : 'addClass'](element, 'ng-hide');
+    scope.$watch('!!(' + attr.ngShow + ')', function ngShowWatchAction(value){
+      $animate[value ? 'removeClass' : 'addClass'](element, 'ng-hide');
     });
   };
 }];
@@ -291,8 +291,8 @@ var ngShowDirective = ['$animate', function($animate) {
  */
 var ngHideDirective = ['$animate', function($animate) {
   return function(scope, element, attr) {
-    scope.$watch(attr.ngHide, function ngHideWatchAction(value){
-      $animate[toBoolean(value) ? 'addClass' : 'removeClass'](element, 'ng-hide');
+    scope.$watch('!!(' + attr.ngHide + ')', function ngHideWatchAction(value){
+      $animate[value ? 'addClass' : 'removeClass'](element, 'ng-hide');
     });
   };
 }];
diff --git a/test/BinderSpec.js b/test/BinderSpec.js
@@ -272,7 +272,7 @@ describe('Binder', function() {
     $rootScope.hidden = 'false';
     $rootScope.$apply();
 
-    assertVisible(element);
+    assertHidden(element);
 
     $rootScope.hidden = '';
     $rootScope.$apply();
@@ -291,7 +291,7 @@ describe('Binder', function() {
     $rootScope.show = 'false';
     $rootScope.$apply();
 
-    assertHidden(element);
+    assertVisible(element);
 
     $rootScope.show = '';
     $rootScope.$apply();

diff --git a/test/ng/directive/ngShowHideSpec.js b/test/ng/directive/ngShowHideSpec.js
@@ -28,6 +28,17 @@ describe('ngShow / ngHide', function() {
       $rootScope.$digest();
       expect(element).toBeShown();
     }));
+
+    it('should follow javascript `truthy`/`falsy` logic', inject(function($rootScope, $compile) {
+      var cases = ['[]', 'f', [], [''], 'false', {}, function() {}, function(f) {}, 0, false, null, undefined, '', NaN];
+      element = jqLite('<div ng-show="exp"></div>');
+      element = $compile(element)($rootScope);
+      angular.forEach(cases, function(value) {
+        $rootScope.exp = value;
+        $rootScope.$digest();
+        expect(element)[value ? 'toBeShown' : 'toBeHidden']();
+      });
+    }));
   });
 
   describe('ngHide', function() {
@@ -39,6 +50,17 @@ describe('ngShow / ngHide', function() {
       $rootScope.$digest();
       expect(element).toBeHidden();
     }));
+
+    it('should follow javascript `truthy`/`falsy` logic', inject(function($rootScope, $compile) {
+      var cases = ['[]', 'f', [], [''], 'false', {}, function() {}, function(f) {}, 0, false, null, undefined, '', NaN];
+      element = jqLite('<div ng-hide="exp"></div>');
+      element = $compile(element)($rootScope);
+      angular.forEach(cases, function(value) {
+        $rootScope.exp = value;
+        $rootScope.$digest();
+        expect(element)[value ? 'toBeHidden' : 'toBeShown']();
+      });
+    }));
   });
 });