diff options
| author | Igor Minar | 2011-03-01 19:08:30 -0800 |
|---|---|---|
| committer | Igor Minar | 2011-03-01 19:08:30 -0800 |
| commit | 95a29d7bde93189117c92b599d91731400a4f34f (patch) | |
| tree | 73c19903d8a9af5f1814e7ef324eb3974ad1f387 | |
| parent | 945056b1667a69ecc4d557cc0f03894597250ced (diff) | |
| download | angular.js-95a29d7bde93189117c92b599d91731400a4f34f.tar.bz2 | |
additional fixes for the angular.compile docs
| -rw-r--r-- | src/Compiler.js | 60 |
1 files changed, 34 insertions, 26 deletions
diff --git a/src/Compiler.js b/src/Compiler.js index 4be7e116..09857ea4 100644 --- a/src/Compiler.js +++ b/src/Compiler.js @@ -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)(); + + //compile a piece of html + var rootScope2 = angular.compile(''<div ng:click="clicked = true">click me</div>')(); - var mvc2 = 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: + * @returns {function([scope][, cloneAttachFn])} a template function which is used to bind template + * (a DOM element/tree) to a scope. Where: * - * * `scope` - {@link angular.scope scope} A scope to bind to. If none specified, then a new + * * `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(), |
