invisi/angular.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Wiki Activity

docs(ngShowHide): use backticks to denote CSS classes and directive names

Browse Source 
add backticks around directive names to improve documentation consistency, as it's used in some
parts of the docs already.

Closes #9081
This commit is contained in:
Peter Bacon Darwin
2014-09-15 20:38:50 +01:00
parent b4de7307c3
commit bf24ad144d
1 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ng/directive/ngShowHide.js
+17 -17
View File
@@ -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,8 +19,8 @@
* <div ng-show="myValue" class="ng-hide"></div>
* ```
*
* 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
* 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.
*
* <div class="alert alert-warning">
@@ -30,7 +30,7 @@
*
* ## 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.
@@ -39,7 +39,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`
@@ -57,7 +57,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
@@ -82,8 +82,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
@@ -163,7 +163,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}).
@@ -176,8 +176,8 @@ var ngShowDirective = ['$animate', function($animate) {
* <div ng-hide="myValue"></div>
* ```
*
* 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
* 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.
*
* <div class="alert alert-warning">
@@ -187,7 +187,7 @@ var ngShowDirective = ['$animate', function($animate) {
*
* ## 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.
@@ -196,7 +196,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`
@@ -214,7 +214,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`
@@ -238,8 +238,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