mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-16 23:30:23 +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
|
||||
*
|
||||
* @description
|
||||
* Compiles a piece of HTML string or DOM into a view and produces a linking function, which can
|
||||
* then be used to link {@link angular.scope scope} and the template together. The compilation
|
||||
* 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
|
||||
* {@link angular.directive directives}. For each match it executes coresponding markup, \
|
||||
* attrMarkup, widget or directive template function and collects the instance functions into a
|
||||
* single linking function which is then returned. The linking function can then be used
|
||||
* many-times-over on clones of compiled DOM structure, (For example when compiling
|
||||
* {@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
|
||||
* each item in collection and then calling the linking function to link the cloned template
|
||||
* with the a new scope for each item in the collection.)
|
||||
* Compiles a piece of HTML string or DOM into a template and produces a template function, which
|
||||
* can then be used to link {@link angular.scope scope} and the template together.
|
||||
*
|
||||
* The compilation is a process of walking the DOM tree and trying to match DOM elements to
|
||||
* {@link angular.markup markup}, {@link angular.attrMarkup attrMarkup},
|
||||
* {@link angular.widget widgets}, and {@link angular.directive directives}. For each match it
|
||||
* executes coresponding markup, attrMarkup, widget or directive template function and collects the
|
||||
* instance functions into a single template function which is then returned.
|
||||
*
|
||||
* The template function can then be used once to produce the view or as it is the case with
|
||||
* {@link angular.widget.@ng:repeat repeater} many-times, in which case each call results in a view
|
||||
* that is a DOM clone of the original template.
|
||||
*
|
||||
<pre>
|
||||
var mvc1 = angular.compile(window.document)();
|
||||
mvc1.view; // compiled view elment
|
||||
mvc1.scope; // scope bound to the element
|
||||
//copile the entire window.document and give me the scope bound to this template.
|
||||
var rootSscope = angular.compile(window.document)();
|
||||
|
||||
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>
|
||||
*
|
||||
* @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.
|
||||
* * `cloneAttachFn` - If `cloneAttachFn` is provided, then the link function will clone 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
|
||||
* 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.
|
||||
* * `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
|
||||
* 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
|
||||
* around. This works if you don't need the element to be cloned by the link function.
|
||||
* - If you are not asking the linking function to clone the template, create the DOM element(s)
|
||||
* before you send them to the compiler and keep this reference around.
|
||||
* <pre>
|
||||
* var view = angular.element('<p>{{total}}</p>'),
|
||||
* scope = angular.compile(view)();
|
||||
* </pre>
|
||||
*
|
||||
* - 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,
|
||||
* you can access the clone via the cloneAttachFn:
|
||||
* example would not point to the clone, but rather to the original template that was cloned. In
|
||||
* this case, you can access the clone via the cloneAttachFn:
|
||||
* <pre>
|
||||
* var original = angular.element('<p>{{total}}</p>'),
|
||||
* scope = someParentScope.$new(),
|
||||
|
|
|
|||
Loading…
Reference in a new issue