fix(ng:show/ng:hide): use jqLite.show/jqLite.hide

Di Peng · IgorMinar · commit f3e04fbd6a3c · 2011-07-26T14:21:13.000-07:00
The previous implementation didn't handle situation when in css
something was hidden with a cascaded display:none rule and then we
wanted to show it.

Unfortunatelly our test doesn't test this scenario because it's too
complicated. :-/
diff --git a/src/Angular.js b/src/Angular.js
@@ -69,7 +69,6 @@ var _undefined        = undefined,
     $function         = 'function',
     $length           = 'length',
     $name             = 'name',
-    $none             = 'none',
     $noop             = 'noop',
     $null             = 'null',
     $number           = 'number',
diff --git a/src/directives.js b/src/directives.js
@@ -733,7 +733,7 @@ angularDirective("ng:class-even", ngClass(function(i){return i % 2 === 1;}));
 angularDirective("ng:show", function(expression, element){
   return function(element){
     this.$onEval(function(){
-      element.css($display, toBoolean(this.$eval(expression)) ? '' : $none);
+      toBoolean(this.$eval(expression)) ? element.show() : element.hide();
     }, element);
   };
 });
@@ -774,7 +774,7 @@ angularDirective("ng:show", function(expression, element){
 angularDirective("ng:hide", function(expression, element){
   return function(element){
     this.$onEval(function(){
-      element.css($display, toBoolean(this.$eval(expression)) ? $none : '');
+      toBoolean(this.$eval(expression)) ? element.hide() : element.show();
     }, element);
   };
 });
diff --git a/test/directivesSpec.js b/test/directivesSpec.js
@@ -252,22 +252,40 @@ describe("directive", function(){
     expect(element.hasClass('ng-exception')).toBeFalsy();
   });
 
-  it('should ng:show', function(){
-    var scope = compile('<div ng:hide="hide"></div>');
-    scope.$eval();
-    expect(isCssVisible(scope.$element)).toEqual(true);
-    scope.$set('hide', true);
-    scope.$eval();
-    expect(isCssVisible(scope.$element)).toEqual(false);
+
+  describe('ng:show', function() {
+    it('should show and hide an element', function(){
+      var element = jqLite('<div ng:show="exp"></div>'),
+          scope = compile(element);
+
+      expect(isCssVisible(element)).toEqual(false);
+      scope.exp = true;
+      scope.$eval();
+      expect(isCssVisible(element)).toEqual(true);
+    });
+
+
+    it('should make hidden element visible', function() {
+      var element = jqLite('<div style="display: none" ng:show="exp"></div>'),
+          scope = compile(element);
+
+      expect(isCssVisible(element)).toBe(false);
+      scope.exp = true;
+      scope.$eval();
+      expect(isCssVisible(element)).toBe(true);
+    });
   });
 
-  it('should ng:hide', function(){
-    var scope = compile('<div ng:show="show"></div>');
-    scope.$eval();
-    expect(isCssVisible(scope.$element)).toEqual(false);
-    scope.$set('show', true);
-    scope.$eval();
-    expect(isCssVisible(scope.$element)).toEqual(true);
+  describe('ng:hide', function() {
+    it('should hide an element', function(){
+      var element = jqLite('<div ng:hide="exp"></div>'),
+          scope = compile(element);
+
+      expect(isCssVisible(element)).toBe(true);
+      scope.exp = true;
+      scope.$eval();
+      expect(isCssVisible(element)).toBe(false);
+    });
   });
 
   describe('ng:controller', function(){
