Skip to content

Commit 7c4d943

Browse files
tolyotolyo
committed
Reorg if directive
1 parent 3d5b523 commit 7c4d943

File tree

8 files changed

+87
-90
lines changed

8 files changed

+87
-90
lines changed

Diff for: ‎.eslintrc.cjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,5 @@ module.exports = {
2525
"no-multy-assign": "off",
2626
"no-param-reassign": "off"
2727
},
28-
ignorePatterns: ["test/**"],
28+
ignorePatterns: ["**/*.spec.js"],
2929
};

Diff for: ‎src/directive/if.md

-80
This file was deleted.

Diff for: ‎src/directive/if/if.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<script src="/test/jasmine/jasmine-5.1.2/jasmine-html.js"></script>
1111
<script src="/test/jasmine/jasmine-5.1.2/boot0.js"></script>
1212
<script src="/test/jasmine/jasmine-5.1.2/boot1.js"></script>
13-
<script type="module" src="/test/directive/if.spec.js"></script>
13+
<script type="module" src="/src/directive/if/if.spec.js"></script>
1414
</head>
1515
<body>
1616
<div id="dummy"></div>

Diff for: ‎src/directive/if.js renamed to ‎src/directive/if/if.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getBlockNodes } from "../jqLite";
1+
import { getBlockNodes } from "../../jqLite";
22

33
export const ngIfDirective = [
44
"$animate",

Diff for: ‎src/directive/if/if.md

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
@name ngIf
2+
@restrict A
3+
@multiElement
4+
5+
@description
6+
The `ngIf` directive removes or recreates a portion of the DOM tree based on an
7+
{expression}. If the expression assigned to `ngIf` evaluates to a false
8+
value then the element is removed from the DOM, otherwise a clone of the
9+
element is reinserted into the DOM.
10+
11+
`ngIf` differs from `ngShow` and `ngHide` in that `ngIf` completely removes and recreates the
12+
element in the DOM rather than changing its visibility via the `display` css property. A common
13+
case when this difference is significant is when using css selectors that rely on an element's
14+
position within the DOM, such as the `:first-child` or `:last-child` pseudo-classes.
15+
16+
Note that when an element is removed using `ngIf` its scope is destroyed and a new scope
17+
is created when the element is restored. The scope created within `ngIf` inherits from
18+
its parent scope using
19+
[prototypal inheritance](https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance).
20+
An important implication of this is if `ngModel` is used within `ngIf` to bind to
21+
a javascript primitive defined in the parent scope. In this case any modifications made to the
22+
variable within the child scope will override (hide) the value in the parent scope.
23+
24+
Also, `ngIf` recreates elements using their compiled state. An example of this behavior
25+
is if an element's class attribute is directly modified after it's compiled, using something like
26+
jQuery's `.addClass()` method, and the element is later removed. When `ngIf` recreates the element
27+
the added class will be lost because the original compiled state is used to regenerate the element.
28+
29+
Additionally, you can provide animations via the `ngAnimate` module to animate the `enter`
30+
and `leave` effects.
31+
32+
@animations
33+
| Animation | Occurs |
34+
|----------------------------------|-------------------------------------|
35+
| {@link ng.$animate#enter enter} | just after the `ngIf` contents change and a new DOM element is created and injected into the `ngIf` container |
36+
| {@link ng.$animate#leave leave} | just before the `ngIf` contents are removed from the DOM |
37+
38+
- @element ANY
39+
@scope
40+
@priority 600
41+
@param {string} ngIf If the {@link guide/expression expression} is falsy then
42+
the element is removed from the DOM tree. If it is truthy a copy of the compiled
43+
element is added to the DOM tree.
44+
45+
- @example
46+
<example module="ngAnimate" deps="angular-animate.js" animations="true" name="ng-if">
47+
<file name="index.html">
48+
<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
49+
Show when checked:
50+
<span ng-if="checked" class="animate-if">
51+
This is removed when the checkbox is unchecked.
52+
</span>
53+
</file>
54+
<file name="animations.css">
55+
.animate-if {
56+
background:white;
57+
border:1px solid black;
58+
padding:10px;
59+
}
60+
61+
.animate-if.ng-enter, .animate-if.ng-leave {
62+
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
63+
}
64+
65+
.animate-if.ng-enter,
66+
.animate-if.ng-leave.ng-leave-active {
67+
opacity:0;
68+
}
69+
70+
.animate-if.ng-leave,
71+
.animate-if.ng-enter.ng-enter-active {
72+
opacity:1;
73+
}
74+
75+
</file>
76+
77+
</example>

Diff for: ‎test/directive/if.spec.js renamed to ‎src/directive/if/if.spec.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { dealoc, jqLite } from "../../src/jqLite";
2-
import { forEach, valueFn } from "../../src/shared/utils";
3-
import { publishExternalAPI } from "../../src/public";
4-
import { createInjector } from "../../src/injector";
5-
import { Angular } from "../../src/loader";
1+
import { dealoc, jqLite } from "../../jqLite";
2+
import { forEach, valueFn } from "../../shared/utils";
3+
import { publishExternalAPI } from "../../public";
4+
import { createInjector } from "../../injector";
5+
import { Angular } from "../../loader";
66

77
describe("ngIf", () => {
88
describe("basic", () => {

Diff for: ‎src/directive/if/if.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { test, expect } from "@playwright/test";
22

3-
const TEST_URL = "#test/directive/if.spec.js";
3+
const TEST_URL = "#src/directive/if/if.spec.js";
44

55
test("unit tests contain no errors", async ({ page }) => {
66
await page.goto(TEST_URL);

Diff for: ‎src/public.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
import { ngCloakDirective } from "./directive/cloak";
2121
import { ngControllerDirective } from "./directive/controller";
2222
import { ngHideDirective, ngShowDirective } from "./directive/show-hide";
23-
import { ngIfDirective } from "./directive/if";
23+
import { ngIfDirective } from "./directive/if/if";
2424
import {
2525
ngIncludeDirective,
2626
ngIncludeFillContentDirective,

0 commit comments

Comments
 (0)