mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-05-09 07:14:44 +00:00
additional fixes for the angular.compile docs
This commit is contained in:
parent
945056b166
commit
95a29d7bde
1 changed files with 35 additions and 27 deletions
|
|
@ -79,55 +79,63 @@ Template.prototype = {
|
||||||
* @function
|
* @function
|
||||||
*
|
*
|
||||||
* @description
|
* @description
|
||||||
* Compiles a piece of HTML string or DOM into a view and produces a linking function, which can
|
* Compiles a piece of HTML string or DOM into a template and produces a template function, which
|
||||||
* then be used to link {@link angular.scope scope} and the template together. The compilation
|
* can then be used to link {@link angular.scope scope} and the template together.
|
||||||
* process walks the DOM tree and tries to match DOM elements to {@link angular.markup markup},
|
*
|
||||||
* {@link angular.attrMarkup attrMarkup}, {@link angular.widget widgets}, and
|
* The compilation is a process of walking the DOM tree and trying to match DOM elements to
|
||||||
* {@link angular.directive directives}. For each match it executes coresponding markup, \
|
* {@link angular.markup markup}, {@link angular.attrMarkup attrMarkup},
|
||||||
* attrMarkup, widget or directive template function and collects the instance functions into a
|
* {@link angular.widget widgets}, and {@link angular.directive directives}. For each match it
|
||||||
* single linking function which is then returned. The linking function can then be used
|
* executes coresponding markup, attrMarkup, widget or directive template function and collects the
|
||||||
* many-times-over on clones of compiled DOM structure, (For example when compiling
|
* instance functions into a single template function which is then returned.
|
||||||
* {@link angular.widget.@ng:repeat repeater} the resulting linking function is called once for
|
*
|
||||||
* each item in the collection. The `ng:repeat` does this by cloning the template DOM once for
|
* The template function can then be used once to produce the view or as it is the case with
|
||||||
* each item in collection and then calling the linking function to link the cloned template
|
* {@link angular.widget.@ng:repeat repeater} many-times, in which case each call results in a view
|
||||||
* with the a new scope for each item in the collection.)
|
* that is a DOM clone of the original template.
|
||||||
*
|
*
|
||||||
<pre>
|
<pre>
|
||||||
var mvc1 = angular.compile(window.document)();
|
//copile the entire window.document and give me the scope bound to this template.
|
||||||
mvc1.view; // compiled view elment
|
var rootSscope = angular.compile(window.document)();
|
||||||
mvc1.scope; // scope bound to the element
|
|
||||||
|
|
||||||
var mvc2 = angular.compile('<div ng:click="clicked = true">click me</div>')();
|
//compile a piece of html
|
||||||
|
var rootScope2 = angular.compile(''<div ng:click="clicked = true">click me</div>')();
|
||||||
|
|
||||||
|
//compile a piece of html and retain reference to both the dom and scope
|
||||||
|
var template = angular.element('<div ng:click="clicked = true">click me</div>'),
|
||||||
|
scoope = angular.compile(view)();
|
||||||
|
//at this point template was transformed into a view
|
||||||
</pre>
|
</pre>
|
||||||
*
|
*
|
||||||
* @param {string|DOMElement} element Element or HTML to compile into a template function.
|
|
||||||
* @returns {function([scope][, cloneAttachFn])} a template function which is used to bind element
|
|
||||||
* and scope. Where:
|
|
||||||
*
|
*
|
||||||
* * `scope` - {@link angular.scope scope} A scope to bind to. If none specified, then a new
|
* @param {string|DOMElement} element Element or HTML to compile into a template function.
|
||||||
|
* @returns {function([scope][, cloneAttachFn])} a template function which is used to bind template
|
||||||
|
* (a DOM element/tree) to a scope. Where:
|
||||||
|
*
|
||||||
|
* * `scope` - A {@link angular.scope scope} to bind to. If none specified, then a new
|
||||||
* root scope is created.
|
* root scope is created.
|
||||||
* * `cloneAttachFn` - If `cloneAttachFn` is provided, then the link function will clone the
|
* * `cloneAttachFn` - If `cloneAttachFn` is provided, then the link function will clone the
|
||||||
* `template` and call the `cloneAttachFn` function allowing the caller to attach the
|
* `template` and call the `cloneAttachFn` function allowing the caller to attach the
|
||||||
* cloned elements to the DOM document at the approriate place. The `cloneAttachFn` is
|
* cloned elements to the DOM document at the approriate place. The `cloneAttachFn` is
|
||||||
* called as: <br/> `cloneAttachFn(clonedElement, scope)`:
|
* called as: <br/> `cloneAttachFn(clonedElement, scope)` where:
|
||||||
*
|
*
|
||||||
* * `clonedElement` - is a clone of the original `element` passed into the compiler.
|
* * `clonedElement` - is a clone of the original `element` passed into the compiler.
|
||||||
* * `scope` - is the current scope with which the linking function is working with.
|
* * `scope` - is the current scope with which the linking function is working with.
|
||||||
*
|
*
|
||||||
* Calling the template function returns the scope to which the element is bound to. It is either
|
* Calling the template function returns the scope to which the element is bound to. It is either
|
||||||
* a new root scope or scope passed into the template function.
|
* the same scope as the one passed into the template function, or if none were provided it's the
|
||||||
|
* newly create scope.
|
||||||
*
|
*
|
||||||
* If you need access to the compiled view, there are two ways to do it:
|
* If you need access to the bound view, there are two ways to do it:
|
||||||
*
|
*
|
||||||
* - either create the DOM element(s) before you send them to the compiler and keep this reference
|
* - If you are not asking the linking function to clone the template, create the DOM element(s)
|
||||||
* around. This works if you don't need the element to be cloned by the link function.
|
* before you send them to the compiler and keep this reference around.
|
||||||
* <pre>
|
* <pre>
|
||||||
* var view = angular.element('<p>{{total}}</p>'),
|
* var view = angular.element('<p>{{total}}</p>'),
|
||||||
* scope = angular.compile(view)();
|
* scope = angular.compile(view)();
|
||||||
* </pre>
|
* </pre>
|
||||||
|
*
|
||||||
* - if on the other hand, you need the element to be cloned, the view reference from the original
|
* - if on the other hand, you need the element to be cloned, the view reference from the original
|
||||||
* example would not point to the clone, but rather to the dom that is cloned. In this case,
|
* example would not point to the clone, but rather to the original template that was cloned. In
|
||||||
* you can access the clone via the cloneAttachFn:
|
* this case, you can access the clone via the cloneAttachFn:
|
||||||
* <pre>
|
* <pre>
|
||||||
* var original = angular.element('<p>{{total}}</p>'),
|
* var original = angular.element('<p>{{total}}</p>'),
|
||||||
* scope = someParentScope.$new(),
|
* scope = someParentScope.$new(),
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue