@@ -10,7 +10,7 @@ can be extended such that HTML can be turned into a declarative domain specific
10
10
11
11
# Invoking directives from HTML
12
12
13
- Directives have camel cased names such as ' ngBind' . The directive can be invoked by translating
13
+ Directives have camel cased names such as ` ngBind` . The directive can be invoked by translating
14
14
the camel case name into snake case with these special characters `:`, `-`, or `_`. Optionally the
15
15
directive can be prefixed with `x-`, or `data-` to make it HTML validator compliant. Here is a
16
16
list of some of the possible directive names: `ng:bind`, `ng-bind`, `ng_bind`, `x-ng-bind` and
@@ -74,7 +74,7 @@ Compilation of HTML happens in three phases:
74
74
realize because the templates must be parsable HTML. This is in contrast to most templating
75
75
systems that operate on strings, rather than on DOM elements.
76
76
77
- 2. The compilation of the DOM is performed by the call to {@link api/ng.$compile
77
+ 2. The compilation of the DOM is performed by the call to the {@link api/ng.$compile
78
78
$compile()} method. The method traverses the DOM and matches the directives. If a match is found
79
79
it is added to the list of directives associated with the given DOM element. Once all directives
80
80
for a given DOM element have been identified they are sorted by priority and their `compile()`
@@ -109,8 +109,8 @@ Compilation of HTML happens in three phases:
109
109
110
110
## Reasons behind the compile/link separation
111
111
112
- At this point you may wonder why is the compile process broken down to a compile and link phase.
113
- To understand this, lets look at a real world example with repeater:
112
+ At this point you may wonder why the compile process is broken down to a compile and link phase.
113
+ To understand this, let's look at a real world example with repeater:
114
114
115
115
<pre>
116
116
Hello {{user}}, you have these actions:
@@ -156,18 +156,18 @@ link function on the cloned `li`.
156
156
Summary:
157
157
158
158
* *compile function* - The compile function is relatively rare in directives, since most
159
- directives are concerned with working with a specific DOM element instance rather then
159
+ directives are concerned with working with a specific DOM element instance rather than
160
160
transforming the template DOM element. Any operation which can be shared among the instance of
161
161
directives should be moved to the compile function for performance reasons.
162
162
163
- * *link function* - It is rare for the directive not to have a link function. Link function
163
+ * *link function* - It is rare for the directive not to have a link function. A link function
164
164
allows the directive to register listeners to the specific cloned DOM element instance as well
165
165
as to copy content into the DOM from the scope.
166
166
167
167
168
168
# Writing directives (short version)
169
169
170
- In this example we will build a directive which displays the current time.
170
+ In this example we will build a directive that displays the current time.
171
171
172
172
<doc:example module="time">
173
173
<doc:source>
@@ -211,7 +211,7 @@ In this example we will build a directive which displays the current time.
211
211
$timeout.cancel(timeoutId);
212
212
});
213
213
214
- updateLater(); // kick of the UI update process.
214
+ updateLater(); // kick off the UI update process.
215
215
}
216
216
});
217
217
</script>
@@ -255,7 +255,7 @@ In most cases you will not need such fine control and so the above can be simpli
255
255
different parts of this skeleton are explained in following sections. In this section we are
256
256
interested only isomers of this skeleton.
257
257
258
- The first step in simplyfing the code is to rely on the deafult values. Therefore the above can be
258
+ The first step in simplyfing the code is to rely on the default values. Therefore the above can be
259
259
simplified as:
260
260
261
261
<pre>
@@ -314,8 +314,8 @@ compiler}. The attributes are:
314
314
apply for the root of the template since the root of the template always gets a new scope.
315
315
316
316
* `{}` (object hash) - then a new 'isolate' scope is created. The 'isolate' scope differs from
317
- normal scope that it does not prototypically inherit from the parent scope. This is useful
318
- when creating reusable components, which should not accidentally read or modify data in
317
+ normal scope in that it does not prototypically inherit from the parent scope. This is useful
318
+ when creating reusable components, which should not accidentally read or modify data in the
319
319
parent scope. <br/>
320
320
The 'isolate' scope takes an object hash which defines a set of local scope properties
321
321
derived from the parent scope. These local properties are useful for aliasing values for
@@ -381,7 +381,7 @@ compiler}. The attributes are:
381
381
the template loading is asynchronous the compilation/linking is suspended until the template
382
382
is loaded.
383
383
384
- * `replace` - if set to `true` then the template will replace the current element, rather then
384
+ * `replace` - if set to `true` then the template will replace the current element, rather than
385
385
append the template to the element.
386
386
387
387
* `transclude` - compile the content of the element and make it available to the directive.
@@ -407,12 +407,12 @@ compiler}. The attributes are:
407
407
function compile(tElement, tAttrs, transclude) { ... }
408
408
</pre>
409
409
410
- Compile function deals with transforming the template DOM. Since most directives do not do
411
- template transformation, it is not used often. Examples which require compile functions are
412
- directives which transform template DOM such as {@link
413
- api/ng.directive:ngRepeat ngRepeat} or load the contents
414
- asynchronously such as {@link api/ng.directive:ngView ngView}. The
415
- compile functions takes the following arguments.
410
+ The compile function deals with transforming the template DOM. Since most directives do not do
411
+ template transformation, it is not used often. Examples that require compile functions are
412
+ directives that transform template DOM, such as {@link
413
+ api/ng.directive:ngRepeat ngRepeat}, or load the contents
414
+ asynchronously, such as {@link api/ng.directive:ngView ngView}. The
415
+ compile function takes the following arguments.
416
416
417
417
* `tElement` - template element - The element where the directive has been declared. It is
418
418
safe to do template transformation on the element and child elements only.
@@ -424,7 +424,7 @@ compile functions takes the following arguments.
424
424
* `transclude` - A transclude linking function: `function(scope, cloneLinkingFn)`.
425
425
426
426
NOTE: The template instance and the link instance may not be the same objects if the template has
427
- been cloned. For this reason it is not safe in the compile function to do anything other the DOM
427
+ been cloned. For this reason it is not safe in the compile function to do anything other than DOM
428
428
transformation that applies to all DOM clones. Specifically, DOM listener registration should be
429
429
done in a linking function rather than in a compile function.
430
430
@@ -444,7 +444,7 @@ A compile function can have a return value which can be either a function or an
444
444
function link(scope, iElement, iAttrs, controller) { ... }
445
445
</pre>
446
446
447
- Link function is responsible for registering DOM listeners as well as updating the DOM. It is
447
+ The link function is responsible for registering DOM listeners as well as updating the DOM. It is
448
448
executed after the template has been cloned. This is where most of the directive logic will be
449
449
put.
450
450
@@ -477,11 +477,11 @@ Executed after the child elements are linked. Safe to do DOM transformation in h
477
477
<a name="Attributes"></a>
478
478
## Attributes
479
479
480
- The attributes object - passed as a parameter in the link() or compile() functions - is a way of
481
- accessing:
480
+ The {@link api/ng.$compile.directive.Attributes Attributes} object - passed as a parameter in the
481
+ link() or compile() functions - is a way of accessing:
482
482
483
483
* *normalized attribute names:* Since a directive such as 'ngBind' can be expressed in many ways
484
- sucha s as 'ng:bind', or 'x-ng-bind', the attributes object allows for a normalize accessed to
484
+ such as 'ng:bind', or 'x-ng-bind', the attributes object allows for normalized accessed to
485
485
the attributes.
486
486
487
487
* *directive inter-communication:* All directives share the same instance of the attributes
@@ -576,7 +576,7 @@ To solve the issue of lack of isolation, the directive declares a new `isolated`
576
576
isolated scope does not prototypically inherit from the child scope, and therefore we don't have
577
577
to worry about accidentally clobbering any properties.
578
578
579
- However ' isolated' scope creates a new problem: if a transcluded DOM is a child of the widget
579
+ However ` isolated` scope creates a new problem: if a transcluded DOM is a child of the widget
580
580
isolated scope then it will not be able to bind to anything. For this reason the transcluded scope
581
581
is a child of the original scope, before the widget created an isolated scope for its local
582
582
variables. This makes the transcluded and widget isolated scope siblings.
0 commit comments