@angular-wave/angular.ts 0.0.66 → 0.0.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/angular-ts.esm.js +2 -2
- package/dist/angular-ts.umd.js +2 -2
- package/package.json +1 -1
- package/src/animations/animate-js.js +4 -4
- package/src/animations/animate-swap.js +3 -0
- package/src/core/compile/compile.js +3 -3
- package/src/core/controller/controller.js +0 -5
- package/src/core/di/injector.js +9 -12
- package/src/core/di/internal-injector.js +113 -60
- package/src/core/interval/interval-factory.js +8 -1
- package/src/core/interval/interval.js +30 -16
- package/src/core/location/location.js +473 -626
- package/src/core/location/location.md +114 -0
- package/src/core/location/location.spec.js +1 -76
- package/src/core/parser/parse.js +1 -12
- package/src/core/parser/parse.spec.js +96 -110
- package/src/core/q/q.js +63 -65
- package/src/core/sce/sce.js +1 -3
- package/src/core/scope/scope.js +2 -5
- package/src/core/timeout/timeout.js +110 -111
- package/src/core/url-utils/url-utils.js +5 -0
- package/src/directive/input/input.js +32 -726
- package/src/directive/input/input.md +706 -0
- package/src/directive/options/options.js +2 -156
- package/src/directive/options/options.md +179 -0
- package/src/directive/select/select.js +55 -126
- package/src/directive/select/select.md +74 -0
- package/src/directive/show-hide/show-hide.js +13 -224
- package/src/directive/show-hide/show-hide.md +257 -0
- package/src/exts/messages/messages.js +2 -0
- package/src/filters/limit-to.spec.js +1 -1
- package/src/filters/order-by.spec.js +1 -1
- package/src/index.js +6 -2
- package/src/loader.js +7 -3
- package/src/public.js +1 -7
- package/src/router/params/param.js +54 -54
- package/src/router/path/path-utils.js +1 -0
- package/src/router/state/state-builder.js +2 -4
- package/src/router/state/state-service.js +1 -1
- package/src/router/state-provider.js +1 -1
- package/src/router/template-factory.js +10 -10
- package/src/router/url/url-service.js +11 -4
- package/src/services/anchor-scroll.js +3 -5
- package/src/services/browser.js +2 -9
- package/src/services/cache-factory.js +0 -67
- package/src/services/cache-factory.md +75 -0
- package/src/services/cookie-reader.js +36 -55
- package/src/services/http/http.js +62 -587
- package/src/services/http/http.md +413 -0
- package/src/services/http-backend/http-backend.js +19 -44
- package/src/services/template-request.js +1 -9
- package/src/shared/jqlite/jqlite.js +5 -70
- package/src/types.js +2 -4
- package/types/animations/animate-swap.d.ts +4 -7
- package/types/core/compile/compile.d.ts +6 -6
- package/types/core/controller/controller.d.ts +0 -5
- package/types/core/di/internal-injector.d.ts +73 -18
- package/types/core/exception-handler.d.ts +1 -1
- package/types/core/interval/interval-factory.d.ts +1 -1
- package/types/core/interval/interval.d.ts +4 -0
- package/types/core/location/location.d.ts +235 -166
- package/types/core/parser/parse.d.ts +1 -1
- package/types/core/q/q.d.ts +61 -40
- package/types/core/scope/scope.d.ts +5 -8
- package/types/core/timeout/timeout.d.ts +16 -26
- package/types/core/url-utils/url-utils.d.ts +4 -0
- package/types/directive/input/input.d.ts +19 -124
- package/types/directive/select/select.d.ts +7 -74
- package/types/directive/show-hide/show-hide.d.ts +11 -224
- package/types/loader.d.ts +4 -4
- package/types/router/params/param.d.ts +11 -0
- package/types/router/state/state-builder.d.ts +1 -2
- package/types/router/state/state-service.d.ts +2 -2
- package/types/router/state-provider.d.ts +2 -2
- package/types/router/template-factory.d.ts +15 -15
- package/types/router/url/url-service.d.ts +12 -12
- package/types/services/anchor-scroll.d.ts +1 -1
- package/types/services/browser.d.ts +0 -10
- package/types/services/cache-factory.d.ts +0 -67
- package/types/services/cookie-reader.d.ts +2 -10
- package/types/services/http/http.d.ts +53 -61
- package/types/services/http-backend/http-backend.d.ts +8 -31
- package/types/services/template-request.d.ts +1 -9
- package/types/shared/jqlite/jqlite.d.ts +11 -11
- package/types/types.d.ts +1 -9
|
@@ -1,119 +1,12 @@
|
|
|
1
1
|
const NG_HIDE_CLASS = "ng-hide";
|
|
2
2
|
const NG_HIDE_IN_PROGRESS_CLASS = "ng-hide-animate";
|
|
3
|
-
/**
|
|
4
|
-
* @ngdoc directive
|
|
5
|
-
* @name ngShow
|
|
6
|
-
* @multiElement
|
|
7
|
-
*
|
|
8
|
-
* @description
|
|
9
|
-
* The `ngShow` directive shows or hides the given HTML element based on the expression provided to
|
|
10
|
-
* the `ngShow` attribute.
|
|
11
|
-
*
|
|
12
|
-
* The element is shown or hidden by removing or adding the `.ng-hide` CSS class onto the element.
|
|
13
|
-
* The `.ng-hide` CSS class is predefined in AngularJS and sets the display style to none (using an
|
|
14
|
-
* `!important` flag). For CSP mode please add `angular-csp.css` to your HTML file (see
|
|
15
|
-
* {@link ng.directive:ngCsp ngCsp}).
|
|
16
|
-
*
|
|
17
|
-
* ```html
|
|
18
|
-
* <!-- when $scope.myValue is truthy (element is visible) -->
|
|
19
|
-
* <div ng-show="myValue"></div>
|
|
20
|
-
*
|
|
21
|
-
* <!-- when $scope.myValue is falsy (element is hidden) -->
|
|
22
|
-
* <div ng-show="myValue" class="ng-hide"></div>
|
|
23
|
-
* ```
|
|
24
|
-
*
|
|
25
|
-
* When the `ngShow` expression evaluates to a falsy value then the `.ng-hide` CSS class is added
|
|
26
|
-
* to the class attribute on the element causing it to become hidden. When truthy, the `.ng-hide`
|
|
27
|
-
* CSS class is removed from the element causing the element not to appear hidden.
|
|
28
|
-
*
|
|
29
|
-
* ## Why is `!important` used?
|
|
30
|
-
*
|
|
31
|
-
* You may be wondering why `!important` is used for the `.ng-hide` CSS class. This is because the
|
|
32
|
-
* `.ng-hide` selector can be easily overridden by heavier selectors. For example, something as
|
|
33
|
-
* simple as changing the display style on a HTML list item would make hidden elements appear
|
|
34
|
-
* visible. This also becomes a bigger issue when dealing with CSS frameworks.
|
|
35
|
-
*
|
|
36
|
-
* By using `!important`, the show and hide behavior will work as expected despite any clash between
|
|
37
|
-
* CSS selector specificity (when `!important` isn't used with any conflicting styles). If a
|
|
38
|
-
* developer chooses to override the styling to change how to hide an element then it is just a
|
|
39
|
-
* matter of using `!important` in their own CSS code.
|
|
40
|
-
*
|
|
41
|
-
* ### Overriding `.ng-hide`
|
|
42
|
-
*
|
|
43
|
-
* By default, the `.ng-hide` class will style the element with `display: none !important`. If you
|
|
44
|
-
* wish to change the hide behavior with `ngShow`/`ngHide`, you can simply overwrite the styles for
|
|
45
|
-
* the `.ng-hide` CSS class. Note that the selector that needs to be used is actually
|
|
46
|
-
* `.ng-hide:not(.ng-hide-animate)` to cope with extra animation classes that can be added.
|
|
47
|
-
*
|
|
48
|
-
* ```css
|
|
49
|
-
* .ng-hide:not(.ng-hide-animate) {
|
|
50
|
-
* /* These are just alternative ways of hiding an element */
|
|
51
|
-
* display: block!important;
|
|
52
|
-
* position: absolute;
|
|
53
|
-
* top: -9999px;
|
|
54
|
-
* left: -9999px;
|
|
55
|
-
* }
|
|
56
|
-
* ```
|
|
57
|
-
*
|
|
58
|
-
* By default you don't need to override anything in CSS and the animations will work around the
|
|
59
|
-
* display style.
|
|
60
|
-
*
|
|
61
|
-
* @animations
|
|
62
|
-
* | Animation | Occurs |
|
|
63
|
-
* |-----------------------------------------------------|---------------------------------------------------------------------------------------------------------------|
|
|
64
|
-
* | {@link $animate#addClass addClass} `.ng-hide` | After the `ngShow` expression evaluates to a non truthy value and just before the contents are set to hidden. |
|
|
65
|
-
* | {@link $animate#removeClass removeClass} `.ng-hide` | After the `ngShow` expression evaluates to a truthy value and just before contents are set to visible. |
|
|
66
|
-
*
|
|
67
|
-
* Animations in `ngShow`/`ngHide` work with the show and hide events that are triggered when the
|
|
68
|
-
* directive expression is true and false. This system works like the animation system present with
|
|
69
|
-
* `ngClass` except that you must also include the `!important` flag to override the display
|
|
70
|
-
* property so that the elements are not actually hidden during the animation.
|
|
71
|
-
*
|
|
72
|
-
* ```css
|
|
73
|
-
* /* A working example can be found at the bottom of this page. */
|
|
74
|
-
* .my-element.ng-hide-add, .my-element.ng-hide-remove {
|
|
75
|
-
* transition: all 0.5s linear;
|
|
76
|
-
* }
|
|
77
|
-
*
|
|
78
|
-
* .my-element.ng-hide-add { ... }
|
|
79
|
-
* .my-element.ng-hide-add.ng-hide-add-active { ... }
|
|
80
|
-
* .my-element.ng-hide-remove { ... }
|
|
81
|
-
* .my-element.ng-hide-remove.ng-hide-remove-active { ... }
|
|
82
|
-
* ```
|
|
83
|
-
*
|
|
84
|
-
* Keep in mind that, as of AngularJS version 1.3, there is no need to change the display property
|
|
85
|
-
* to block during animation states - ngAnimate will automatically handle the style toggling for you.
|
|
86
|
-
*
|
|
87
|
-
* @element ANY
|
|
88
|
-
* @param {string} ngShow If the {@link guide/expression expression} is truthy/falsy then the
|
|
89
|
-
* element is shown/hidden respectively.
|
|
90
|
-
*
|
|
91
|
-
* @example
|
|
92
|
-
* A simple example, animating the element's opacity:
|
|
93
3
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
* @
|
|
97
|
-
*
|
|
98
|
-
* ### Flickering when using ngShow to toggle between elements
|
|
99
|
-
*
|
|
100
|
-
* When using {@link ngShow} and / or {@link ngHide} to toggle between elements, it can
|
|
101
|
-
* happen that both the element to show and the element to hide are visible for a very short time.
|
|
102
|
-
*
|
|
103
|
-
* This usually happens when the {@link ngAnimate ngAnimate module} is included, but no actual animations
|
|
104
|
-
* are defined for {@link ngShow} / {@link ngHide}.
|
|
105
|
-
*
|
|
106
|
-
* There are several way to mitigate this problem:
|
|
107
|
-
*
|
|
108
|
-
* - {@link guide/animations#how-to-selectively-enable-disable-and-skip-animations Disable animations on the affected elements}.
|
|
109
|
-
* - Use {@link ngIf} or {@link ngSwitch} instead of {@link ngShow} / {@link ngHide}.
|
|
110
|
-
* - Use the special CSS selector `ng-hide.ng-hide-animate` to set `{display: none}` or similar on the affected elements.
|
|
111
|
-
* - Use `ng-class="{'ng-hide': expression}` instead of instead of {@link ngShow} / {@link ngHide}.
|
|
112
|
-
* - Define an animation on the affected elements.
|
|
4
|
+
ngShowDirective.$inject = ["$animate"];
|
|
5
|
+
/**
|
|
6
|
+
* @returns {import('../../types').Directive}
|
|
113
7
|
*/
|
|
114
|
-
export
|
|
115
|
-
|
|
116
|
-
($animate) => ({
|
|
8
|
+
export function ngShowDirective($animate) {
|
|
9
|
+
return {
|
|
117
10
|
restrict: "A",
|
|
118
11
|
multiElement: true,
|
|
119
12
|
link(scope, element, attr) {
|
|
@@ -127,119 +20,15 @@ export const ngShowDirective = [
|
|
|
127
20
|
});
|
|
128
21
|
});
|
|
129
22
|
},
|
|
130
|
-
}
|
|
131
|
-
|
|
23
|
+
};
|
|
24
|
+
}
|
|
132
25
|
|
|
26
|
+
ngHideDirective.$inject = ["$animate"];
|
|
133
27
|
/**
|
|
134
|
-
* @
|
|
135
|
-
* @name ngHide
|
|
136
|
-
* @multiElement
|
|
137
|
-
*
|
|
138
|
-
* @description
|
|
139
|
-
* The `ngHide` directive shows or hides the given HTML element based on the expression provided to
|
|
140
|
-
* the `ngHide` attribute.
|
|
141
|
-
*
|
|
142
|
-
* The element is shown or hidden by removing or adding the `.ng-hide` CSS class onto the element.
|
|
143
|
-
* The `.ng-hide` CSS class is predefined in AngularJS and sets the display style to none (using an
|
|
144
|
-
* `!important` flag). For CSP mode please add `angular-csp.css` to your HTML file (see
|
|
145
|
-
* {@link ng.directive:ngCsp ngCsp}).
|
|
146
|
-
*
|
|
147
|
-
* ```html
|
|
148
|
-
* <!-- when $scope.myValue is truthy (element is hidden) -->
|
|
149
|
-
* <div ng-hide="myValue" class="ng-hide"></div>
|
|
150
|
-
*
|
|
151
|
-
* <!-- when $scope.myValue is falsy (element is visible) -->
|
|
152
|
-
* <div ng-hide="myValue"></div>
|
|
153
|
-
* ```
|
|
154
|
-
*
|
|
155
|
-
* When the `ngHide` expression evaluates to a truthy value then the `.ng-hide` CSS class is added
|
|
156
|
-
* to the class attribute on the element causing it to become hidden. When falsy, the `.ng-hide`
|
|
157
|
-
* CSS class is removed from the element causing the element not to appear hidden.
|
|
158
|
-
*
|
|
159
|
-
* ## Why is `!important` used?
|
|
160
|
-
*
|
|
161
|
-
* You may be wondering why `!important` is used for the `.ng-hide` CSS class. This is because the
|
|
162
|
-
* `.ng-hide` selector can be easily overridden by heavier selectors. For example, something as
|
|
163
|
-
* simple as changing the display style on a HTML list item would make hidden elements appear
|
|
164
|
-
* visible. This also becomes a bigger issue when dealing with CSS frameworks.
|
|
165
|
-
*
|
|
166
|
-
* By using `!important`, the show and hide behavior will work as expected despite any clash between
|
|
167
|
-
* CSS selector specificity (when `!important` isn't used with any conflicting styles). If a
|
|
168
|
-
* developer chooses to override the styling to change how to hide an element then it is just a
|
|
169
|
-
* matter of using `!important` in their own CSS code.
|
|
170
|
-
*
|
|
171
|
-
* ### Overriding `.ng-hide`
|
|
172
|
-
*
|
|
173
|
-
* By default, the `.ng-hide` class will style the element with `display: none !important`. If you
|
|
174
|
-
* wish to change the hide behavior with `ngShow`/`ngHide`, you can simply overwrite the styles for
|
|
175
|
-
* the `.ng-hide` CSS class. Note that the selector that needs to be used is actually
|
|
176
|
-
* `.ng-hide:not(.ng-hide-animate)` to cope with extra animation classes that can be added.
|
|
177
|
-
*
|
|
178
|
-
* ```css
|
|
179
|
-
* .ng-hide:not(.ng-hide-animate) {
|
|
180
|
-
* /* These are just alternative ways of hiding an element */
|
|
181
|
-
* display: block!important;
|
|
182
|
-
* position: absolute;
|
|
183
|
-
* top: -9999px;
|
|
184
|
-
* left: -9999px;
|
|
185
|
-
* }
|
|
186
|
-
* ```
|
|
187
|
-
*
|
|
188
|
-
* By default you don't need to override in CSS anything and the animations will work around the
|
|
189
|
-
* display style.
|
|
190
|
-
*
|
|
191
|
-
* @animations
|
|
192
|
-
* | Animation | Occurs |
|
|
193
|
-
* |-----------------------------------------------------|------------------------------------------------------------------------------------------------------------|
|
|
194
|
-
* | {@link $animate#addClass addClass} `.ng-hide` | After the `ngHide` expression evaluates to a truthy value and just before the contents are set to hidden. |
|
|
195
|
-
* | {@link $animate#removeClass removeClass} `.ng-hide` | After the `ngHide` expression evaluates to a non truthy value and just before contents are set to visible. |
|
|
196
|
-
*
|
|
197
|
-
* Animations in `ngShow`/`ngHide` work with the show and hide events that are triggered when the
|
|
198
|
-
* directive expression is true and false. This system works like the animation system present with
|
|
199
|
-
* `ngClass` except that you must also include the `!important` flag to override the display
|
|
200
|
-
* property so that the elements are not actually hidden during the animation.
|
|
201
|
-
*
|
|
202
|
-
* ```css
|
|
203
|
-
* /* A working example can be found at the bottom of this page. */
|
|
204
|
-
* .my-element.ng-hide-add, .my-element.ng-hide-remove {
|
|
205
|
-
* transition: all 0.5s linear;
|
|
206
|
-
* }
|
|
207
|
-
*
|
|
208
|
-
* .my-element.ng-hide-add { ... }
|
|
209
|
-
* .my-element.ng-hide-add.ng-hide-add-active { ... }
|
|
210
|
-
* .my-element.ng-hide-remove { ... }
|
|
211
|
-
* .my-element.ng-hide-remove.ng-hide-remove-active { ... }
|
|
212
|
-
* ```
|
|
213
|
-
*
|
|
214
|
-
* Keep in mind that, as of AngularJS version 1.3, there is no need to change the display property
|
|
215
|
-
* to block during animation states - ngAnimate will automatically handle the style toggling for you.
|
|
216
|
-
*
|
|
217
|
-
* @element ANY
|
|
218
|
-
* @param {string} ngHide If the {@link guide/expression expression} is truthy/falsy then the
|
|
219
|
-
* element is hidden/shown respectively.
|
|
220
|
-
*
|
|
221
|
-
* @knownIssue
|
|
222
|
-
*
|
|
223
|
-
* ### Flickering when using ngHide to toggle between elements
|
|
224
|
-
*
|
|
225
|
-
* When using {@link ngShow} and / or {@link ngHide} to toggle between elements, it can
|
|
226
|
-
* happen that both the element to show and the element to hide are visible for a very short time.
|
|
227
|
-
*
|
|
228
|
-
* This usually happens when the {@link ngAnimate ngAnimate module} is included, but no actual animations
|
|
229
|
-
* are defined for {@link ngShow} / {@link ngHide}. Internet Explorer is affected more often than
|
|
230
|
-
* other browsers.
|
|
231
|
-
*
|
|
232
|
-
* There are several way to mitigate this problem:
|
|
233
|
-
*
|
|
234
|
-
* - {@link guide/animations#how-to-selectively-enable-disable-and-skip-animations Disable animations on the affected elements}.
|
|
235
|
-
* - Use {@link ngIf} or {@link ngSwitch} instead of {@link ngShow} / {@link ngHide}.
|
|
236
|
-
* - Use the special CSS selector `ng-hide.ng-hide-animate` to set `{display: none}` or similar on the affected elements.
|
|
237
|
-
* - Use `ng-class="{'ng-hide': expression}` instead of instead of {@link ngShow} / {@link ngHide}.
|
|
238
|
-
* - Define an animation on the affected elements.
|
|
28
|
+
* @returns {import('../../types').Directive}
|
|
239
29
|
*/
|
|
240
|
-
export
|
|
241
|
-
|
|
242
|
-
($animate) => ({
|
|
30
|
+
export function ngHideDirective($animate) {
|
|
31
|
+
return {
|
|
243
32
|
restrict: "A",
|
|
244
33
|
multiElement: true,
|
|
245
34
|
link(scope, element, attr) {
|
|
@@ -251,5 +40,5 @@ export const ngHideDirective = [
|
|
|
251
40
|
});
|
|
252
41
|
});
|
|
253
42
|
},
|
|
254
|
-
}
|
|
255
|
-
|
|
43
|
+
};
|
|
44
|
+
}
|
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
/\*\*
|
|
2
|
+
|
|
3
|
+
- @ngdoc directive
|
|
4
|
+
- @name ngShow
|
|
5
|
+
- @multiElement
|
|
6
|
+
-
|
|
7
|
+
- @description
|
|
8
|
+
- The `ngShow` directive shows or hides the given HTML element based on the expression provided to
|
|
9
|
+
- the `ngShow` attribute.
|
|
10
|
+
-
|
|
11
|
+
- The element is shown or hidden by removing or adding the `.ng-hide` CSS class onto the element.
|
|
12
|
+
- The `.ng-hide` CSS class is predefined in AngularJS and sets the display style to none (using an
|
|
13
|
+
- `!important` flag). For CSP mode please add `angular-csp.css` to your HTML file (see
|
|
14
|
+
- {@link ng.directive:ngCsp ngCsp}).
|
|
15
|
+
-
|
|
16
|
+
- ```html
|
|
17
|
+
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
- <!-- when $scope.myValue is truthy (element is visible) -->
|
|
21
|
+
- <div ng-show="myValue"></div>
|
|
22
|
+
-
|
|
23
|
+
- <!-- when $scope.myValue is falsy (element is hidden) -->
|
|
24
|
+
- <div ng-show="myValue" class="ng-hide"></div>
|
|
25
|
+
- ```
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
-
|
|
30
|
+
- When the `ngShow` expression evaluates to a falsy value then the `.ng-hide` CSS class is added
|
|
31
|
+
- to the class attribute on the element causing it to become hidden. When truthy, the `.ng-hide`
|
|
32
|
+
- CSS class is removed from the element causing the element not to appear hidden.
|
|
33
|
+
-
|
|
34
|
+
- ## Why is `!important` used?
|
|
35
|
+
-
|
|
36
|
+
- You may be wondering why `!important` is used for the `.ng-hide` CSS class. This is because the
|
|
37
|
+
- `.ng-hide` selector can be easily overridden by heavier selectors. For example, something as
|
|
38
|
+
- simple as changing the display style on a HTML list item would make hidden elements appear
|
|
39
|
+
- visible. This also becomes a bigger issue when dealing with CSS frameworks.
|
|
40
|
+
-
|
|
41
|
+
- By using `!important`, the show and hide behavior will work as expected despite any clash between
|
|
42
|
+
- CSS selector specificity (when `!important` isn't used with any conflicting styles). If a
|
|
43
|
+
- developer chooses to override the styling to change how to hide an element then it is just a
|
|
44
|
+
- matter of using `!important` in their own CSS code.
|
|
45
|
+
-
|
|
46
|
+
- ### Overriding `.ng-hide`
|
|
47
|
+
-
|
|
48
|
+
- By default, the `.ng-hide` class will style the element with `display: none !important`. If you
|
|
49
|
+
- wish to change the hide behavior with `ngShow`/`ngHide`, you can simply overwrite the styles for
|
|
50
|
+
- the `.ng-hide` CSS class. Note that the selector that needs to be used is actually
|
|
51
|
+
- `.ng-hide:not(.ng-hide-animate)` to cope with extra animation classes that can be added.
|
|
52
|
+
-
|
|
53
|
+
- ```css
|
|
54
|
+
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
- .ng-hide:not(.ng-hide-animate) {
|
|
58
|
+
- /\* These are just alternative ways of hiding an element \*/
|
|
59
|
+
- display: block!important;
|
|
60
|
+
- position: absolute;
|
|
61
|
+
- top: -9999px;
|
|
62
|
+
- left: -9999px;
|
|
63
|
+
- }
|
|
64
|
+
- ```
|
|
65
|
+
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
-
|
|
69
|
+
- By default you don't need to override anything in CSS and the animations will work around the
|
|
70
|
+
- display style.
|
|
71
|
+
-
|
|
72
|
+
- @animations
|
|
73
|
+
- | Animation | Occurs |
|
|
74
|
+
- |-----------------------------------------------------|---------------------------------------------------------------------------------------------------------------|
|
|
75
|
+
- | {@link $animate#addClass addClass} `.ng-hide` | After the `ngShow` expression evaluates to a non truthy value and just before the contents are set to hidden. |
|
|
76
|
+
- | {@link $animate#removeClass removeClass} `.ng-hide` | After the `ngShow` expression evaluates to a truthy value and just before contents are set to visible. |
|
|
77
|
+
-
|
|
78
|
+
- Animations in `ngShow`/`ngHide` work with the show and hide events that are triggered when the
|
|
79
|
+
- directive expression is true and false. This system works like the animation system present with
|
|
80
|
+
- `ngClass` except that you must also include the `!important` flag to override the display
|
|
81
|
+
- property so that the elements are not actually hidden during the animation.
|
|
82
|
+
-
|
|
83
|
+
- ```css
|
|
84
|
+
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
- /\* A working example can be found at the bottom of this page. \*/
|
|
88
|
+
- .my-element.ng-hide-add, .my-element.ng-hide-remove {
|
|
89
|
+
- transition: all 0.5s linear;
|
|
90
|
+
- }
|
|
91
|
+
-
|
|
92
|
+
- .my-element.ng-hide-add { ... }
|
|
93
|
+
- .my-element.ng-hide-add.ng-hide-add-active { ... }
|
|
94
|
+
- .my-element.ng-hide-remove { ... }
|
|
95
|
+
- .my-element.ng-hide-remove.ng-hide-remove-active { ... }
|
|
96
|
+
- ```
|
|
97
|
+
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
-
|
|
101
|
+
- Keep in mind that, as of AngularJS version 1.3, there is no need to change the display property
|
|
102
|
+
- to block during animation states - ngAnimate will automatically handle the style toggling for you.
|
|
103
|
+
-
|
|
104
|
+
- @element ANY
|
|
105
|
+
- @param {string} ngShow If the {@link guide/expression expression} is truthy/falsy then the
|
|
106
|
+
- element is shown/hidden respectively.
|
|
107
|
+
-
|
|
108
|
+
- @example
|
|
109
|
+
- A simple example, animating the element's opacity:
|
|
110
|
+
|
|
111
|
+
- <hr />
|
|
112
|
+
-
|
|
113
|
+
- @knownIssue
|
|
114
|
+
-
|
|
115
|
+
- ### Flickering when using ngShow to toggle between elements
|
|
116
|
+
-
|
|
117
|
+
- When using {@link ngShow} and / or {@link ngHide} to toggle between elements, it can
|
|
118
|
+
- happen that both the element to show and the element to hide are visible for a very short time.
|
|
119
|
+
-
|
|
120
|
+
- This usually happens when the {@link ngAnimate ngAnimate module} is included, but no actual animations
|
|
121
|
+
- are defined for {@link ngShow} / {@link ngHide}.
|
|
122
|
+
-
|
|
123
|
+
- There are several way to mitigate this problem:
|
|
124
|
+
-
|
|
125
|
+
- - {@link guide/animations#how-to-selectively-enable-disable-and-skip-animations Disable animations on the affected elements}.
|
|
126
|
+
- - Use {@link ngIf} or {@link ngSwitch} instead of {@link ngShow} / {@link ngHide}.
|
|
127
|
+
- - Use the special CSS selector `ng-hide.ng-hide-animate` to set `{display: none}` or similar on the affected elements.
|
|
128
|
+
- - Use `ng-class="{'ng-hide': expression}` instead of instead of {@link ngShow} / {@link ngHide}.
|
|
129
|
+
- - Define an animation on the affected elements.
|
|
130
|
+
\*/
|
|
131
|
+
|
|
132
|
+
/\*\*
|
|
133
|
+
|
|
134
|
+
- @ngdoc directive
|
|
135
|
+
- @name ngHide
|
|
136
|
+
- @multiElement
|
|
137
|
+
-
|
|
138
|
+
- @description
|
|
139
|
+
- The `ngHide` directive shows or hides the given HTML element based on the expression provided to
|
|
140
|
+
- the `ngHide` attribute.
|
|
141
|
+
-
|
|
142
|
+
- The element is shown or hidden by removing or adding the `.ng-hide` CSS class onto the element.
|
|
143
|
+
- The `.ng-hide` CSS class is predefined in AngularJS and sets the display style to none (using an
|
|
144
|
+
- `!important` flag). For CSP mode please add `angular-csp.css` to your HTML file (see
|
|
145
|
+
- {@link ng.directive:ngCsp ngCsp}).
|
|
146
|
+
-
|
|
147
|
+
- ```html
|
|
148
|
+
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
- <!-- when $scope.myValue is truthy (element is hidden) -->
|
|
152
|
+
- <div ng-hide="myValue" class="ng-hide"></div>
|
|
153
|
+
-
|
|
154
|
+
- <!-- when $scope.myValue is falsy (element is visible) -->
|
|
155
|
+
- <div ng-hide="myValue"></div>
|
|
156
|
+
- ```
|
|
157
|
+
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
-
|
|
161
|
+
- When the `ngHide` expression evaluates to a truthy value then the `.ng-hide` CSS class is added
|
|
162
|
+
- to the class attribute on the element causing it to become hidden. When falsy, the `.ng-hide`
|
|
163
|
+
- CSS class is removed from the element causing the element not to appear hidden.
|
|
164
|
+
-
|
|
165
|
+
- ## Why is `!important` used?
|
|
166
|
+
-
|
|
167
|
+
- You may be wondering why `!important` is used for the `.ng-hide` CSS class. This is because the
|
|
168
|
+
- `.ng-hide` selector can be easily overridden by heavier selectors. For example, something as
|
|
169
|
+
- simple as changing the display style on a HTML list item would make hidden elements appear
|
|
170
|
+
- visible. This also becomes a bigger issue when dealing with CSS frameworks.
|
|
171
|
+
-
|
|
172
|
+
- By using `!important`, the show and hide behavior will work as expected despite any clash between
|
|
173
|
+
- CSS selector specificity (when `!important` isn't used with any conflicting styles). If a
|
|
174
|
+
- developer chooses to override the styling to change how to hide an element then it is just a
|
|
175
|
+
- matter of using `!important` in their own CSS code.
|
|
176
|
+
-
|
|
177
|
+
- ### Overriding `.ng-hide`
|
|
178
|
+
-
|
|
179
|
+
- By default, the `.ng-hide` class will style the element with `display: none !important`. If you
|
|
180
|
+
- wish to change the hide behavior with `ngShow`/`ngHide`, you can simply overwrite the styles for
|
|
181
|
+
- the `.ng-hide` CSS class. Note that the selector that needs to be used is actually
|
|
182
|
+
- `.ng-hide:not(.ng-hide-animate)` to cope with extra animation classes that can be added.
|
|
183
|
+
-
|
|
184
|
+
- ```css
|
|
185
|
+
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
- .ng-hide:not(.ng-hide-animate) {
|
|
189
|
+
- /\* These are just alternative ways of hiding an element \*/
|
|
190
|
+
- display: block!important;
|
|
191
|
+
- position: absolute;
|
|
192
|
+
- top: -9999px;
|
|
193
|
+
- left: -9999px;
|
|
194
|
+
- }
|
|
195
|
+
- ```
|
|
196
|
+
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
-
|
|
200
|
+
- By default you don't need to override in CSS anything and the animations will work around the
|
|
201
|
+
- display style.
|
|
202
|
+
-
|
|
203
|
+
- @animations
|
|
204
|
+
- | Animation | Occurs |
|
|
205
|
+
- |-----------------------------------------------------|------------------------------------------------------------------------------------------------------------|
|
|
206
|
+
- | {@link $animate#addClass addClass} `.ng-hide` | After the `ngHide` expression evaluates to a truthy value and just before the contents are set to hidden. |
|
|
207
|
+
- | {@link $animate#removeClass removeClass} `.ng-hide` | After the `ngHide` expression evaluates to a non truthy value and just before contents are set to visible. |
|
|
208
|
+
-
|
|
209
|
+
- Animations in `ngShow`/`ngHide` work with the show and hide events that are triggered when the
|
|
210
|
+
- directive expression is true and false. This system works like the animation system present with
|
|
211
|
+
- `ngClass` except that you must also include the `!important` flag to override the display
|
|
212
|
+
- property so that the elements are not actually hidden during the animation.
|
|
213
|
+
-
|
|
214
|
+
- ```css
|
|
215
|
+
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
- /\* A working example can be found at the bottom of this page. \*/
|
|
219
|
+
- .my-element.ng-hide-add, .my-element.ng-hide-remove {
|
|
220
|
+
- transition: all 0.5s linear;
|
|
221
|
+
- }
|
|
222
|
+
-
|
|
223
|
+
- .my-element.ng-hide-add { ... }
|
|
224
|
+
- .my-element.ng-hide-add.ng-hide-add-active { ... }
|
|
225
|
+
- .my-element.ng-hide-remove { ... }
|
|
226
|
+
- .my-element.ng-hide-remove.ng-hide-remove-active { ... }
|
|
227
|
+
- ```
|
|
228
|
+
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
-
|
|
232
|
+
- Keep in mind that, as of AngularJS version 1.3, there is no need to change the display property
|
|
233
|
+
- to block during animation states - ngAnimate will automatically handle the style toggling for you.
|
|
234
|
+
-
|
|
235
|
+
- @element ANY
|
|
236
|
+
- @param {string} ngHide If the {@link guide/expression expression} is truthy/falsy then the
|
|
237
|
+
- element is hidden/shown respectively.
|
|
238
|
+
-
|
|
239
|
+
- @knownIssue
|
|
240
|
+
-
|
|
241
|
+
- ### Flickering when using ngHide to toggle between elements
|
|
242
|
+
-
|
|
243
|
+
- When using {@link ngShow} and / or {@link ngHide} to toggle between elements, it can
|
|
244
|
+
- happen that both the element to show and the element to hide are visible for a very short time.
|
|
245
|
+
-
|
|
246
|
+
- This usually happens when the {@link ngAnimate ngAnimate module} is included, but no actual animations
|
|
247
|
+
- are defined for {@link ngShow} / {@link ngHide}. Internet Explorer is affected more often than
|
|
248
|
+
- other browsers.
|
|
249
|
+
-
|
|
250
|
+
- There are several way to mitigate this problem:
|
|
251
|
+
-
|
|
252
|
+
- - {@link guide/animations#how-to-selectively-enable-disable-and-skip-animations Disable animations on the affected elements}.
|
|
253
|
+
- - Use {@link ngIf} or {@link ngSwitch} instead of {@link ngShow} / {@link ngHide}.
|
|
254
|
+
- - Use the special CSS selector `ng-hide.ng-hide-animate` to set `{display: none}` or similar on the affected elements.
|
|
255
|
+
- - Use `ng-class="{'ng-hide': expression}` instead of instead of {@link ngShow} / {@link ngHide}.
|
|
256
|
+
- - Define an animation on the affected elements.
|
|
257
|
+
\*/
|
package/src/index.js
CHANGED
|
@@ -3,6 +3,10 @@ import { Angular } from "./loader";
|
|
|
3
3
|
export const angular = new Angular();
|
|
4
4
|
window["angular"] = angular;
|
|
5
5
|
|
|
6
|
-
document.
|
|
6
|
+
if (document.readyState === "complete") {
|
|
7
7
|
angular.init(document);
|
|
8
|
-
}
|
|
8
|
+
} else {
|
|
9
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
10
|
+
angular.init(document);
|
|
11
|
+
});
|
|
12
|
+
}
|
package/src/loader.js
CHANGED
|
@@ -175,7 +175,7 @@ export class Angular {
|
|
|
175
175
|
*
|
|
176
176
|
* @param {any[]} modules
|
|
177
177
|
* @param {boolean?} strictDi
|
|
178
|
-
* @returns {import("./
|
|
178
|
+
* @returns {import("./core/di/internal-injector").InjectorService}
|
|
179
179
|
*/
|
|
180
180
|
injector(modules, strictDi) {
|
|
181
181
|
return createInjector(modules, strictDi);
|
|
@@ -267,7 +267,7 @@ export class Angular {
|
|
|
267
267
|
* @param {string} name The name of the module to create or retrieve.
|
|
268
268
|
* @param {Array.<string>} [requires] If specified then new module is being created. If
|
|
269
269
|
* unspecified then the module is being retrieved for further configuration.
|
|
270
|
-
* @param {Function} [configFn] Optional configuration function for the module. Same as
|
|
270
|
+
* @param {Array<any>|Function} [configFn] Optional configuration function for the module. Same as
|
|
271
271
|
* {@link import('./types').Module#config Module#config()}.
|
|
272
272
|
* @returns {NgModule} A newly registered module.
|
|
273
273
|
*/
|
|
@@ -284,7 +284,11 @@ export class Angular {
|
|
|
284
284
|
name,
|
|
285
285
|
);
|
|
286
286
|
}
|
|
287
|
-
const moduleInstance = new NgModule(
|
|
287
|
+
const moduleInstance = new NgModule(
|
|
288
|
+
name,
|
|
289
|
+
requires,
|
|
290
|
+
/** @type {Function} */ (configFn),
|
|
291
|
+
);
|
|
288
292
|
return moduleInstance;
|
|
289
293
|
});
|
|
290
294
|
}
|
package/src/public.js
CHANGED
|
@@ -59,7 +59,6 @@ import {
|
|
|
59
59
|
} from "./core/animate/animate";
|
|
60
60
|
import { BrowserProvider } from "./services/browser";
|
|
61
61
|
import { CoreAnimateCssProvider } from "./core/animate/animate-css";
|
|
62
|
-
import { CookieReaderProvider } from "./services/cookie-reader";
|
|
63
62
|
import {
|
|
64
63
|
AnimateAsyncRunFactoryProvider,
|
|
65
64
|
AnimateRunnerFactoryProvider,
|
|
@@ -79,10 +78,7 @@ import {
|
|
|
79
78
|
$HttpParamSerializerProvider,
|
|
80
79
|
$HttpParamSerializerJQLikeProvider,
|
|
81
80
|
} from "./services/http/http";
|
|
82
|
-
import {
|
|
83
|
-
$HttpBackendProvider,
|
|
84
|
-
$xhrFactoryProvider,
|
|
85
|
-
} from "./services/http-backend/http-backend";
|
|
81
|
+
import { $HttpBackendProvider } from "./services/http-backend/http-backend";
|
|
86
82
|
import { $LocationProvider } from "./core/location/location";
|
|
87
83
|
import { $LogProvider } from "./services/log";
|
|
88
84
|
import { $ParseProvider } from "./core/parser/parse";
|
|
@@ -192,7 +188,6 @@ export function publishExternalAPI(angular) {
|
|
|
192
188
|
$httpParamSerializer: $HttpParamSerializerProvider,
|
|
193
189
|
$httpParamSerializerJQLike: $HttpParamSerializerJQLikeProvider,
|
|
194
190
|
$httpBackend: $HttpBackendProvider,
|
|
195
|
-
$xhrFactory: $xhrFactoryProvider,
|
|
196
191
|
$location: $LocationProvider,
|
|
197
192
|
$log: $LogProvider,
|
|
198
193
|
$parse: $ParseProvider,
|
|
@@ -205,7 +200,6 @@ export function publishExternalAPI(angular) {
|
|
|
205
200
|
$templateCache: TemplateCacheProvider,
|
|
206
201
|
$templateRequest: TemplateRequestProvider,
|
|
207
202
|
$timeout: $TimeoutProvider,
|
|
208
|
-
$$cookieReader: CookieReaderProvider,
|
|
209
203
|
});
|
|
210
204
|
},
|
|
211
205
|
],
|