Skip to content

Commit bf24ad1

Browse files
docs(ngShowHide): use backticks to denote CSS classes and directive names
add backticks around directive names to improve documentation consistency, as it's used in some parts of the docs already. Closes angular#9081
1 parent b4de730 commit bf24ad1

File tree

1 file changed

+17
-17
lines changed

1 file changed

+17
-17
lines changed

src/ng/directive/ngShowHide.js

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
*
77
* @description
88
* The `ngShow` directive shows or hides the given HTML element based on the expression
9-
* provided to the ngShow attribute. The element is shown or hidden by removing or adding
10-
* the `ng-hide` CSS class onto the element. The `.ng-hide` CSS class is predefined
9+
* provided to the `ngShow` attribute. The element is shown or hidden by removing or adding
10+
* the `.ng-hide` CSS class onto the element. The `.ng-hide` CSS class is predefined
1111
* in AngularJS and sets the display style to none (using an !important flag).
1212
* For CSP mode please add `angular-csp.css` to your html file (see {@link ng.directive:ngCsp ngCsp}).
1313
*
@@ -19,8 +19,8 @@
1919
* <div ng-show="myValue" class="ng-hide"></div>
2020
* ```
2121
*
22-
* When the ngShow expression evaluates to false then the ng-hide CSS class is added to the class attribute
23-
* on the element causing it to become hidden. When true, the ng-hide CSS class is removed
22+
* When the `ngShow` expression evaluates to false then the `.ng-hide` CSS class is added to the class attribute
23+
* on the element causing it to become hidden. When true, the `.ng-hide` CSS class is removed
2424
* from the element causing the element not to appear hidden.
2525
*
2626
* <div class="alert alert-warning">
@@ -30,7 +30,7 @@
3030
*
3131
* ## Why is !important used?
3232
*
33-
* You may be wondering why !important is used for the .ng-hide CSS class. This is because the `.ng-hide` selector
33+
* You may be wondering why !important is used for the `.ng-hide` CSS class. This is because the `.ng-hide` selector
3434
* can be easily overridden by heavier selectors. For example, something as simple
3535
* as changing the display style on a HTML list item would make hidden elements appear visible.
3636
* This also becomes a bigger issue when dealing with CSS frameworks.
@@ -39,7 +39,7 @@
3939
* specificity (when !important isn't used with any conflicting styles). If a developer chooses to override the
4040
* styling to change how to hide an element then it is just a matter of using !important in their own CSS code.
4141
*
42-
* ### Overriding .ng-hide
42+
* ### Overriding `.ng-hide`
4343
*
4444
* By default, the `.ng-hide` class will style the element with `display:none!important`. If you wish to change
4545
* the hide behavior with ngShow/ngHide then this can be achieved by restating the styles for the `.ng-hide`
@@ -57,7 +57,7 @@
5757
*
5858
* By default you don't need to override in CSS anything and the animations will work around the display style.
5959
*
60-
* ## A note about animations with ngShow
60+
* ## A note about animations with `ngShow`
6161
*
6262
* Animations in ngShow/ngHide work with the show and hide events that are triggered when the directive expression
6363
* is true and false. This system works like the animation system present with ngClass except that
@@ -82,8 +82,8 @@
8282
* property to block during animation states--ngAnimate will handle the style toggling automatically for you.
8383
*
8484
* @animations
85-
* addClass: .ng-hide - happens after the ngShow expression evaluates to a truthy value and the just before contents are set to visible
86-
* removeClass: .ng-hide - happens after the ngShow expression evaluates to a non truthy value and just before the contents are set to hidden
85+
* addClass: `.ng-hide` - happens after the `ngShow` expression evaluates to a truthy value and the just before contents are set to visible
86+
* removeClass: `.ng-hide` - happens after the `ngShow` expression evaluates to a non truthy value and just before the contents are set to hidden
8787
*
8888
* @element ANY
8989
* @param {expression} ngShow If the {@link guide/expression expression} is truthy
@@ -163,7 +163,7 @@ var ngShowDirective = ['$animate', function($animate) {
163163
*
164164
* @description
165165
* The `ngHide` directive shows or hides the given HTML element based on the expression
166-
* provided to the ngHide attribute. The element is shown or hidden by removing or adding
166+
* provided to the `ngHide` attribute. The element is shown or hidden by removing or adding
167167
* the `ng-hide` CSS class onto the element. The `.ng-hide` CSS class is predefined
168168
* in AngularJS and sets the display style to none (using an !important flag).
169169
* 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) {
176176
* <div ng-hide="myValue"></div>
177177
* ```
178178
*
179-
* When the ngHide expression evaluates to true then the .ng-hide CSS class is added to the class attribute
180-
* on the element causing it to become hidden. When false, the ng-hide CSS class is removed
179+
* When the `.ngHide` expression evaluates to true then the `.ng-hide` CSS class is added to the class attribute
180+
* on the element causing it to become hidden. When false, the `.ng-hide` CSS class is removed
181181
* from the element causing the element not to appear hidden.
182182
*
183183
* <div class="alert alert-warning">
@@ -187,7 +187,7 @@ var ngShowDirective = ['$animate', function($animate) {
187187
*
188188
* ## Why is !important used?
189189
*
190-
* You may be wondering why !important is used for the .ng-hide CSS class. This is because the `.ng-hide` selector
190+
* You may be wondering why !important is used for the `.ng-hide` CSS class. This is because the `.ng-hide` selector
191191
* can be easily overridden by heavier selectors. For example, something as simple
192192
* as changing the display style on a HTML list item would make hidden elements appear visible.
193193
* This also becomes a bigger issue when dealing with CSS frameworks.
@@ -196,7 +196,7 @@ var ngShowDirective = ['$animate', function($animate) {
196196
* specificity (when !important isn't used with any conflicting styles). If a developer chooses to override the
197197
* styling to change how to hide an element then it is just a matter of using !important in their own CSS code.
198198
*
199-
* ### Overriding .ng-hide
199+
* ### Overriding `.ng-hide`
200200
*
201201
* By default, the `.ng-hide` class will style the element with `display:none!important`. If you wish to change
202202
* 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) {
214214
*
215215
* By default you don't need to override in CSS anything and the animations will work around the display style.
216216
*
217-
* ## A note about animations with ngHide
217+
* ## A note about animations with `ngHide`
218218
*
219219
* Animations in ngShow/ngHide work with the show and hide events that are triggered when the directive expression
220220
* 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) {
238238
* property to block during animation states--ngAnimate will handle the style toggling automatically for you.
239239
*
240240
* @animations
241-
* removeClass: .ng-hide - happens after the ngHide expression evaluates to a truthy value and just before the contents are set to hidden
242-
* addClass: .ng-hide - happens after the ngHide expression evaluates to a non truthy value and just before the contents are set to visible
241+
* removeClass: `.ng-hide` - happens after the `ngHide` expression evaluates to a truthy value and just before the contents are set to hidden
242+
* addClass: `.ng-hide` - happens after the `ngHide` expression evaluates to a non truthy value and just before the contents are set to visible
243243
*
244244
* @element ANY
245245
* @param {expression} ngHide If the {@link guide/expression expression} is truthy then

0 commit comments

Comments
 (0)