mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 15:40:22 +00:00
fe5240732d
the flag must be in all src and test files so that we get the benefit of running in the strict mode even in jstd the following script was used to modify all files: for file in `find src test -name "*.js"`; do echo -e "'use strict';\n" > temp.txt cat $file >> temp.txt mv temp.txt $file done
395 lines
14 KiB
JavaScript
395 lines
14 KiB
JavaScript
'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 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>
|
|
// 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('<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>'),
|
|
scope = angular.compile(template)();
|
|
// 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 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)` 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.
|
|
* <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 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(),
|
|
* 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`
|
|
* </pre>
|
|
*
|
|
*
|
|
* 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('<div>').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 change 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
|
|
<doc:example>
|
|
<doc:source>
|
|
<div>TOTAL: without ng:eval-order {{ items.$sum('total') | currency }}</div>
|
|
<div ng:eval-order='LAST'>TOTAL: with ng:eval-order {{ items.$sum('total') | currency }}</div>
|
|
<table ng:init="items=[{qty:1, cost:9.99, desc:'gadget'}]">
|
|
<tr>
|
|
<td>QTY</td>
|
|
<td>Description</td>
|
|
<td>Cost</td>
|
|
<td>Total</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr ng:repeat="item in items">
|
|
<td><input name="item.qty"/></td>
|
|
<td><input name="item.desc"/></td>
|
|
<td><input name="item.cost"/></td>
|
|
<td>{{item.total = item.qty * item.cost | currency}}</td>
|
|
<td><a href="" ng:click="items.$remove(item)">X</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3"><a href="" ng:click="items.$add()">add</a></td>
|
|
<td>{{ items.$sum('total') | currency }}</td>
|
|
</tr>
|
|
</table>
|
|
</doc:source>
|
|
<doc:scenario>
|
|
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');
|
|
});
|
|
</doc:scenario>
|
|
</doc:example>
|
|
*/
|
|
|
|
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<child.length; i++) {
|
|
if (isTextNode(child[i])) {
|
|
forEach(self.markup, function(markup){
|
|
if (i<child.length) {
|
|
var textNode = jqLite(child[i]);
|
|
markup.call(selfApi, textNode.text(), textNode, element);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
if (directives) {
|
|
// Process attributes/directives
|
|
eachAttribute(element, function(value, name){
|
|
forEach(self.attrMarkup, function(markup){
|
|
markup.call(selfApi, value, name, element);
|
|
});
|
|
});
|
|
eachAttribute(element, function(value, name){
|
|
fn = directiveFns[name];
|
|
if (fn) {
|
|
element.addClass('ng-directive');
|
|
template.addInit((directiveFns[name]).call(selfApi, value, element));
|
|
}
|
|
});
|
|
}
|
|
// Process non text child nodes
|
|
if (descend) {
|
|
eachNode(element, function(child, i){
|
|
template.addChild(i, self.templatize(child, i, priority));
|
|
});
|
|
}
|
|
return template.empty() ? null : template;
|
|
}
|
|
};
|
|
|
|
function eachNode(element, fn){
|
|
var i, chldNodes = element[0].childNodes || [], chld;
|
|
for (i = 0; i < chldNodes.length; i++) {
|
|
if(!isTextNode(chld = chldNodes[i])) {
|
|
fn(jqLite(chld), i);
|
|
}
|
|
}
|
|
}
|
|
|
|
function eachAttribute(element, fn){
|
|
var i, attrs = element[0].attributes || [], chld, attr, name, value, attrValue = {};
|
|
for (i = 0; i < attrs.length; i++) {
|
|
attr = attrs[i];
|
|
name = attr.name;
|
|
value = attr.value;
|
|
if (msie && name == 'href') {
|
|
value = decodeURIComponent(element[0].getAttribute(name, 2));
|
|
}
|
|
attrValue[name] = value;
|
|
}
|
|
forEachSorted(attrValue, fn);
|
|
}
|
|
|