').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;
- };
- },
-
- 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(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 (descend){
- // process markup for text nodes only
- for(var i=0, child=element[0].childNodes;
- i
+ // 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:
`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;
+ }
+ }
+ }
+ 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){
+ 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.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" + html + "
");
- compiler.compile(e)($rootScope);
- return scope = $rootScope;
- };
- }));
-
-
- it('should not allow compilation of multiple roots', function() {
- expect(function() {
- compiler.compile('A
');
- }).toThrow("Cannot compile multiple element roots: " + ie("A
"));
- function ie(text) {
- return msie < 9 ? uppercase(text) : text;
- }
- });
-
-
- it('should recognize a directive', inject(function($rootScope) {
- var e = jqLite('');
- directives.directive = function(expression, element){
- log += "found";
- expect(expression).toEqual("expr");
- expect(element).toEqual(e);
- return function initFn() {
- log += ":init";
- };
- };
- var template = compiler.compile(e);
- expect(log).toEqual("found");
- scope = template($rootScope);
- expect(e.hasClass('ng-directive')).toEqual(true);
- expect(log).toEqual("found:init");
- }));
-
-
- it('should recurse to children', function() {
- scope = compile('
');
- expect(log).toEqual("hello misko");
- });
-
-
- it('should observe scope', function() {
- scope = compile('');
- expect(log).toEqual("");
- scope.$digest();
- scope.name = 'misko';
- scope.$digest();
- scope.$digest();
- scope.name = 'adam';
- scope.$digest();
- scope.$digest();
- expect(log).toEqual(":misko:adam");
- });
-
-
- it('should prevent descend', function() {
- directives.stop = function() { this.descend(false); };
- scope = compile('');
- expect(log).toEqual("hello misko");
- });
-
-
- it('should allow creation of templates', inject(function($rootScope) {
- directives.duplicate = function(expr, element){
- element.replaceWith(document.createComment("marker"));
- element.removeAttr("duplicate");
- var linker = this.compile(element);
- return function(marker) {
- this.$watch('value', function() {
- var scope = $rootScope.$new;
- linker(scope, noop);
- marker.after(scope.$element);
- });
- };
- };
- scope = compile('beforexafter');
- expect(sortedHtml(scope.$element)).
- toEqual('' +
- 'before<#comment>' +
- 'after' +
- '
');
- scope.value = 1;
- scope.$digest();
- expect(sortedHtml(scope.$element)).
- toEqual('' +
- 'before<#comment>' +
- 'x' +
- 'after' +
- '
');
- scope.value = 2;
- scope.$digest();
- expect(sortedHtml(scope.$element)).
- toEqual('' +
- 'before<#comment>' +
- 'x' +
- 'x' +
- 'after' +
- '
');
- scope.value = 3;
- scope.$digest();
- expect(sortedHtml(scope.$element)).
- toEqual('' +
- 'before<#comment>' +
- 'x' +
- 'x' +
- 'x' +
- 'after' +
- '
');
- }));
-
-
- it('should process markup before directives', function() {
- markup.push(function(text, textNode, parentNode) {
- if (text == 'middle') {
- expect(textNode.text()).toEqual(text);
- parentNode.attr('hello', text);
- textNode[0].nodeValue = 'replaced';
- }
- });
- scope = compile('beforemiddleafter');
- expect(sortedHtml(scope.$element[0], true)).toEqual('beforereplacedafter
');
- expect(log).toEqual("hello middle");
- });
-
-
- it('should replace widgets', function() {
- widgets['NG:BUTTON'] = function(element) {
- expect(element.hasClass('ng-widget')).toEqual(true);
- element.replaceWith('button
');
- return function(element) {
- log += 'init';
- };
- };
- scope = compile('push me');
- expect(lowercase(scope.$element[0].innerHTML)).toEqual('button
');
- expect(log).toEqual('init');
- });
-
-
- it('should use the replaced element after calling widget', function() {
- widgets['H1'] = function(element) {
- // HTML elements which are augmented by acting as widgets, should not be marked as so
- expect(element.hasClass('ng-widget')).toEqual(false);
- var span = angular.element('{{1+2}}');
- element.replaceWith(span);
- this.descend(true);
- this.directives(true);
- return noop;
- };
- markup.push(function(text, textNode, parent){
- if (text == '{{1+2}}')
- parent.text('3');
- });
- scope = compile('ignore me
');
- expect(scope.$element.text()).toEqual('3');
- });
-
-
- it('should allow multiple markups per text element', function() {
- markup.push(function(text, textNode, parent){
- var index = text.indexOf('---');
- if (index > -1) {
- textNode.after(text.substring(index + 3));
- textNode.after("
");
- textNode.after(text.substring(0, index));
- textNode.remove();
- }
- });
- markup.push(function(text, textNode, parent){
- var index = text.indexOf('===');
- if (index > -1) {
- textNode.after(text.substring(index + 3));
- textNode.after("");
- textNode.after(text.substring(0, index));
- textNode.remove();
- }
- });
- scope = compile('A---B---C===D');
- expect(sortedHtml(scope.$element)).toEqual('
');
- });
-
-
- it('should add class for namespace elements', function() {
- scope = compile('abc');
- var space = jqLite(scope.$element[0].firstChild);
- expect(space.hasClass('ng-space')).toEqual(true);
- });
-});
diff --git a/test/service/compilerSpec.js b/test/service/compilerSpec.js
new file mode 100644
index 00000000..2dec1396
--- /dev/null
+++ b/test/service/compilerSpec.js
@@ -0,0 +1,218 @@
+'use strict';
+
+describe('compiler', function() {
+ var compiler, markup, attrMarkup, directives, widgets, compile, log, scope;
+
+ beforeEach(inject(function($rootScope) {
+ log = "";
+ directives = {
+ hello: function(expression, element){
+ log += "hello ";
+ return function() {
+ log += expression;
+ };
+ },
+
+ observe: function(expression, element){
+ return function() {
+ this.$watch(expression, function(scope, val){
+ if (val)
+ log += ":" + val;
+ });
+ };
+ }
+
+ };
+ markup = [];
+ attrMarkup = [];
+ widgets = extensionMap({}, 'widget');
+ compiler = new Compiler(markup, attrMarkup, directives, widgets);
+ compile = function(html){
+ var e = jqLite("" + html + "
");
+ compiler.compile(e)($rootScope);
+ return scope = $rootScope;
+ };
+ }));
+
+
+ it('should not allow compilation of multiple roots', function() {
+ expect(function() {
+ compiler.compile('A
');
+ }).toThrow("Cannot compile multiple element roots: " + ie("A
"));
+ function ie(text) {
+ return msie < 9 ? uppercase(text) : text;
+ }
+ });
+
+
+ it('should recognize a directive', inject(function($rootScope) {
+ var e = jqLite('');
+ directives.directive = function(expression, element){
+ log += "found";
+ expect(expression).toEqual("expr");
+ expect(element).toEqual(e);
+ return function initFn() {
+ log += ":init";
+ };
+ };
+ var template = compiler.compile(e);
+ expect(log).toEqual("found");
+ scope = template($rootScope);
+ expect(e.hasClass('ng-directive')).toEqual(true);
+ expect(log).toEqual("found:init");
+ }));
+
+
+ it('should recurse to children', function() {
+ scope = compile('
');
+ expect(log).toEqual("hello misko");
+ });
+
+
+ it('should observe scope', function() {
+ scope = compile('');
+ expect(log).toEqual("");
+ scope.$digest();
+ scope.name = 'misko';
+ scope.$digest();
+ scope.$digest();
+ scope.name = 'adam';
+ scope.$digest();
+ scope.$digest();
+ expect(log).toEqual(":misko:adam");
+ });
+
+
+ it('should prevent descend', function() {
+ directives.stop = function() { this.descend(false); };
+ scope = compile('');
+ expect(log).toEqual("hello misko");
+ });
+
+
+ it('should allow creation of templates', inject(function($rootScope) {
+ directives.duplicate = function(expr, element){
+ element.replaceWith(document.createComment("marker"));
+ element.removeAttr("duplicate");
+ var linker = this.compile(element);
+ return function(marker) {
+ this.$watch('value', function() {
+ var scope = $rootScope.$new;
+ linker(scope, noop);
+ marker.after(scope.$element);
+ });
+ };
+ };
+ scope = compile('beforexafter');
+ expect(sortedHtml(scope.$element)).
+ toEqual('' +
+ 'before<#comment>' +
+ 'after' +
+ '
');
+ scope.value = 1;
+ scope.$digest();
+ expect(sortedHtml(scope.$element)).
+ toEqual('' +
+ 'before<#comment>' +
+ 'x' +
+ 'after' +
+ '
');
+ scope.value = 2;
+ scope.$digest();
+ expect(sortedHtml(scope.$element)).
+ toEqual('' +
+ 'before<#comment>' +
+ 'x' +
+ 'x' +
+ 'after' +
+ '
');
+ scope.value = 3;
+ scope.$digest();
+ expect(sortedHtml(scope.$element)).
+ toEqual('' +
+ 'before<#comment>' +
+ 'x' +
+ 'x' +
+ 'x' +
+ 'after' +
+ '
');
+ }));
+
+
+ it('should process markup before directives', function() {
+ markup.push(function(text, textNode, parentNode) {
+ if (text == 'middle') {
+ expect(textNode.text()).toEqual(text);
+ parentNode.attr('hello', text);
+ textNode[0].nodeValue = 'replaced';
+ }
+ });
+ scope = compile('beforemiddleafter');
+ expect(sortedHtml(scope.$element[0], true)).toEqual('beforereplacedafter
');
+ expect(log).toEqual("hello middle");
+ });
+
+
+ it('should replace widgets', function() {
+ widgets['NG:BUTTON'] = function(element) {
+ expect(element.hasClass('ng-widget')).toEqual(true);
+ element.replaceWith('button
');
+ return function(element) {
+ log += 'init';
+ };
+ };
+ scope = compile('push me');
+ expect(lowercase(scope.$element[0].innerHTML)).toEqual('button
');
+ expect(log).toEqual('init');
+ });
+
+
+ it('should use the replaced element after calling widget', function() {
+ widgets['H1'] = function(element) {
+ // HTML elements which are augmented by acting as widgets, should not be marked as so
+ expect(element.hasClass('ng-widget')).toEqual(false);
+ var span = angular.element('{{1+2}}');
+ element.replaceWith(span);
+ this.descend(true);
+ this.directives(true);
+ return noop;
+ };
+ markup.push(function(text, textNode, parent){
+ if (text == '{{1+2}}')
+ parent.text('3');
+ });
+ scope = compile('ignore me
');
+ expect(scope.$element.text()).toEqual('3');
+ });
+
+
+ it('should allow multiple markups per text element', function() {
+ markup.push(function(text, textNode, parent){
+ var index = text.indexOf('---');
+ if (index > -1) {
+ textNode.after(text.substring(index + 3));
+ textNode.after("
");
+ textNode.after(text.substring(0, index));
+ textNode.remove();
+ }
+ });
+ markup.push(function(text, textNode, parent){
+ var index = text.indexOf('===');
+ if (index > -1) {
+ textNode.after(text.substring(index + 3));
+ textNode.after("");
+ textNode.after(text.substring(0, index));
+ textNode.remove();
+ }
+ });
+ scope = compile('A---B---C===D');
+ expect(sortedHtml(scope.$element)).toEqual('
');
+ });
+
+
+ it('should add class for namespace elements', function() {
+ scope = compile('abc');
+ var space = jqLite(scope.$element[0].firstChild);
+ expect(space.hasClass('ng-space')).toEqual(true);
+ });
+});
--
cgit v1.2.3