From d12df0d360fe0dabdca3591654327834bee2803b Mon Sep 17 00:00:00 2001
From: Misko Hevery
Date: Tue, 25 Oct 2011 22:21:21 -0700
Subject: refactor(compiler) turn compiler into a service
BREAK
- remove angular.compile() since the compile method is now a service and needs to be injected
---
src/Angular.js | 7 +-
src/AngularPublic.js | 1 -
src/service/compiler.js | 569 +++++++++++++++++++++++++-----------------------
src/widget/select.js | 5 +-
4 files changed, 295 insertions(+), 287 deletions(-)
(limited to 'src')
diff --git a/src/Angular.js b/src/Angular.js
index 0ef1af8e..9b0c4e23 100644
--- a/src/Angular.js
+++ b/src/Angular.js
@@ -854,11 +854,6 @@ function toBoolean(value) {
}
-/** @name angular.compile */
-function compile(element) {
- return new Compiler(angularTextMarkup, angularAttrMarkup, angularDirective, angularWidget)
- .compile(element);
-}
/////////////////////////////////////////////////
/**
@@ -956,7 +951,7 @@ function angularInit(config, document){
injector = createInjector(),
scope = injector('$rootScope');
- compile(element)(scope);
+ injector('$compile')(element)(scope);
scope.$apply();
}
}
diff --git a/src/AngularPublic.js b/src/AngularPublic.js
index 308ea9c0..3ed0eab7 100644
--- a/src/AngularPublic.js
+++ b/src/AngularPublic.js
@@ -14,7 +14,6 @@ angularService('$browser', function($log, $sniffer) {
extend(angular, {
// disabled for now until we agree on public name
//'annotate': annotate,
- 'compile': compile,
'copy': copy,
'extend': extend,
'equals': equals,
diff --git a/src/service/compiler.js b/src/service/compiler.js
index ee768a9d..c1728f7d 100644
--- a/src/service/compiler.js
+++ b/src/service/compiler.js
@@ -1,307 +1,321 @@
'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;
-}
+// TODO(misko): temporary services to get the compiler working;
+angularService('$textMarkup', valueFn(angularTextMarkup));
+angularService('$attrMarkup', valueFn(angularAttrMarkup));
+angularService('$directive', valueFn(angularDirective));
+angularService('$widget', valueFn(angularWidget));
-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);
+angularServiceInject('$compile', function($injector, $exceptionHandler, $textMarkup, $attrMarkup, $directive, $widget){
+ /**
+ * 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);
}
- });
- 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
- }
- },
+ forEach(this.linkFns, function(fn) {
+ try {
+ childScope.$service.invoke(childScope, fn, [element]);
+ } catch (e) {
+ $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);
- }
- },
+ addLinkFn:function(linkingFn) {
+ if (linkingFn) {
+ this.linkFns.push(linkingFn);
+ }
+ },
+
+ addChild: function(index, template) {
+ if (template) {
+ this.paths.push(index);
+ this.children.push(template);
+ }
+ },
- 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;
}
- },
+ };
- empty: function() {
- return this.linkFns.length === 0 && this.paths.length === 0;
- }
-};
+ ///////////////////////////////////
+ //Compiler
+ //////////////////////////////////
-///////////////////////////////////
-//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)();
-/**
- * @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
- 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:
`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 element of the template. It is either the original element
- * passed in, or the clone of the element if the `cloneAttachFn` is provided.
- *
- * It is important to understand that the returned scope is "linked" to the view DOM, but no linking
- * (instance) functions registered by {@link angular.directive directives} or
- * {@link angular.widget widgets} found in the template have been executed yet. This means that the
- * view is likely empty and doesn't contain any values that result from evaluation on the scope. To
- * bring the view to life, the scope needs to run through a $digest phase which typically is done by
- * Angular automatically, except for the case when an application is being
- * {@link guide/dev_guide.bootstrap.manual_bootstrap} manually bootstrapped, in which case the
- * $digest phase must be invoked by calling {@link angular.scope.$apply}.
- *
- * 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 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;
-}
+ // 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:
`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 element of the template. It is either the original element
+ * passed in, or the clone of the element if the `cloneAttachFn` is provided.
+ *
+ * It is important to understand that the returned scope is "linked" to the view DOM, but no linking
+ * (instance) functions registered by {@link angular.directive directives} or
+ * {@link angular.widget widgets} found in the template have been executed yet. This means that the
+ * view is likely empty and doesn't contain any values that result from evaluation on the scope. To
+ * bring the view to life, the scope needs to run through a $digest phase which typically is done by
+ * Angular automatically, except for the case when an application is being
+ * {@link guide/dev_guide.bootstrap.manual_bootstrap} manually bootstrapped, in which case the
+ * $digest phase must be invoked by calling {@link angular.scope.$apply}.
+ *
+ * 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 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('').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;
+ 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) || new Template();
- return function(scope, cloneConnectFn){
- assertArg(scope, 'scope');
- // 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;
- element.data($$scope, scope);
- scope.$element = element;
- (cloneConnectFn||noop)(element, scope);
- template.link(element, scope);
- return element;
- };
- },
+ template = this.templatize(templateElement, index) || new Template();
+ return function(scope, cloneConnectFn){
+ assertArg(scope, 'scope');
+ // 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;
+ element.data($$scope, scope);
+ scope.$element = element;
+ (cloneConnectFn||noop)(element, scope);
+ template.link(element, scope);
+ return element;
+ };
+ },
- templatize: function(element, elementIndex){
- 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;}
- };
- element.addClass(elementNamespace);
- template = new Template();
- eachAttribute(element, function(value, name){
+ templatize: function(element, elementIndex){
+ 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;}
+ };
+ element.addClass(elementNamespace);
+ template = new Template();
+ 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('@' + name))) {
- element.addClass('ng-attr-widget');
- widget = bind(selfApi, widget, value, element);
+ if ((widget = self.widgets(elementName))) {
+ if (elementNamespace)
+ element.addClass('ng-widget');
+ widget = bind(selfApi, widget, 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.addLinkFn(widget.call(selfApi, element));
- if (parent && parent[0]) {
- element = jqLite(parent[0].childNodes[elementIndex]);
+ if (widget) {
+ descend = false;
+ directives = false;
+ var parent = element.parent();
+ template.addLinkFn(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