6
6
*
7
7
* @description
8
8
* 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
11
11
* in AngularJS and sets the display style to none (using an !important flag).
12
12
* For CSP mode please add `angular-csp.css` to your html file (see {@link ng.directive:ngCsp ngCsp}).
13
13
*
19
19
* <div ng-show="myValue" class="ng-hide"></div>
20
20
* ```
21
21
*
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
24
24
* from the element causing the element not to appear hidden.
25
25
*
26
26
* <div class="alert alert-warning">
30
30
*
31
31
* ## Why is !important used?
32
32
*
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
34
34
* can be easily overridden by heavier selectors. For example, something as simple
35
35
* as changing the display style on a HTML list item would make hidden elements appear visible.
36
36
* This also becomes a bigger issue when dealing with CSS frameworks.
39
39
* specificity (when !important isn't used with any conflicting styles). If a developer chooses to override the
40
40
* styling to change how to hide an element then it is just a matter of using !important in their own CSS code.
41
41
*
42
- * ### Overriding .ng-hide
42
+ * ### Overriding ` .ng-hide`
43
43
*
44
44
* By default, the `.ng-hide` class will style the element with `display:none!important`. If you wish to change
45
45
* the hide behavior with ngShow/ngHide then this can be achieved by restating the styles for the `.ng-hide`
57
57
*
58
58
* By default you don't need to override in CSS anything and the animations will work around the display style.
59
59
*
60
- * ## A note about animations with ngShow
60
+ * ## A note about animations with ` ngShow`
61
61
*
62
62
* Animations in ngShow/ngHide work with the show and hide events that are triggered when the directive expression
63
63
* is true and false. This system works like the animation system present with ngClass except that
82
82
* property to block during animation states--ngAnimate will handle the style toggling automatically for you.
83
83
*
84
84
* @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
87
87
*
88
88
* @element ANY
89
89
* @param {expression } ngShow If the {@link guide/expression expression} is truthy
@@ -163,7 +163,7 @@ var ngShowDirective = ['$animate', function($animate) {
163
163
*
164
164
* @description
165
165
* 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
167
167
* the `ng-hide` CSS class onto the element. The `.ng-hide` CSS class is predefined
168
168
* in AngularJS and sets the display style to none (using an !important flag).
169
169
* 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) {
176
176
* <div ng-hide="myValue"></div>
177
177
* ```
178
178
*
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
181
181
* from the element causing the element not to appear hidden.
182
182
*
183
183
* <div class="alert alert-warning">
@@ -187,7 +187,7 @@ var ngShowDirective = ['$animate', function($animate) {
187
187
*
188
188
* ## Why is !important used?
189
189
*
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
191
191
* can be easily overridden by heavier selectors. For example, something as simple
192
192
* as changing the display style on a HTML list item would make hidden elements appear visible.
193
193
* This also becomes a bigger issue when dealing with CSS frameworks.
@@ -196,7 +196,7 @@ var ngShowDirective = ['$animate', function($animate) {
196
196
* specificity (when !important isn't used with any conflicting styles). If a developer chooses to override the
197
197
* styling to change how to hide an element then it is just a matter of using !important in their own CSS code.
198
198
*
199
- * ### Overriding .ng-hide
199
+ * ### Overriding ` .ng-hide`
200
200
*
201
201
* By default, the `.ng-hide` class will style the element with `display:none!important`. If you wish to change
202
202
* 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) {
214
214
*
215
215
* By default you don't need to override in CSS anything and the animations will work around the display style.
216
216
*
217
- * ## A note about animations with ngHide
217
+ * ## A note about animations with ` ngHide`
218
218
*
219
219
* Animations in ngShow/ngHide work with the show and hide events that are triggered when the directive expression
220
220
* 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) {
238
238
* property to block during animation states--ngAnimate will handle the style toggling automatically for you.
239
239
*
240
240
* @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
243
243
*
244
244
* @element ANY
245
245
* @param {expression } ngHide If the {@link guide/expression expression} is truthy then
0 commit comments