diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js index 3513b78e..7c4baa73 100644 --- a/src/ng/directive/ngShowHide.js +++ b/src/ng/directive/ngShowHide.js @@ -6,8 +6,8 @@ * * @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 + * 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}). * @@ -19,13 +19,13 @@ *
* ``` * - * When the ngShow expression evaluates to a falsy value then the ng-hide CSS class is added to the class - * attribute on the element causing it to become hidden. When truthy, the ng-hide CSS class is removed + * When the `ngShow` expression evaluates to a falsy value then the `.ng-hide` CSS class is added to the class + * attribute on the element causing it to become hidden. When truthy, 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 + * 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. @@ -34,7 +34,7 @@ * 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 + * ### Overriding `.ng-hide` * * By default, the `.ng-hide` class will style the element with `display:none!important`. If you wish to change * the hide behavior with ngShow/ngHide then this can be achieved by restating the styles for the `.ng-hide` @@ -52,7 +52,7 @@ * * By default you don't need to override in CSS anything and the animations will work around the display style. * - * ## A note about animations with ngShow + * ## 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 @@ -85,8 +85,8 @@ * property to block during animation states--ngAnimate will handle the style toggling automatically for you. * * @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 + * 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 @@ -174,7 +174,7 @@ var ngShowDirective = ['$animate', function($animate) { * * @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 + * 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}). @@ -187,13 +187,13 @@ var ngShowDirective = ['$animate', function($animate) { * * ``` * - * When the ngHide expression evaluates to a truthy value then the .ng-hide CSS class is added to the class - * attribute on the element causing it to become hidden. When falsy, the ng-hide CSS class is removed + * When the `ngHide` expression evaluates to a truthy value then the `.ng-hide` CSS class is added to the class + * attribute on the element causing it to become hidden. When falsy, 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 + * 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. @@ -202,7 +202,7 @@ var ngShowDirective = ['$animate', function($animate) { * 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 + * ### Overriding `.ng-hide` * * By default, the `.ng-hide` class will style the element with `display:none!important`. If you wish to change * the hide behavior with ngShow/ngHide then this can be achieved by restating the styles for the `.ng-hide` @@ -220,7 +220,7 @@ var ngShowDirective = ['$animate', function($animate) { * * By default you don't need to override in CSS anything and the animations will work around the display style. * - * ## A note about animations with ngHide + * ## 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 the `.ng-hide` @@ -244,8 +244,8 @@ var ngShowDirective = ['$animate', function($animate) { * property to block during animation states--ngAnimate will handle the style toggling automatically for you. * * @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 + * 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