diff --git a/docs/guide.bootstrap.ngdoc b/docs/guide.bootstrap.ngdoc index 835fe494..fd35b641 100644 --- a/docs/guide.bootstrap.ngdoc +++ b/docs/guide.bootstrap.ngdoc @@ -50,7 +50,7 @@ equivalent to the code in the previous section. (function(window, previousOnLoad){ window.onload = function(){ try { (previousOnLoad||angular.noop)(); } catch(e) {} - angular.compile(window.document).$init(); + angular.compile(window.document)(); }; })(window, window.onload); diff --git a/src/Angular.js b/src/Angular.js index 05b9989e..e47931ba 100644 --- a/src/Angular.js +++ b/src/Angular.js @@ -774,55 +774,7 @@ function merge(src, dst) { } -/** - * @workInProgress - * @ngdoc function - * @name angular.compile - * @function - * - * @description - * Compiles a piece of HTML string or DOM into a view and produces a linking function, which can - * then be used to link {@link angular.scope scope} and the template together. The compilation - * process walks the DOM tree and tries 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 linking function which is then returned. The linking function can then be used - * many-times-over on clones of compiled DOM structure, (For example when compiling - * {@link angular.widget.@ng:repeat repeater} the resulting linking function is called once for - * each item in the collection. The `ng:repeat` does this by cloning the template DOM once for - * each item in collection and then calling the linking function to link the cloned template - * with the a new scope for each item in the collection.) - * -
-    var mvc1 = angular.compile(window.document)();
-    mvc1.view; // compiled view elment
-    mvc1.scope; // scope bound to the element
-
-    var mvc2 = angular.compile('
click me
')(); -
- * - * @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 element - * and scope. Where: - * - * * `scope` - {@link angular.scope scope} A 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` allowing the caller to attach the - * clonned elements to the DOM at the approriate place. The `cloneAttachFn` is - * called as:
`cloneAttachFn(clonedElement, scope)`: - * - * * `clonedElement` - is a clone of the originale `element` passed into the compiler. - * * `scope` - is the current scope with which the linking function is working with. - * - * Calling the template function returns object: `{scope:?, view:?}`, where: - * - * * `view` - the DOM element which represents the compiled template. Either same or clone of - * `element` specifed in compile or template function. - * * `scope` - scope to which the element is bound to. Either a root scope or scope specified - * in the template function. - */ +/** @name angular.compile */ function compile(element) { return new Compiler(angularTextMarkup, angularAttrMarkup, angularDirective, angularWidget) .compile(element); diff --git a/src/Compiler.js b/src/Compiler.js index ae7bf83c..4be7e116 100644 --- a/src/Compiler.js +++ b/src/Compiler.js @@ -71,6 +71,76 @@ Template.prototype = { /////////////////////////////////// //Compiler ////////////////////////////////// + +/** + * @workInProgress + * @ngdoc function + * @name angular.compile + * @function + * + * @description + * Compiles a piece of HTML string or DOM into a view and produces a linking function, which can + * then be used to link {@link angular.scope scope} and the template together. The compilation + * process walks the DOM tree and tries 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 linking function which is then returned. The linking function can then be used + * many-times-over on clones of compiled DOM structure, (For example when compiling + * {@link angular.widget.@ng:repeat repeater} the resulting linking function is called once for + * each item in the collection. The `ng:repeat` does this by cloning the template DOM once for + * each item in collection and then calling the linking function to link the cloned template + * with the a new scope for each item in the collection.) + * +
+    var mvc1 = angular.compile(window.document)();
+    mvc1.view; // compiled view elment
+    mvc1.scope; // scope bound to the element
+
+    var mvc2 = angular.compile('
click me
')(); +
+ * + * @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 element + * and scope. Where: + * + * * `scope` - {@link angular.scope scope} A 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:
`cloneAttachFn(clonedElement, scope)`: + * + * * `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 + * a new root scope or scope passed into the template function. + * + * If you need access to the compiled view, there are two ways to do it: + * + * - either create the DOM element(s) before you send them to the compiler and keep this reference + * around. This works if you don't need the element to be cloned by the link function. + *
+ *     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 dom that is 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` + *
+ */ function Compiler(markup, attrMarkup, directives, widgets){ this.markup = markup; this.attrMarkup = attrMarkup; @@ -97,7 +167,7 @@ Compiler.prototype = { // 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) // IMPORTAN!!! + ? JQLitePrototype.clone.call(templateElement) // IMPORTANT!!! : templateElement; scope = scope || createScope(); element.data($$scope, scope); @@ -105,7 +175,7 @@ Compiler.prototype = { (cloneConnectFn||noop)(element, scope); template.attach(element, scope); scope.$eval(); - return {scope:scope, view:element}; + return scope; }; }, diff --git a/test/AngularSpec.js b/test/AngularSpec.js index 5b7e33fd..2352cdf8 100644 --- a/test/AngularSpec.js +++ b/test/AngularSpec.js @@ -369,45 +369,51 @@ describe('angular', function(){ }); describe('compile', function(){ - var mvc; + var scope, template; + afterEach(function(){ - dealoc(mvc.view); + dealoc(scope); }); it('should link to existing node and create scope', function(){ - mvc = angular.compile('
{{greeting = "hello world"}}
')(); - expect(mvc.view.text()).toEqual('hello world'); - expect(mvc.scope.greeting).toEqual('hello world'); + template = angular.element('
{{greeting = "hello world"}}
'); + scope = angular.compile(template)(); + expect(template.text()).toEqual('hello world'); + expect(scope.greeting).toEqual('hello world'); }); it('should link to existing node and given scope', function(){ - var scope = angular.scope(); - mvc = angular.compile('
{{greeting = "hello world"}}
')(scope); - expect(mvc.view.text()).toEqual('hello world'); - expect(mvc.scope).toEqual(scope); + scope = angular.scope(); + template = angular.element('
{{greeting = "hello world"}}
'); + angular.compile(template)(scope); + expect(template.text()).toEqual('hello world'); + expect(scope).toEqual(scope); }); it('should link to new node and given scope', function(){ - var scope = angular.scope(); - var template = jqLite('
{{greeting = "hello world"}}
'); + scope = angular.scope(); + template = jqLite('
{{greeting = "hello world"}}
'); + var templateFn = angular.compile(template); var templateClone = template.clone(); - mvc = templateFn(scope, function(clone){ + + templateFn(scope, function(clone){ templateClone = clone; }); + expect(template.text()).toEqual(''); - expect(mvc.view.text()).toEqual('hello world'); - expect(mvc.view).toEqual(templateClone); - expect(mvc.scope.greeting).toEqual('hello world'); + expect(scope.$element.text()).toEqual('hello world'); + expect(scope.$element).toEqual(templateClone); + expect(scope.greeting).toEqual('hello world'); }); it('should link to cloned node and create scope', function(){ - var scope = angular.scope(); - var template = jqLite('
{{greeting = "hello world"}}
'); - mvc = angular.compile(template)(scope, noop); + scope = angular.scope(); + template = jqLite('
{{greeting = "hello world"}}
'); + angular.compile(template)(scope, noop); expect(template.text()).toEqual(''); - expect(mvc.view.text()).toEqual('hello world'); - expect(mvc.scope.greeting).toEqual('hello world'); + expect(scope.$element.text()).toEqual('hello world'); + expect(scope.greeting).toEqual('hello world'); }); }); }); diff --git a/test/BinderSpec.js b/test/BinderSpec.js index 80a950b0..e78980d7 100644 --- a/test/BinderSpec.js +++ b/test/BinderSpec.js @@ -16,7 +16,7 @@ describe('Binder', function(){ return angular.compile(element)(); }; this.compileToHtml = function (content) { - return sortedHtml(this.compile(content).view); + return sortedHtml(this.compile(content).$element); }; }); @@ -28,69 +28,69 @@ describe('Binder', function(){ it('text-field should default to value attribute', function(){ - var state = this.compile(''); - state.scope.$eval(); - assertEquals('abc', state.scope.model.price); + var scope = this.compile(''); + scope.$eval(); + assertEquals('abc', scope.model.price); }); it('ChangingTextareaUpdatesModel', function(){ - var c = this.compile(''); - c.scope.$eval(); - assertEquals(c.scope.model.note, 'abc'); + var scope = this.compile(''); + scope.$eval(); + assertEquals(scope.model.note, 'abc'); }); it('ChangingRadioUpdatesModel', function(){ - var c = this.compile('' + + var scope = this.compile('' + ''); - c.scope.$eval(); - assertEquals(c.scope.model.price, 'A'); + scope.$eval(); + assertEquals(scope.model.price, 'A'); }); it('ChangingCheckboxUpdatesModel', function(){ - var form = this.compile(''); - assertEquals(true, form.scope.model.price); + var scope = this.compile(''); + assertEquals(true, scope.model.price); }); it('BindUpdate', function(){ - var c = this.compile('
'); - assertEquals(123, c.scope.$get('a')); + var scope = this.compile('
'); + assertEquals(123, scope.$get('a')); }); it('ChangingSelectNonSelectedUpdatesModel', function(){ - var form = this.compile(''); - assertEquals('A', form.scope.model.price); + var scope = this.compile(''); + assertEquals('A', scope.model.price); }); it('ChangingMultiselectUpdatesModel', function(){ - var form = this.compile('' + '' + '' + '' + ''); - assertJsonEquals(["A", "B"], form.scope.$get('Invoice').options); + assertJsonEquals(["A", "B"], scope.$get('Invoice').options); }); it('ChangingSelectSelectedUpdatesModel', function(){ - var form = this.compile(''); - assertEquals(form.scope.model.price, 'b'); + var scope = this.compile(''); + assertEquals(scope.model.price, 'b'); }); it('ExecuteInitialization', function(){ - var c = this.compile('
'); - assertEquals(c.scope.$get('a'), 123); + var scope = this.compile('
'); + assertEquals(scope.$get('a'), 123); }); it('ExecuteInitializationStatements', function(){ - var c = this.compile('
'); - assertEquals(c.scope.$get('a'), 123); - assertEquals(c.scope.$get('b'), 345); + var scope = this.compile('
'); + assertEquals(scope.$get('a'), 123); + assertEquals(scope.$get('b'), 345); }); it('ApplyTextBindings', function(){ - var form = this.compile('
x
'); - form.scope.$set('model', {a:123}); - form.scope.$eval(); - assertEquals('123', form.view.text()); + var scope = this.compile('
x
'); + scope.$set('model', {a:123}); + scope.$eval(); + assertEquals('123', scope.$element.text()); }); it('ReplaceBindingInTextWithSpan', function(){ @@ -112,82 +112,81 @@ describe('Binder', function(){ }); it('BindingOfAttributes', function(){ - var c = this.compile(""); - var attrbinding = c.view.attr("ng:bind-attr"); + var scope = this.compile(""); + var attrbinding = scope.$element.attr("ng:bind-attr"); var bindings = fromJson(attrbinding); assertEquals("http://s/a{{b}}c", decodeURI(bindings.href)); assertTrue(!bindings.foo); }); it('MarkMultipleAttributes', function(){ - var c = this.compile(''); - var attrbinding = c.view.attr("ng:bind-attr"); + var scope = this.compile(''); + var attrbinding = scope.$element.attr("ng:bind-attr"); var bindings = fromJson(attrbinding); assertEquals(bindings.foo, "{{d}}"); assertEquals(decodeURI(bindings.href), "http://s/a{{b}}c"); }); it('AttributesNoneBound', function(){ - var c = this.compile(""); - var a = c.view; + var scope = this.compile(""); + var a = scope.$element; assertEquals(a[0].nodeName, "A"); assertTrue(!a.attr("ng:bind-attr")); }); it('ExistingAttrbindingIsAppended', function(){ - var c = this.compile(""); - var a = c.view; + var scope = this.compile(""); + var a = scope.$element; assertEquals('{"b":"{{def}}","href":"http://s/{{abc}}"}', a.attr('ng:bind-attr')); }); it('AttributesAreEvaluated', function(){ - var c = this.compile(''); - var binder = c.binder, form = c.view; - c.scope.$eval('a=1;b=2'); - c.scope.$eval(); - var a = c.view; + var scope = this.compile(''); + scope.$eval('a=1;b=2'); + scope.$eval(); + var a = scope.$element; assertEquals(a.attr('a'), 'a'); assertEquals(a.attr('b'), 'a+b=3'); }); it('InputTypeButtonActionExecutesInScope', function(){ var savedCalled = false; - var c = this.compile(''); - c.scope.$set("person.save", function(){ + var scope = this.compile(''); + scope.$set("person.save", function(){ savedCalled = true; }); - browserTrigger(c.view, 'click'); + browserTrigger(scope.$element, 'click'); assertTrue(savedCalled); }); it('InputTypeButtonActionExecutesInScope2', function(){ var log = ""; - var c = this.compile(''); - c.scope.$set("action", function(){ + var scope = this.compile(''); + scope.$set("action", function(){ log += 'click;'; }); expect(log).toEqual(''); - browserTrigger(c.view, 'click'); + browserTrigger(scope.$element, 'click'); expect(log).toEqual('click;'); }); it('ButtonElementActionExecutesInScope', function(){ var savedCalled = false; - var c = this.compile(''); - c.scope.$set("person.save", function(){ + var scope = this.compile(''); + scope.$set("person.save", function(){ savedCalled = true; }); - browserTrigger(c.view, 'click'); + browserTrigger(scope.$element, 'click'); assertTrue(savedCalled); }); it('RepeaterUpdateBindings', function(){ - var a = this.compile('
'); - var form = a.view; + var scope = this.compile('
'); + var form = scope.$element; var items = [{a:"A"}, {a:"B"}]; - a.scope.$set('model', {items:items}); + scope.$set('model', {items:items}); - a.scope.$eval(); + scope.$eval(); assertEquals('
    ' + '<#comment>' + '
  • A
  • ' + @@ -195,7 +194,7 @@ describe('Binder', function(){ '
', sortedHtml(form)); items.unshift({a:'C'}); - a.scope.$eval(); + scope.$eval(); assertEquals('
    ' + '<#comment>' + '
  • C
  • ' + @@ -204,7 +203,7 @@ describe('Binder', function(){ '
', sortedHtml(form)); items.shift(); - a.scope.$eval(); + scope.$eval(); assertEquals('
    ' + '<#comment>' + '
  • A
  • ' + @@ -213,17 +212,17 @@ describe('Binder', function(){ items.shift(); items.shift(); - a.scope.$eval(); + scope.$eval(); }); it('RepeaterContentDoesNotBind', function(){ - var a = this.compile('
    '); - a.scope.$set('model', {items:[{a:"A"}]}); - a.scope.$eval(); + var scope = this.compile('
    '); + scope.$set('model', {items:[{a:"A"}]}); + scope.$eval(); assertEquals('
      ' + '<#comment>' + '
    • A
    • ' + - '
    ', sortedHtml(a.view)); + '
', sortedHtml(scope.$element)); }); it('DoNotOverwriteCustomAction', function(){ @@ -232,61 +231,60 @@ describe('Binder', function(){ }); it('RepeaterAdd', function(){ - var c = this.compile('
'); - var doc = c.view; - c.scope.$set('items', [{x:'a'}, {x:'b'}]); - c.scope.$eval(); - var first = childNode(c.view, 1); - var second = childNode(c.view, 2); + var scope = this.compile('
'); + scope.$set('items', [{x:'a'}, {x:'b'}]); + scope.$eval(); + var first = childNode(scope.$element, 1); + var second = childNode(scope.$element, 2); assertEquals('a', first.val()); assertEquals('b', second.val()); first.val('ABC'); browserTrigger(first, 'keydown'); - c.scope.$service('$browser').defer.flush(); - assertEquals(c.scope.items[0].x, 'ABC'); + scope.$service('$browser').defer.flush(); + assertEquals(scope.items[0].x, 'ABC'); }); it('ItShouldRemoveExtraChildrenWhenIteratingOverHash', function(){ - var c = this.compile('
{{i}}
'); + var scope = this.compile('
{{i}}
'); var items = {}; - c.scope.$set("items", items); + scope.$set("items", items); - c.scope.$eval(); - expect(c.view[0].childNodes.length - 1).toEqual(0); + scope.$eval(); + expect(scope.$element[0].childNodes.length - 1).toEqual(0); items.name = "misko"; - c.scope.$eval(); - expect(c.view[0].childNodes.length - 1).toEqual(1); + scope.$eval(); + expect(scope.$element[0].childNodes.length - 1).toEqual(1); delete items.name; - c.scope.$eval(); - expect(c.view[0].childNodes.length - 1).toEqual(0); + scope.$eval(); + expect(scope.$element[0].childNodes.length - 1).toEqual(0); }); it('IfTextBindingThrowsErrorDecorateTheSpan', function(){ - var a = this.compile('
{{error.throw()}}
'); - var doc = a.view; - var errorLogs = a.scope.$service('$log').error.logs; + var scope = this.compile('
{{error.throw()}}
'); + var doc = scope.$element; + var errorLogs = scope.$service('$log').error.logs; - a.scope.$set('error.throw', function(){throw "ErrorMsg1";}); - a.scope.$eval(); + scope.$set('error.throw', function(){throw "ErrorMsg1";}); + scope.$eval(); var span = childNode(doc, 0); assertTrue(span.hasClass('ng-exception')); assertTrue(!!span.text().match(/ErrorMsg1/)); assertTrue(!!span.attr('ng-exception').match(/ErrorMsg1/)); assertEquals(['ErrorMsg1'], errorLogs.shift()); - a.scope.$set('error.throw', function(){throw "MyError";}); - a.scope.$eval(); + scope.$set('error.throw', function(){throw "MyError";}); + scope.$eval(); span = childNode(doc, 0); assertTrue(span.hasClass('ng-exception')); assertTrue(span.text(), span.text().match('MyError') !== null); assertEquals('MyError', span.attr('ng-exception')); assertEquals(['MyError'], errorLogs.shift()); - a.scope.$set('error.throw', function(){return "ok";}); - a.scope.$eval(); + scope.$set('error.throw', function(){return "ok";}); + scope.$eval(); assertFalse(span.hasClass('ng-exception')); assertEquals('ok', span.text()); assertEquals(null, span.attr('ng-exception')); @@ -294,19 +292,19 @@ describe('Binder', function(){ }); it('IfAttrBindingThrowsErrorDecorateTheAttribute', function(){ - var a = this.compile('
'); - var doc = a.view; - var errorLogs = a.scope.$service('$log').error.logs; + var scope = this.compile('
'); + var doc = scope.$element; + var errorLogs = scope.$service('$log').error.logs; - a.scope.$set('error.throw', function(){throw "ErrorMsg";}); - a.scope.$eval(); + scope.$set('error.throw', function(){throw "ErrorMsg";}); + scope.$eval(); assertTrue('ng-exception', doc.hasClass('ng-exception')); assertEquals('"ErrorMsg"', doc.attr('ng-exception')); assertEquals('before "ErrorMsg" after', doc.attr('attr')); assertEquals(['ErrorMsg'], errorLogs.shift()); - a.scope.$set('error.throw', function(){ return 'X';}); - a.scope.$eval(); + scope.$set('error.throw', function(){ return 'X';}); + scope.$eval(); assertFalse('!ng-exception', doc.hasClass('ng-exception')); assertEquals('before X after', doc.attr('attr')); assertEquals(null, doc.attr('ng-exception')); @@ -314,12 +312,12 @@ describe('Binder', function(){ }); it('NestedRepeater', function(){ - var a = this.compile('
' + + var scope = this.compile('
' + '
    ' + '
    '); - a.scope.$set('model', [{name:'a', item:['a1', 'a2']}, {name:'b', item:['b1', 'b2']}]); - a.scope.$eval(); + scope.$set('model', [{name:'a', item:['a1', 'a2']}, {name:'b', item:['b1', 'b2']}]); + scope.$eval(); assertEquals('
    '+ '<#comment>'+ @@ -332,121 +330,121 @@ describe('Binder', function(){ '<#comment>'+ '
      '+ '
        '+ - '
        ', sortedHtml(a.view)); + '
        ', sortedHtml(scope.$element)); }); it('HideBindingExpression', function(){ - var a = this.compile('
        '); + var scope = this.compile('
        '); - a.scope.$set('hidden', 3); - a.scope.$eval(); + scope.$set('hidden', 3); + scope.$eval(); - assertHidden(a.view); + assertHidden(scope.$element); - a.scope.$set('hidden', 2); - a.scope.$eval(); + scope.$set('hidden', 2); + scope.$eval(); - assertVisible(a.view); + assertVisible(scope.$element); }); it('HideBinding', function(){ - var c = this.compile('
        '); + var scope = this.compile('
        '); - c.scope.$set('hidden', 'true'); - c.scope.$eval(); + scope.$set('hidden', 'true'); + scope.$eval(); - assertHidden(c.view); + assertHidden(scope.$element); - c.scope.$set('hidden', 'false'); - c.scope.$eval(); + scope.$set('hidden', 'false'); + scope.$eval(); - assertVisible(c.view); + assertVisible(scope.$element); - c.scope.$set('hidden', ''); - c.scope.$eval(); + scope.$set('hidden', ''); + scope.$eval(); - assertVisible(c.view); + assertVisible(scope.$element); }); it('ShowBinding', function(){ - var c = this.compile('
        '); + var scope = this.compile('
        '); - c.scope.$set('show', 'true'); - c.scope.$eval(); + scope.$set('show', 'true'); + scope.$eval(); - assertVisible(c.view); + assertVisible(scope.$element); - c.scope.$set('show', 'false'); - c.scope.$eval(); + scope.$set('show', 'false'); + scope.$eval(); - assertHidden(c.view); + assertHidden(scope.$element); - c.scope.$set('show', ''); - c.scope.$eval(); + scope.$set('show', ''); + scope.$eval(); - assertHidden(c.view); + assertHidden(scope.$element); }); it('BindClassUndefined', function(){ - var doc = this.compile('
        '); - doc.scope.$eval(); + var scope = this.compile('
        '); + scope.$eval(); assertEquals( '
        ', - sortedHtml(doc.view)); + sortedHtml(scope.$element)); }); it('BindClass', function(){ - var c = this.compile('
        '); + var scope = this.compile('
        '); - c.scope.$set('class', 'testClass'); - c.scope.$eval(); + scope.$set('class', 'testClass'); + scope.$eval(); - assertEquals('
        ', sortedHtml(c.view)); + assertEquals('
        ', sortedHtml(scope.$element)); - c.scope.$set('class', ['a', 'b']); - c.scope.$eval(); + scope.$set('class', ['a', 'b']); + scope.$eval(); - assertEquals('
        ', sortedHtml(c.view)); + assertEquals('
        ', sortedHtml(scope.$element)); }); it('BindClassEvenOdd', function(){ - var x = this.compile('
        '); - x.scope.$eval(); - var d1 = jqLite(x.view[0].childNodes[1]); - var d2 = jqLite(x.view[0].childNodes[2]); + var scope = this.compile('
        '); + scope.$eval(); + var d1 = jqLite(scope.$element[0].childNodes[1]); + var d2 = jqLite(scope.$element[0].childNodes[2]); expect(d1.hasClass('o')).toBeTruthy(); expect(d2.hasClass('e')).toBeTruthy(); assertEquals( '
        <#comment>' + '
        ' + '
        ', - sortedHtml(x.view)); + sortedHtml(scope.$element)); }); it('BindStyle', function(){ - var c = this.compile('
        '); + var scope = this.compile('
        '); - c.scope.$eval('style={color:"red"}'); - c.scope.$eval(); + scope.$eval('style={color:"red"}'); + scope.$eval(); - assertEquals("red", c.view.css('color')); + assertEquals("red", scope.$element.css('color')); - c.scope.$eval('style={}'); - c.scope.$eval(); + scope.$eval('style={}'); + scope.$eval(); }); it('ActionOnAHrefThrowsError', function(){ - var c = this.compile('Add Phone'); - c.scope.action = function(){ + var scope = this.compile('Add Phone'); + scope.action = function(){ throw new Error('MyError'); }; - var input = c.view; + var input = scope.$element; browserTrigger(input, 'click'); var error = input.attr('ng-exception'); assertTrue(!!error.match(/MyError/)); assertTrue("should have an error class", input.hasClass('ng-exception')); - assertTrue(!!c.scope.$service('$log').error.logs.shift()[0].message.match(/MyError/)); + assertTrue(!!scope.$service('$log').error.logs.shift()[0].message.match(/MyError/)); // TODO: I think that exception should never get cleared so this portion of test makes no sense //c.scope.action = noop; @@ -456,48 +454,48 @@ describe('Binder', function(){ }); it('ShoulIgnoreVbNonBindable', function(){ - var c = this.compile("
        {{a}}" + + var scope = this.compile("
        {{a}}" + "
        {{a}}
        " + "
        {{b}}
        " + "
        {{c}}
        "); - c.scope.$set('a', 123); - c.scope.$eval(); - assertEquals('123{{a}}{{b}}{{c}}', c.view.text()); + scope.$set('a', 123); + scope.$eval(); + assertEquals('123{{a}}{{b}}{{c}}', scope.$element.text()); }); it('OptionShouldUpdateParentToGetProperBinding', function(){ - var c = this.compile(''); - c.scope.$set('s', 1); - c.scope.$eval(); - assertEquals(1, c.view[0].selectedIndex); + var scope = this.compile(''); + scope.$set('s', 1); + scope.$eval(); + assertEquals(1, scope.$element[0].selectedIndex); }); it('RepeaterShouldBindInputsDefaults', function () { - var c = this.compile('
        '); - c.scope.$set('items', [{}, {name:'misko'}]); - c.scope.$eval(); + var scope = this.compile('
        '); + scope.$set('items', [{}, {name:'misko'}]); + scope.$eval(); - assertEquals("123", c.scope.$eval('items[0].name')); - assertEquals("misko", c.scope.$eval('items[1].name')); + assertEquals("123", scope.$eval('items[0].name')); + assertEquals("misko", scope.$eval('items[1].name')); }); it('ShouldTemplateBindPreElements', function () { - var c = this.compile('
        Hello {{name}}!
        '); - c.scope.$set("name", "World"); - c.scope.$eval(); + var scope = this.compile('
        Hello {{name}}!
        '); + scope.$set("name", "World"); + scope.$eval(); - assertEquals('
        Hello World!
        ', sortedHtml(c.view)); + assertEquals('
        Hello World!
        ', sortedHtml(scope.$element)); }); it('FillInOptionValueWhenMissing', function(){ - var c = this.compile( + var scope = this.compile( ''); - c.scope.$set('a', 'A'); - c.scope.$set('b', 'B'); - c.scope.$eval(); - var optionA = childNode(c.view, 0); - var optionB = childNode(c.view, 1); - var optionC = childNode(c.view, 2); + scope.$set('a', 'A'); + scope.$set('b', 'B'); + scope.$eval(); + var optionA = childNode(scope.$element, 0); + var optionB = childNode(scope.$element, 1); + var optionC = childNode(scope.$element, 2); expect(optionA.attr('value')).toEqual('A'); expect(optionA.text()).toEqual('A'); @@ -510,54 +508,54 @@ describe('Binder', function(){ }); it('ValidateForm', function(){ - var c = this.compile('
        ' + + var scope = this.compile('
        ' + '
        ', jqLite(document.body)); var items = [{}, {}]; - c.scope.$set("items", items); - c.scope.$eval(); - assertEquals(3, c.scope.$service('$invalidWidgets').length); + scope.$set("items", items); + scope.$eval(); + assertEquals(3, scope.$service('$invalidWidgets').length); - c.scope.$set('name', ''); - c.scope.$eval(); - assertEquals(3, c.scope.$service('$invalidWidgets').length); + scope.$set('name', ''); + scope.$eval(); + assertEquals(3, scope.$service('$invalidWidgets').length); - c.scope.$set('name', ' '); - c.scope.$eval(); - assertEquals(3, c.scope.$service('$invalidWidgets').length); + scope.$set('name', ' '); + scope.$eval(); + assertEquals(3, scope.$service('$invalidWidgets').length); - c.scope.$set('name', 'abc'); - c.scope.$eval(); - assertEquals(2, c.scope.$service('$invalidWidgets').length); + scope.$set('name', 'abc'); + scope.$eval(); + assertEquals(2, scope.$service('$invalidWidgets').length); items[0].name = 'abc'; - c.scope.$eval(); - assertEquals(1, c.scope.$service('$invalidWidgets').length); + scope.$eval(); + assertEquals(1, scope.$service('$invalidWidgets').length); items[1].name = 'abc'; - c.scope.$eval(); - assertEquals(0, c.scope.$service('$invalidWidgets').length); + scope.$eval(); + assertEquals(0, scope.$service('$invalidWidgets').length); }); it('ValidateOnlyVisibleItems', function(){ - var c = this.compile('
        ', jqLite(document.body)); - c.scope.$set("show", true); - c.scope.$eval(); - assertEquals(2, c.scope.$service('$invalidWidgets').length); + var scope = this.compile('
        ', jqLite(document.body)); + scope.$set("show", true); + scope.$eval(); + assertEquals(2, scope.$service('$invalidWidgets').length); - c.scope.$set("show", false); - c.scope.$eval(); - assertEquals(1, c.scope.$service('$invalidWidgets').visible()); + scope.$set("show", false); + scope.$eval(); + assertEquals(1, scope.$service('$invalidWidgets').visible()); }); it('DeleteAttributeIfEvaluatesFalse', function(){ - var c = this.compile('
        ' + + var scope = this.compile('
        ' + '' + '' + '
        '); - c.scope.$eval(); + scope.$eval(); function assertChild(index, disabled) { - var child = childNode(c.view, index); + var child = childNode(scope.$element, index); assertEquals(sortedHtml(child), disabled, !!child.attr('disabled')); } @@ -570,15 +568,15 @@ describe('Binder', function(){ }); it('ItShouldDisplayErrorWhenActionIsSyntacticlyIncorrect', function(){ - var c = this.compile('
        ' + + var scope = this.compile('
        ' + '' + '
        '); - var first = jqLite(c.view[0].childNodes[0]); - var second = jqLite(c.view[0].childNodes[1]); - var errorLogs = c.scope.$service('$log').error.logs; + var first = jqLite(scope.$element[0].childNodes[0]); + var second = jqLite(scope.$element[0].childNodes[1]); + var errorLogs = scope.$service('$log').error.logs; browserTrigger(first, 'click'); - assertEquals("ABC", c.scope.greeting); + assertEquals("ABC", scope.greeting); expect(errorLogs).toEqual([]); browserTrigger(second, 'click'); @@ -587,70 +585,70 @@ describe('Binder', function(){ }); it('ItShouldSelectTheCorrectRadioBox', function(){ - var c = this.compile('
        ' + + var scope = this.compile('
        ' + '' + '
        '); - var female = jqLite(c.view[0].childNodes[0]); - var male = jqLite(c.view[0].childNodes[1]); + var female = jqLite(scope.$element[0].childNodes[0]); + var male = jqLite(scope.$element[0].childNodes[1]); browserTrigger(female); - assertEquals("female", c.scope.sex); + assertEquals("female", scope.sex); assertEquals(true, female[0].checked); assertEquals(false, male[0].checked); assertEquals("female", female.val()); browserTrigger(male); - assertEquals("male", c.scope.sex); + assertEquals("male", scope.sex); assertEquals(false, female[0].checked); assertEquals(true, male[0].checked); assertEquals("male", male.val()); }); it('ItShouldRepeatOnHashes', function(){ - var x = this.compile('
        '); - x.scope.$eval(); + var scope = this.compile('
        '); + scope.$eval(); assertEquals('
          ' + '<#comment>' + '
        • a0
        • ' + '
        • b1
        • ' + '
        ', - sortedHtml(x.view)); + sortedHtml(scope.$element)); }); it('ItShouldFireChangeListenersBeforeUpdate', function(){ - var x = this.compile('
        '); - x.scope.$set("name", ""); - x.scope.$watch("watched", "name=123"); - x.scope.$set("watched", "change"); - x.scope.$eval(); - assertEquals(123, x.scope.$get("name")); + var scope = this.compile('
        '); + scope.$set("name", ""); + scope.$watch("watched", "name=123"); + scope.$set("watched", "change"); + scope.$eval(); + assertEquals(123, scope.$get("name")); assertEquals( '
        123
        ', - sortedHtml(x.view)); + sortedHtml(scope.$element)); }); it('ItShouldHandleMultilineBindings', function(){ - var x = this.compile('
        {{\n 1 \n + \n 2 \n}}
        '); - x.scope.$eval(); - assertEquals("3", x.view.text()); + var scope = this.compile('
        {{\n 1 \n + \n 2 \n}}
        '); + scope.$eval(); + assertEquals("3", scope.$element.text()); }); it('ItBindHiddenInputFields', function(){ - var x = this.compile(''); - x.scope.$eval(); - assertEquals("abc", x.scope.$get("myName")); + var scope = this.compile(''); + scope.$eval(); + assertEquals("abc", scope.$get("myName")); }); it('ItShouldUseFormaterForText', function(){ - var x = this.compile(''); - x.scope.$eval(); - assertEquals(['a','b'], x.scope.$get('a')); - var input = x.view; + var scope = this.compile(''); + scope.$eval(); + assertEquals(['a','b'], scope.$get('a')); + var input = scope.$element; input[0].value = ' x,,yz'; browserTrigger(input, 'change'); - assertEquals(['x','yz'], x.scope.$get('a')); - x.scope.$set('a', [1 ,2, 3]); - x.scope.$eval(); + assertEquals(['x','yz'], scope.$get('a')); + scope.$set('a', [1 ,2, 3]); + scope.$eval(); assertEquals('1, 2, 3', input[0].value); }); diff --git a/test/CompilerSpec.js b/test/CompilerSpec.js index b1a881fb..b9505192 100644 --- a/test/CompilerSpec.js +++ b/test/CompilerSpec.js @@ -1,5 +1,5 @@ describe('compiler', function(){ - var compiler, markup, directives, widgets, compile, log, scope; + var compiler, markup, attrMarkup, directives, widgets, compile, log, scope; beforeEach(function(){ log = ""; @@ -27,7 +27,7 @@ describe('compiler', function(){ compiler = new Compiler(markup, attrMarkup, directives, widgets); compile = function(html){ var e = jqLite("
        " + html + "
        "); - return scope = compiler.compile(e)().scope; + return scope = compiler.compile(e)(); }; }); @@ -47,7 +47,7 @@ describe('compiler', function(){ }; var template = compiler.compile(e); expect(log).toEqual("found"); - scope = template(angular.scope()).scope; + scope = template(angular.scope()); expect(e.hasClass('ng-directive')).toEqual(true); expect(log).toEqual("found:init"); }); @@ -78,13 +78,13 @@ describe('compiler', function(){ it('should allow creation of templates', function(){ directives.duplicate = function(expr, element){ - var parent = element.parent(); element.replaceWith(document.createComment("marker")); element.removeAttr("duplicate"); - var template = this.compile(element); + var linker = this.compile(element); return function(marker) { this.$onEval(function() { - marker.after(template(angular.scope(), noop).view); + var scope = linker(angular.scope(), noop); + marker.after(scope.$element); }); }; }; diff --git a/test/ResourceSpec.js b/test/ResourceSpec.js index c93bdafb..76909968 100644 --- a/test/ResourceSpec.js +++ b/test/ResourceSpec.js @@ -180,7 +180,7 @@ describe("resource", function() { }); it('should excersize full stack', function(){ - var scope = angular.compile('
        ')().scope; + var scope = angular.compile('
        ')(); var $browser = scope.$service('$browser'); var $resource = scope.$service('$resource'); var Person = $resource('/Person/:id'); @@ -192,7 +192,7 @@ describe("resource", function() { }); it('should return the same object when verifying the cache', function(){ - var scope = angular.compile('
        ')().scope; + var scope = angular.compile('
        ')(); var $browser = scope.$service('$browser'); var $resource = scope.$service('$resource'); var Person = $resource('/Person/:id', null, {query: {method:'GET', isArray: true, verifyCache: true}}); diff --git a/test/ScenarioSpec.js b/test/ScenarioSpec.js index ce8ce69c..14ab82ce 100644 --- a/test/ScenarioSpec.js +++ b/test/ScenarioSpec.js @@ -12,25 +12,25 @@ describe("ScenarioSpec: Compilation", function(){ describe('compilation', function(){ it("should compile dom node and return scope", function(){ var node = jqLite('
        {{b=a+1}}
        ')[0]; - scope = angular.compile(node)().scope; + scope = angular.compile(node)(); expect(scope.a).toEqual(1); expect(scope.b).toEqual(2); }); it("should compile jQuery node and return scope", function(){ - scope = compile(jqLite('
        {{a=123}}
        '))().scope; + scope = compile(jqLite('
        {{a=123}}
        '))(); expect(jqLite(scope.$element).text()).toEqual('123'); }); it("should compile text node and return scope", function(){ - scope = angular.compile('
        {{a=123}}
        ')().scope; + scope = angular.compile('
        {{a=123}}
        ')(); expect(jqLite(scope.$element).text()).toEqual('123'); }); }); describe('scope', function(){ it("should have $set, $get, $eval, $updateView methods", function(){ - scope = angular.compile('
        {{a}}
        ')().scope; + scope = angular.compile('
        {{a}}
        ')(); scope.$eval("$invalidWidgets.push({})"); expect(scope.$set("a", 2)).toEqual(2); expect(scope.$get("a")).toEqual(2); @@ -40,7 +40,7 @@ describe("ScenarioSpec: Compilation", function(){ }); it("should have $ objects", function(){ - scope = angular.compile('
        ')(angular.scope({$config: {a:"b"}})).scope; + scope = angular.compile('
        ')(angular.scope({$config: {a:"b"}})); expect(scope.$service('$location')).toBeDefined(); expect(scope.$get('$eval')).toBeDefined(); expect(scope.$get('$config')).toBeDefined(); @@ -51,7 +51,7 @@ describe("ScenarioSpec: Compilation", function(){ describe("configuration", function(){ it("should take location object", function(){ var url = "http://server/#?book=moby"; - scope = angular.compile("
        {{$location}}
        ")().scope; + scope = angular.compile("
        {{$location}}
        ")(); var $location = scope.$service('$location'); var $browser = scope.$service('$browser'); expect($location.hashSearch.book).toBeUndefined(); diff --git a/test/ValidatorsSpec.js b/test/ValidatorsSpec.js index 2d4fca98..773ac7d0 100644 --- a/test/ValidatorsSpec.js +++ b/test/ValidatorsSpec.js @@ -7,7 +7,7 @@ describe('ValidatorTest', function(){ validator.last = last; validator._this = this; }; - var scope = compile('')().scope; + var scope = compile('')(); scope.name = 'misko'; scope.$eval(); assertEquals('misko', validator.first); @@ -95,7 +95,7 @@ describe('ValidatorTest', function(){ beforeEach(function(){ value = null; fn = null; - self = angular.compile('')().scope; + self = angular.compile('')(); jqLite(document.body).append(self.$element); self.$element.data('$validate', noop); self.$root = self; @@ -108,7 +108,7 @@ describe('ValidatorTest', function(){ it('should make a request and show spinner', function(){ var value, fn; var scope = angular.compile( - '')().scope; + '')(); jqLite(document.body).append(scope.$element); var input = scope.$element; scope.asyncFn = function(v,f){ @@ -151,7 +151,7 @@ describe('ValidatorTest', function(){ it("should handle update function", function(){ var scope = angular.compile( - '')().scope; + '')(); scope.asyncFn = jasmine.createSpy(); scope.updateFn = jasmine.createSpy(); scope.name = 'misko'; diff --git a/test/directivesSpec.js b/test/directivesSpec.js index c02eb025..4b2e7055 100644 --- a/test/directivesSpec.js +++ b/test/directivesSpec.js @@ -5,7 +5,7 @@ describe("directive", function(){ beforeEach(function() { compile = function(html) { element = jqLite(html); - return model = angular.compile(element)().scope; + return model = angular.compile(element)(); }; }); diff --git a/test/markupSpec.js b/test/markupSpec.js index a4a1a923..765c3108 100644 --- a/test/markupSpec.js +++ b/test/markupSpec.js @@ -7,7 +7,7 @@ describe("markups", function(){ element = null; compile = function(html) { element = jqLite(html); - scope = angular.compile(element)().scope; + scope = angular.compile(element)(); }; }); diff --git a/test/service/invalidWidgetsSpec.js b/test/service/invalidWidgetsSpec.js index 4a18dcf8..de9ed14b 100644 --- a/test/service/invalidWidgetsSpec.js +++ b/test/service/invalidWidgetsSpec.js @@ -14,7 +14,7 @@ describe('$invalidWidgets', function() { it("should count number of invalid widgets", function(){ var element = jqLite('') jqLite(document.body).append(element); - scope = compile(element)().scope; + scope = compile(element)(); var $invalidWidgets = scope.$service('$invalidWidgets'); expect($invalidWidgets.length).toEqual(1); diff --git a/test/service/routeSpec.js b/test/service/routeSpec.js index 4dfa546c..ccdf19ec 100644 --- a/test/service/routeSpec.js +++ b/test/service/routeSpec.js @@ -18,7 +18,7 @@ describe('$route', function() { function BookChapter() { this.log = ''; } - scope = compile('
        ')().scope; + scope = compile('
        ')(); $location = scope.$service('$location'); $route = scope.$service('$route'); $route.when('/Book/:book/Chapter/:chapter', {controller: BookChapter, template:'Chapter.html'}); diff --git a/test/widgetsSpec.js b/test/widgetsSpec.js index 183fbe6a..dc7ffa77 100644 --- a/test/widgetsSpec.js +++ b/test/widgetsSpec.js @@ -11,7 +11,7 @@ describe("widget", function(){ } else { element = jqLite(html); } - return scope = angular.compile(element)().scope; + return scope = angular.compile(element)(); }; }); @@ -592,7 +592,7 @@ describe("widget", function(){ }); it('should call change on switch', function(){ - var scope = angular.compile('
        {{name}}
        ')().scope; + var scope = angular.compile('
        {{name}}
        ')(); scope.url = 'a'; scope.$eval(); expect(scope.name).toEqual(undefined); @@ -604,7 +604,7 @@ describe("widget", function(){ describe('ng:include', function(){ it('should include on external file', function() { var element = jqLite(''); - var scope = angular.compile(element)().scope; + var scope = angular.compile(element)(); scope.childScope = createScope(); scope.childScope.name = 'misko'; scope.url = 'myUrl'; @@ -617,7 +617,7 @@ describe("widget", function(){ it('should remove previously included text if a falsy value is bound to src', function() { var element = jqLite(''); - var scope = angular.compile(element)().scope; + var scope = angular.compile(element)(); scope.childScope = createScope(); scope.childScope.name = 'igor'; scope.url = 'myUrl'; @@ -636,7 +636,7 @@ describe("widget", function(){ it('should allow this for scope', function(){ var element = jqLite(''); - var scope = angular.compile(element)().scope; + var scope = angular.compile(element)(); scope.url = 'myUrl'; scope.$service('$xhr.cache').data.myUrl = {value:'{{c=c+1}}'}; scope.$eval(); @@ -650,7 +650,7 @@ describe("widget", function(){ it('should evaluate onload expression when a partial is loaded', function() { var element = jqLite(''); - var scope = angular.compile(element)().scope; + var scope = angular.compile(element)(); expect(scope.loaded).not.toBeDefined(); @@ -801,7 +801,7 @@ describe("widget", function(){ var rootScope, rootScope, $route, $location, $browser; beforeEach(function() { - rootScope = angular.compile('')().scope; + rootScope = angular.compile('')(); $route = rootScope.$service('$route'); $location = rootScope.$service('$location'); $browser = rootScope.$service('$browser'); @@ -880,7 +880,7 @@ describe("widget", function(){ rootScope = angular.compile( '
        ' + 'include: ' + - '
        ')(myApp).scope; + '
        ')(myApp); $browser.xhr.expectGET('viewPartial.html').respond('content'); $browser.xhr.flush();