angular.js -

diff options

author	Shyam Seshadri	2012-10-25 20:57:15 +0530
committer	Igor Minar	2012-10-31 13:06:16 -0700
commit	295af335c1403d848413ec674cecb597f3d8bcf5 (patch)
tree	f1eb5c94166f2be3a14ebce1c74d9a032c45af6c /docs/content/tutorial/step_11.ngdoc
parent	2c2e18c37a7a93d81a3a36c7b94f6330a344325b (diff)
download	angular.js-295af335c1403d848413ec674cecb597f3d8bcf5.tar.bz2

feat(docs): add plunkr support

Add option to edit source in Angular Docs in Plunkr in addition to JsFiddle

Diffstat (limited to 'docs/content/tutorial/step_11.ngdoc')

0 files changed, 0 insertions, 0 deletions

'use strict'; /** * @ngdoc directive * @name ng.directive:ngShow * * @description * The `ngShow` directive shows or hides the given HTML element based on the expression * provided to the ngShow attribute. The element is shown or hidden by removing or adding * the `ng-hide` CSS class onto the element. The `.ng-hide` CSS class is predefined * in AngularJS and sets the display style to none (using an !important flag). * For CSP mode please add `angular-csp.css` to your html file (see {@link ng.directive:ngCsp ngCsp}). * * <pre> *  * <div ng-show="myValue"></div> * *  * <div ng-show="myValue" class="ng-hide"></div> * </pre> * * When the ngShow expression evaluates to false then the ng-hide CSS class is added to the class attribute * on the element causing it to become hidden. When true, the ng-hide CSS class is removed * from the element causing the element not to appear hidden. * * ## Why is !important used? * * You may be wondering why !important is used for the .ng-hide CSS class. This is because the `.ng-hide` selector * can be easily overridden by heavier selectors. For example, something as simple * as changing the display style on a HTML list item would make hidden elements appear visible. * This also becomes a bigger issue when dealing with CSS frameworks. * * By using !important, the show and hide behavior will work as expected despite any clash between CSS selector * specificity (when !important isn't used with any conflicting styles). If a developer chooses to override the * styling to change how to hide an element then it is just a matter of using !important in their own CSS code. * * ### Overriding .ng-hide * * If you wish to change the hide behavior with ngShow/ngHide then this can be achieved by * restating the styles for the .ng-hide class in CSS: * <pre> * .ng-hide { * //!annotate CSS Specificity|Not to worry, this will override the AngularJS default... * display:block!important; * * //this is just another form of hiding an element * position:absolute; * top:-9999px; * left:-9999px; * } * </pre> * * Just remember to include the important flag so the CSS override will function. * * ## A note about animations with ngShow * * Animations in ngShow/ngHide work with the show and hide events that are triggered when the directive expression * is true and false. This system works like the animation system present with ngClass except that * you must also include the !important flag to override the display property * so that you can perform an animation when the element is hidden during the time of the animation. * * <pre> * // * //a working example can be found at the bottom of this page * // * .my-element.ng-hide-add, .my-element.ng-hide-remove { * transition:0.5s linear all; * display:block!important; * } * * .my-element.ng-hide-add { ... } * .my-element.ng-hide-add.ng-hide-add-active { ... } * .my-element.ng-hide-remove { ... } * .my-element.ng-hide-remove.ng-hide-remove-active { ... } * </pre> * * @animations * addClass: .ng-hide - happens after the ngShow expression evaluates to a truthy value and the just before contents are set to visible * removeClass: .ng-hide - happens after the ngShow expression evaluates to a non truthy value and just before the contents are set to hidden * * @element ANY * @param {expression} ngShow If the {@link guide/expression expression} is truthy * then the element is shown or hidden respectively. * * @example <example animations="true"> <file name="index.html"> Click me: <input type="checkbox" ng-model="checked"><br/> <div> Show: <div class="check-element animate-show" ng-show="checked"> <span class="icon-thumbs-up"></span> I show up when your checkbox is checked. </div> </div> <div> Hide: <div class="check-element animate-show" ng-hide="checked"> <span class="icon-thumbs-down"></span> I hide when your checkbox is checked. </div> </div> </file> <file name="animations.css"> .animate-show { -webkit-transition:all linear 0.5s; transition:all linear 0.5s; line-height:20px; opacity:1; padding:10px; border:1px solid black; background:white; } .animate-show.ng-hide-add, .animate-show.ng-hide-remove { display:block!important; } .animate-show.ng-hide { line-height:0; opacity:0; padding:0 10px; } .check-element { padding:10px; border:1px solid black; background:white; } </file> <file name="scenario.js"> 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); }); </file> </example> */ 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'); }); }; }]; /** * @ngdoc directive * @name ng.directive:ngHide * * @description * The `ngHide` directive shows or hides the given HTML element based on the expression * provided to the ngHide attribute. The element is shown or hidden by removing or adding * the `ng-hide` CSS class onto the element. The `.ng-hide` CSS class is predefined * in AngularJS and sets the display style to none (using an !important flag). * For CSP mode please add `angular-csp.css` to your html file (see {@link ng.directive:ngCsp ngCsp}). * * <pre> *  * <div ng-hide="myValue"></div> * *  * <div ng-hide="myValue" class="ng-hide"></div> * </pre> * * When the ngHide expression evaluates to true then the .ng-hide CSS class is added to the class attribute * on the element causing it to become hidden. When false, the ng-hide CSS class is removed * from the element causing the element not to appear hidden. * * ## Why is !important used? * * You may be wondering why !important is used for the .ng-hide CSS class. This is because the `.ng-hide` selector * can be easily overridden by heavier selectors. For example, something as simple * as changing the display style on a HTML list item would make hidden elements appear visible. * This also becomes a bigger issue when dealing with CSS frameworks. * * By using !important, the show and hide behavior will work as expected despite any clash between CSS selector * specificity (when !important isn't used with any conflicting styles). If a developer chooses to override the * styling to change how to hide an element then it is just a matter of using !important in their own CSS code. * * ### Overriding .ng-hide * * If you wish to change the hide behavior with ngShow/ngHide then this can be achieved by * restating the styles for the .ng-hide class in CSS: * <pre> * .ng-hide { * //!annotate CSS Specificity|Not to worry, this will override the AngularJS default... * display:block!important; * * //this is just another form of hiding an element * position:absolute; * top:-9999px; * left:-9999px; * } * </pre> * * Just remember to include the important flag so the CSS override will function. * * ## A note about animations with ngHide * * Animations in ngShow/ngHide work with the show and hide events that are triggered when the directive expression * is true and false. This system works like the animation system present with ngClass, except that * you must also include the !important flag to override the display property so * that you can perform an animation when the element is hidden during the time of the animation. * * <pre> * // * //a working example can be found at the bottom of this page * // * .my-element.ng-hide-add, .my-element.ng-hide-remove { * transition:0.5s linear all; * display:block!important; * } * * .my-element.ng-hide-add { ... } * .my-element.ng-hide-add.ng-hide-add-active { ... } * .my-element.ng-hide-remove { ... } * .my-element.ng-hide-remove.ng-hide-remove-active { ... } * </pre> * * @animations * removeClass: .ng-hide - happens after the ngHide expression evaluates to a truthy value and just before the contents are set to hidden * addClass: .ng-hide - happens after the ngHide expression evaluates to a non truthy value and just before the contents are set to visible * * @element ANY * @param {expression} ngHide If the {@link guide/expression expression} is truthy then * the element is shown or hidden respectively. * * @example <example animations="true"> <file name="index.html"> Click me: <input type="checkbox" ng-model="checked"><br/> <div> Show: <div class="check-element animate-hide" ng-show="checked"> <span class="icon-thumbs-up"></span> I show up when your checkbox is checked. </div> </div> <div> Hide: <div class="check-element animate-hide" ng-hide="checked"> <span class="icon-thumbs-down"></span> I hide when your checkbox is checked. </div> </div> </file> <file name="animations.css"> .animate-hide { -webkit-transition:all linear 0.5s; transition:all linear 0.5s; line-height:20px; opacity:1; padding:10px; border:1px solid black; background:white; } .animate-hide.ng-hide-add, .animate-hide.ng-hide-remove { display:block!important; } .animate-hide.ng-hide { line-height:0; opacity:0; padding:0 10px; } .check-element { padding:10px; border:1px solid black; background:white; } </file> <file name="scenario.js"> it('should check ng-show / ng-hide', function() { expect(element('.doc-example-live .check-element:first:hidden').count()).toEqual(1); expect(element('.doc-example-live .check-element:last:visible').count()).toEqual(1); input('checked').check(); expect(element('.doc-example-live .check-element:first:visible').count()).toEqual(1); expect(element('.doc-example-live .check-element:last:hidden').count()).toEqual(1); }); </file> </example> */ 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'); }); }; }];


context:
space:
mode: