diff options
| author | Misko Hevery | 2012-03-23 14:03:24 -0700 | 
|---|---|---|
| committer | Misko Hevery | 2012-03-28 11:16:35 -0700 | 
| commit | 2430f52bb97fa9d682e5f028c977c5bf94c5ec38 (patch) | |
| tree | e7529b741d70199f36d52090b430510bad07f233 /src/ng/directive/ngShowHide.js | |
| parent | 944098a4e0f753f06b40c73ca3e79991cec6c2e2 (diff) | |
| download | angular.js-2430f52bb97fa9d682e5f028c977c5bf94c5ec38.tar.bz2 | |
chore(module): move files around in preparation for more modules
Diffstat (limited to 'src/ng/directive/ngShowHide.js')
| -rw-r--r-- | src/ng/directive/ngShowHide.js | 80 | 
1 files changed, 80 insertions, 0 deletions
| diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js new file mode 100644 index 00000000..40a8a68e --- /dev/null +++ b/src/ng/directive/ngShowHide.js @@ -0,0 +1,80 @@ +'use strict'; + +/** + * @ngdoc directive + * @name angular.module.ng.$compileProvider.directive.ng-show + * + * @description + * The `ng-show` and `ng-hide` directives show or hide a portion of the DOM tree (HTML) + * conditionally. + * + * @element ANY + * @param {expression} ng-show If the {@link guide/dev_guide.expressions expression} is truthy + *     then the element is shown or hidden respectively. + * + * @example +   <doc:example> +     <doc:source> +        Click me: <input type="checkbox" ng-model="checked"><br/> +        Show: <span ng-show="checked">I show up when your checkbox is checked.</span> <br/> +        Hide: <span ng-hide="checked">I hide when your checkbox is checked.</span> +     </doc:source> +     <doc:scenario> +       it('should check ng-show / ng-hide', function() { +         expect(element('.doc-example-live span:first:hidden').count()).toEqual(1); +         expect(element('.doc-example-live span:last:visible').count()).toEqual(1); + +         input('checked').check(); + +         expect(element('.doc-example-live span:first:visible').count()).toEqual(1); +         expect(element('.doc-example-live span:last:hidden').count()).toEqual(1); +       }); +     </doc:scenario> +   </doc:example> + */ +//TODO(misko): refactor to remove element from the DOM +var ngShowDirective = ngDirective(function(scope, element, attr){ +  scope.$watch(attr.ngShow, function(value){ +    element.css('display', toBoolean(value) ? '' : 'none'); +  }); +}); + + +/** + * @ngdoc directive + * @name angular.module.ng.$compileProvider.directive.ng-hide + * + * @description + * The `ng-hide` and `ng-show` directives hide or show a portion + * of the HTML conditionally. + * + * @element ANY + * @param {expression} ng-hide If the {@link guide/dev_guide.expressions expression} truthy then + *     the element is shown or hidden respectively. + * + * @example +   <doc:example> +     <doc:source> +        Click me: <input type="checkbox" ng-model="checked"><br/> +        Show: <span ng-show="checked">I show up when you checkbox is checked?</span> <br/> +        Hide: <span ng-hide="checked">I hide when you checkbox is checked?</span> +     </doc:source> +     <doc:scenario> +       it('should check ng-show / ng-hide', function() { +         expect(element('.doc-example-live span:first:hidden').count()).toEqual(1); +         expect(element('.doc-example-live span:last:visible').count()).toEqual(1); + +         input('checked').check(); + +         expect(element('.doc-example-live span:first:visible').count()).toEqual(1); +         expect(element('.doc-example-live span:last:hidden').count()).toEqual(1); +       }); +     </doc:scenario> +   </doc:example> + */ +//TODO(misko): refactor to remove element from the DOM +var ngHideDirective = ngDirective(function(scope, element, attr){ +  scope.$watch(attr.ngHide, function(value){ +    element.css('display', toBoolean(value) ? 'none' : ''); +  }); +}); | 
