'use strict'; /** * Template provides directions an how to bind to a given element. * It contains a list of init functions which need to be called to * bind to a new instance of elements. It also provides a list * of child paths which contain child templates */ function Template(priority) { this.paths = []; this.children = []; this.inits = []; this.priority = priority; this.newScope = false; } Template.prototype = { attach: function(element, scope) { var inits = {}; this.collectInits(element, inits, scope); forEachSorted(inits, function(queue){ forEach(queue, function(fn) {fn();}); }); }, collectInits: function(element, inits, scope) { var queue = inits[this.priority], childScope = scope; if (!queue) { inits[this.priority] = queue = []; } if (this.newScope) { childScope = createScope(scope); scope.$onEval(childScope.$eval); element.data($$scope, childScope); } forEach(this.inits, function(fn) { queue.push(function() { childScope.$tryEval(function(){ return childScope.$service.invoke(childScope, fn, [element]); }, element); }); }); var i, childNodes = element[0].childNodes, children = this.children, paths = this.paths, length = paths.length; for (i = 0; i < length; i++) { children[i].collectInits(jqLite(childNodes[paths[i]]), inits, childScope); } }, addInit:function(linkingFn) { if (linkingFn) { if (!linkingFn.$inject) linkingFn.$inject = []; this.inits.push(linkingFn); } }, addChild: function(index, template) { if (template) { this.paths.push(index); this.children.push(template); } }, empty: function() { return this.inits.length === 0 && this.paths.length === 0; } }; /////////////////////////////////// //Compiler ////////////////////////////////// /** * @workInProgress * @ngdoc function * @name angular.compile * @function * * @description * 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 corresponding 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. *
    // compile the entire window.document and give me the scope bound to this template.
    var rootScope = angular.compile(window.document)();

    // compile a piece of html
    var rootScope2 = angular.compile('
click me
')(); // compile a piece of html and retain reference to both the dom and scope var template = angular.element('
click me
'), scope = angular.compile(template)(); // at this point template was transformed into a view
* * * @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 appropriate place. The `cloneAttachFn` is * called as:
`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 * 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 bound view, there are two ways to do it: * * - 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. *
 *     var view = angular.element('

{{total}}

'), * scope = angular.compile(view)(); *
* * - 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 original template that was cloned. In * this case, you can access the clone via the cloneAttachFn: *
 *     var original = angular.element('

{{total}}

'), * scope = someParentScope.$new(), * clone; * * angular.compile(original)(scope, function(clonedElement, scope) { * clone = clonedElement; * //attach the clone to DOM document at the right place * }); * * //now we have reference to the cloned DOM via `clone` *
* * * Compiler Methods For Widgets and Directives: * * The following methods are available for use when you write your own widgets, directives, * and markup. (Recall that the compile function's this is a reference to the compiler.) * * `compile(element)` - returns linker - * Invoke a new instance of the compiler to compile a DOM element and return a linker function. * You can apply the linker function to the original element or a clone of the original element. * The linker function returns a scope. * * * `comment(commentText)` - returns element - Create a comment element. * * * `element(elementName)` - returns element - Create an element by name. * * * `text(text)` - returns element - Create a text element. * * * `descend([set])` - returns descend state (true or false). Get or set the current descend * state. If true the compiler will descend to children elements. * * * `directives([set])` - returns directive state (true or false). Get or set the current * directives processing state. The compiler will process directives only when directives set to * true. * * For information on how the compiler works, see the * {@link guide/dev_guide.compiler Angular HTML Compiler} section of the Developer Guide. */ function Compiler(markup, attrMarkup, directives, widgets){ this.markup = markup; this.attrMarkup = attrMarkup; this.directives = directives; this.widgets = widgets; } Compiler.prototype = { compile: function(templateElement) { templateElement = jqLite(templateElement); var index = 0, template, parent = templateElement.parent(); if (templateElement.length > 1) { // https://github.com/angular/angular.js/issues/338 throw Error("Cannot compile multiple element roots: " + jqLite('
').append(templateElement.clone()).html()); } if (parent && parent[0]) { parent = parent[0]; for(var i = 0; i < parent.childNodes.length; i++) { if (parent.childNodes[i] == templateElement[0]) { index = i; } } } template = this.templatize(templateElement, index, 0) || new Template(); return function(scope, cloneConnectFn){ // important!!: we must call our jqLite.clone() since the jQuery one is trying to be smart // and sometimes changes the structure of the DOM. var element = cloneConnectFn ? JQLitePrototype.clone.call(templateElement) // IMPORTANT!!! : templateElement; scope = scope || createScope(); element.data($$scope, scope); scope.$element = element; (cloneConnectFn||noop)(element, scope); template.attach(element, scope); scope.$eval(); return scope; }; }, /** * @workInProgress * @ngdoc directive * @name angular.directive.ng:eval-order * * @description * Normally the view is updated from top to bottom. This usually is * not a problem, but under some circumstances the values for data * is not available until after the full view is computed. If such * values are needed before they are computed the order of * evaluation can be changed using ng:eval-order * * @element ANY * @param {integer|string=} [priority=0] priority integer, or FIRST, LAST constant * * @example * try changing the invoice and see that the Total will lag in evaluation * @example
TOTAL: without ng:eval-order {{ items.$sum('total') | currency }}
TOTAL: with ng:eval-order {{ items.$sum('total') | currency }}
QTY Description Cost Total
{{item.total = item.qty * item.cost | currency}} X
add {{ items.$sum('total') | currency }}
it('should check ng:format', function(){ expect(using('.doc-example-live div:first').binding("items.$sum('total')")).toBe('$9.99'); expect(using('.doc-example-live div:last').binding("items.$sum('total')")).toBe('$9.99'); input('item.qty').enter('2'); expect(using('.doc-example-live div:first').binding("items.$sum('total')")).toBe('$9.99'); expect(using('.doc-example-live div:last').binding("items.$sum('total')")).toBe('$19.98'); });
*/ templatize: function(element, elementIndex, priority){ var self = this, widget, fn, directiveFns = self.directives, descend = true, directives = true, elementName = nodeName_(element), elementNamespace = elementName.indexOf(':') > 0 ? lowercase(elementName).replace(':', '-') : '', template, selfApi = { compile: bind(self, self.compile), descend: function(value){ if(isDefined(value)) descend = value; return descend;}, directives: function(value){ if(isDefined(value)) directives = value; return directives;}, scope: function(value){ if(isDefined(value)) template.newScope = template.newScope || value; return template.newScope;} }; try { priority = element.attr('ng:eval-order') || priority || 0; } catch (e) { // for some reason IE throws error under some weird circumstances. so just assume nothing priority = priority || 0; } element.addClass(elementNamespace); if (isString(priority)) { priority = PRIORITY[uppercase(priority)] || parseInt(priority, 10); } template = new Template(priority); eachAttribute(element, function(value, name){ if (!widget) { if (widget = self.widgets('@' + name)) { element.addClass('ng-attr-widget'); widget = bind(selfApi, widget, value, element); } } }); if (!widget) { if (widget = self.widgets(elementName)) { if (elementNamespace) element.addClass('ng-widget'); widget = bind(selfApi, widget, element); } } if (widget) { descend = false; directives = false; var parent = element.parent(); template.addInit(widget.call(selfApi, element)); if (parent && parent[0]) { element = jqLite(parent[0].childNodes[elementIndex]); } } if (descend){ // process markup for text nodes only for(var i=0, child=element[0].childNodes; i