From f3e04fbd6a3ce9d84dec5052233a0712c2273859 Mon Sep 17 00:00:00 2001 From: Di Peng Date: Tue, 19 Jul 2011 11:45:34 -0700 Subject: fix(ng:show/ng:hide): use jqLite.show/jqLite.hide 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. :-/ --- src/Angular.js | 1 - src/directives.js | 4 ++-- test/directivesSpec.js | 46 ++++++++++++++++++++++++++++++++-------------- 3 files changed, 34 insertions(+), 17 deletions(-) diff --git a/src/Angular.js b/src/Angular.js index 28ece3d1..aeb1db4f 100644 --- 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 index d800aa80..d2f24a31 100644 --- 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 index 58e5053f..22d3c84b 100644 --- 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('
'); - 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('
'), + 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('
'), + 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('
'); - 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('
'), + scope = compile(element); + + expect(isCssVisible(element)).toBe(true); + scope.exp = true; + scope.$eval(); + expect(isCssVisible(element)).toBe(false); + }); }); describe('ng:controller', function(){ -- cgit v1.2.3