From d9b58f23f6b3fe5635c3ec5259e6a0002cff78b7 Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Tue, 25 Oct 2011 14:14:18 -0700 Subject: move(compiler): appease the History God - renamed: src/Compiler.js -> src/service/compiler.js - renamed: test/CompilerSpec.js -> test/service/compilerSpec.js --- src/service/compiler.js | 328 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 328 insertions(+) create mode 100644 src/service/compiler.js (limited to 'src/service/compiler.js') diff --git a/src/service/compiler.js b/src/service/compiler.js new file mode 100644 index 00000000..ee768a9d --- /dev/null +++ b/src/service/compiler.js @@ -0,0 +1,328 @@ +'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() { + this.paths = []; + this.children = []; + this.linkFns = []; + this.newScope = false; +} + +Template.prototype = { + link: function(element, scope) { + var childScope = scope; + if (this.newScope) { + childScope = isFunction(this.newScope) ? scope.$new(this.newScope(scope)) : scope.$new(); + element.data($$scope, childScope); + } + forEach(this.linkFns, function(fn) { + try { + childScope.$service.invoke(childScope, fn, [element]); + } catch (e) { + childScope.$service('$exceptionHandler')(e); + } + }); + var i, + childNodes = element[0].childNodes, + children = this.children, + paths = this.paths, + length = paths.length; + for (i = 0; i < length; i++) { + // sometimes `element` can be modified by one of the linker functions in `this.linkFns` + // and childNodes may be added or removed + // TODO: element structure needs to be re-evaluated if new children added + // if the childNode still exists + if (childNodes[paths[i]]) + children[i].link(jqLite(childNodes[paths[i]]), childScope); + else + delete paths[i]; // if child no longer available, delete path + } + }, + + + addLinkFn:function(linkingFn) { + if (linkingFn) { + this.linkFns.push(linkingFn); + } + }, + + + addChild: function(index, template) { + if (template) { + this.paths.push(index); + this.children.push(template); + } + }, + + empty: function() { + return this.linkFns.length === 0 && this.paths.length === 0; + } +}; + +/////////////////////////////////// +//Compiler +////////////////////////////////// + +/** + * @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.
+ * * `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:
+ * var scope = angular.injector()('$rootScope');
+ * var element = angular.compile('{{total}}
')(scope);
+ *
+ *
+ * - 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('