|
6 | 6 | * @restrict A
|
7 | 7 | *
|
8 | 8 | * @description
|
9 |
| - * The `ngIf` directive removes and recreates a portion of the DOM tree (HTML) |
10 |
| - * conditionally based on **"falsy"** and **"truthy"** values, respectively, evaluated within |
11 |
| - * an {expression}. In other words, if the expression assigned to **ngIf evaluates to a false |
12 |
| - * value** then **the element is removed from the DOM** and **if true** then **a clone of the |
13 |
| - * element is reinserted into the DOM**. |
| 9 | + * The `ngIf` directive removes or recreates a portion of the DOM tree based on an |
| 10 | + * {expression}. If the expression assigned to `ngIf` evaluates to a false |
| 11 | + * value then the element is removed from the DOM, otherwise a clone of the |
| 12 | + * element is reinserted into the DOM. |
14 | 13 | *
|
15 | 14 | * `ngIf` differs from `ngShow` and `ngHide` in that `ngIf` completely removes and recreates the
|
16 | 15 | * element in the DOM rather than changing its visibility via the `display` css property. A common
|
17 | 16 | * case when this difference is significant is when using css selectors that rely on an element's
|
18 |
| - * position within the DOM (HTML), such as the `:first-child` or `:last-child` pseudo-classes. |
| 17 | + * position within the DOM, such as the `:first-child` or `:last-child` pseudo-classes. |
19 | 18 | *
|
20 |
| - * Note that **when an element is removed using ngIf its scope is destroyed** and **a new scope |
21 |
| - * is created when the element is restored**. The scope created within `ngIf` inherits from |
| 19 | + * Note that when an element is removed using `ngIf` its scope is destroyed and a new scope |
| 20 | + * is created when the element is restored. The scope created within `ngIf` inherits from |
22 | 21 | * its parent scope using
|
23 | 22 | * {@link https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance prototypal inheritance}.
|
24 | 23 | * An important implication of this is if `ngModel` is used within `ngIf` to bind to
|
25 | 24 | * a javascript primitive defined in the parent scope. In this case any modifications made to the
|
26 | 25 | * variable within the child scope will override (hide) the value in the parent scope.
|
27 | 26 | *
|
28 |
| - * Also, `ngIf` recreates elements using their compiled state. An example scenario of this behavior |
| 27 | + * Also, `ngIf` recreates elements using their compiled state. An example of this behavior |
29 | 28 | * is if an element's class attribute is directly modified after it's compiled, using something like
|
30 | 29 | * jQuery's `.addClass()` method, and the element is later removed. When `ngIf` recreates the element
|
31 | 30 | * the added class will be lost because the original compiled state is used to regenerate the element.
|
32 | 31 | *
|
33 |
| - * Additionally, you can provide animations via the ngAnimate module to animate the **enter** |
34 |
| - * and **leave** effects. |
| 32 | + * Additionally, you can provide animations via the `ngAnimate` module to animate the `enter` |
| 33 | + * and `leave` effects. |
35 | 34 | *
|
36 | 35 | * @animations
|
37 | 36 | * enter - happens just after the ngIf contents change and a new DOM element is created and injected into the ngIf container
|
|
40 | 39 | * @element ANY
|
41 | 40 | * @scope
|
42 | 41 | * @param {expression} ngIf If the {@link guide/expression expression} is falsy then
|
43 |
| - * the element is removed from the DOM tree (HTML). |
| 42 | + * the element is removed from the DOM tree. If it is truthy a copy of the compiled |
| 43 | + * eleent is added to the DOM tree. |
44 | 44 | *
|
45 | 45 | * @example
|
46 | 46 | <example animations="true">
|
|
0 commit comments