mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-16 23:30:23 +00:00
linking function should return bound scope
angular.compile()() returns {scope:scope, view:view},
this isn't useful at all and only makes tests more verbose.
Instead, this change makes the linking function return scope directly
and if anyone needs the linked dom there are two ways to do it
documented in angular.compile.
other changes:
- moved angular.compile docs to the compiler so that they are closer to
the compiler
- fixed some typos and updated angular.compile docs with the new return
value
This commit is contained in:
Igor Minar
parent
128feb2674
commit
945056b166
14 changed files with 362 additions and 336 deletions
|
|
@ -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);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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.)
|
||||
*
|
||||
<pre>
|
||||
var mvc1 = angular.compile(window.document)();
|
||||
mvc1.view; // compiled view elment
|
||||
mvc1.scope; // scope bound to the element
|
||||
|
||||
var mvc2 = angular.compile('<div ng:click="clicked = true">click me</div>')();
|
||||
</pre>
|
||||
*
|
||||
* @param {string|DOMElement} element Element or HTML to compile into a template function.
|
||||
* @returns {function([scope][, cloneAttachFn])} a template function which is used to bind 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: <br/> `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);
|
||||
|
|
|
|||
|
|
@ -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.)
|
||||
*
|
||||
<pre>
|
||||
var mvc1 = angular.compile(window.document)();
|
||||
mvc1.view; // compiled view elment
|
||||
mvc1.scope; // scope bound to the element
|
||||
|
||||
var mvc2 = angular.compile('<div ng:click="clicked = true">click me</div>')();
|
||||
</pre>
|
||||
*
|
||||
* @param {string|DOMElement} element Element or HTML to compile into a template function.
|
||||
* @returns {function([scope][, cloneAttachFn])} a template function which is used to bind 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: <br/> `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.
|
||||
* <pre>
|
||||
* var view = angular.element('<p>{{total}}</p>'),
|
||||
* scope = angular.compile(view)();
|
||||
* </pre>
|
||||
* - if on the other hand, you need the element to be cloned, the view reference from the original
|
||||
* example would not point to the clone, but rather to the dom that is cloned. In this case,
|
||||
* you can access the clone via the cloneAttachFn:
|
||||
* <pre>
|
||||
* var original = angular.element('<p>{{total}}</p>'),
|
||||
* scope = someParentScope.$new(),
|
||||
* clone;
|
||||
*
|
||||
* angular.compile(original)(scope, function(clonedElement, scope) {
|
||||
* clone = clonedElement;
|
||||
* //attach the clone to DOM document at the right place
|
||||
* });
|
||||
*
|
||||
* //now we have reference to the cloned DOM via `clone`
|
||||
* </pre>
|
||||
*/
|
||||
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;
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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('<div>{{greeting = "hello world"}}</div>')();
|
||||
expect(mvc.view.text()).toEqual('hello world');
|
||||
expect(mvc.scope.greeting).toEqual('hello world');
|
||||
template = angular.element('<div>{{greeting = "hello world"}}</div>');
|
||||
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('<div>{{greeting = "hello world"}}</div>')(scope);
|
||||
expect(mvc.view.text()).toEqual('hello world');
|
||||
expect(mvc.scope).toEqual(scope);
|
||||
scope = angular.scope();
|
||||
template = angular.element('<div>{{greeting = "hello world"}}</div>');
|
||||
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('<div>{{greeting = "hello world"}}</div>');
|
||||
scope = angular.scope();
|
||||
template = jqLite('<div>{{greeting = "hello world"}}</div>');
|
||||
|
||||
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('<div>{{greeting = "hello world"}}</div>');
|
||||
mvc = angular.compile(template)(scope, noop);
|
||||
scope = angular.scope();
|
||||
template = jqLite('<div>{{greeting = "hello world"}}</div>');
|
||||
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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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('<input type="text" name="model.price" value="abc">');
|
||||
state.scope.$eval();
|
||||
assertEquals('abc', state.scope.model.price);
|
||||
var scope = this.compile('<input type="text" name="model.price" value="abc">');
|
||||
scope.$eval();
|
||||
assertEquals('abc', scope.model.price);
|
||||
});
|
||||
|
||||
it('ChangingTextareaUpdatesModel', function(){
|
||||
var c = this.compile('<textarea name="model.note">abc</textarea>');
|
||||
c.scope.$eval();
|
||||
assertEquals(c.scope.model.note, 'abc');
|
||||
var scope = this.compile('<textarea name="model.note">abc</textarea>');
|
||||
scope.$eval();
|
||||
assertEquals(scope.model.note, 'abc');
|
||||
});
|
||||
|
||||
it('ChangingRadioUpdatesModel', function(){
|
||||
var c = this.compile('<input type="radio" name="model.price" value="A" checked>' +
|
||||
var scope = this.compile('<input type="radio" name="model.price" value="A" checked>' +
|
||||
'<input type="radio" name="model.price" value="B">');
|
||||
c.scope.$eval();
|
||||
assertEquals(c.scope.model.price, 'A');
|
||||
scope.$eval();
|
||||
assertEquals(scope.model.price, 'A');
|
||||
});
|
||||
|
||||
it('ChangingCheckboxUpdatesModel', function(){
|
||||
var form = this.compile('<input type="checkbox" name="model.price" value="true" checked ng:format="boolean"/>');
|
||||
assertEquals(true, form.scope.model.price);
|
||||
var scope = this.compile('<input type="checkbox" name="model.price" value="true" checked ng:format="boolean"/>');
|
||||
assertEquals(true, scope.model.price);
|
||||
});
|
||||
|
||||
it('BindUpdate', function(){
|
||||
var c = this.compile('<div ng:eval="a=123"/>');
|
||||
assertEquals(123, c.scope.$get('a'));
|
||||
var scope = this.compile('<div ng:eval="a=123"/>');
|
||||
assertEquals(123, scope.$get('a'));
|
||||
});
|
||||
|
||||
it('ChangingSelectNonSelectedUpdatesModel', function(){
|
||||
var form = this.compile('<select name="model.price"><option value="A">A</option><option value="B">B</option></select>');
|
||||
assertEquals('A', form.scope.model.price);
|
||||
var scope = this.compile('<select name="model.price"><option value="A">A</option><option value="B">B</option></select>');
|
||||
assertEquals('A', scope.model.price);
|
||||
});
|
||||
|
||||
it('ChangingMultiselectUpdatesModel', function(){
|
||||
var form = this.compile('<select name="Invoice.options" multiple="multiple">' +
|
||||
var scope = this.compile('<select name="Invoice.options" multiple="multiple">' +
|
||||
'<option value="A" selected>Gift wrap</option>' +
|
||||
'<option value="B" selected>Extra padding</option>' +
|
||||
'<option value="C">Expedite</option>' +
|
||||
'</select>');
|
||||
assertJsonEquals(["A", "B"], form.scope.$get('Invoice').options);
|
||||
assertJsonEquals(["A", "B"], scope.$get('Invoice').options);
|
||||
});
|
||||
|
||||
it('ChangingSelectSelectedUpdatesModel', function(){
|
||||
var form = this.compile('<select name="model.price"><option>A</option><option selected value="b">B</option></select>');
|
||||
assertEquals(form.scope.model.price, 'b');
|
||||
var scope = this.compile('<select name="model.price"><option>A</option><option selected value="b">B</option></select>');
|
||||
assertEquals(scope.model.price, 'b');
|
||||
});
|
||||
|
||||
it('ExecuteInitialization', function(){
|
||||
var c = this.compile('<div ng:init="a=123">');
|
||||
assertEquals(c.scope.$get('a'), 123);
|
||||
var scope = this.compile('<div ng:init="a=123">');
|
||||
assertEquals(scope.$get('a'), 123);
|
||||
});
|
||||
|
||||
it('ExecuteInitializationStatements', function(){
|
||||
var c = this.compile('<div ng:init="a=123;b=345">');
|
||||
assertEquals(c.scope.$get('a'), 123);
|
||||
assertEquals(c.scope.$get('b'), 345);
|
||||
var scope = this.compile('<div ng:init="a=123;b=345">');
|
||||
assertEquals(scope.$get('a'), 123);
|
||||
assertEquals(scope.$get('b'), 345);
|
||||
});
|
||||
|
||||
it('ApplyTextBindings', function(){
|
||||
var form = this.compile('<div ng:bind="model.a">x</div>');
|
||||
form.scope.$set('model', {a:123});
|
||||
form.scope.$eval();
|
||||
assertEquals('123', form.view.text());
|
||||
var scope = this.compile('<div ng:bind="model.a">x</div>');
|
||||
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("<a href='http://s/a{{b}}c' foo='x'></a>");
|
||||
var attrbinding = c.view.attr("ng:bind-attr");
|
||||
var scope = this.compile("<a href='http://s/a{{b}}c' foo='x'></a>");
|
||||
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('<a href="http://s/a{{b}}c" foo="{{d}}"></a>');
|
||||
var attrbinding = c.view.attr("ng:bind-attr");
|
||||
var scope = this.compile('<a href="http://s/a{{b}}c" foo="{{d}}"></a>');
|
||||
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("<a href='abc' foo='def'></a>");
|
||||
var a = c.view;
|
||||
var scope = this.compile("<a href='abc' foo='def'></a>");
|
||||
var a = scope.$element;
|
||||
assertEquals(a[0].nodeName, "A");
|
||||
assertTrue(!a.attr("ng:bind-attr"));
|
||||
});
|
||||
|
||||
it('ExistingAttrbindingIsAppended', function(){
|
||||
var c = this.compile("<a href='http://s/{{abc}}' ng:bind-attr='{\"b\":\"{{def}}\"}'></a>");
|
||||
var a = c.view;
|
||||
var scope = this.compile("<a href='http://s/{{abc}}' ng:bind-attr='{\"b\":\"{{def}}\"}'></a>");
|
||||
var a = scope.$element;
|
||||
assertEquals('{"b":"{{def}}","href":"http://s/{{abc}}"}', a.attr('ng:bind-attr'));
|
||||
});
|
||||
|
||||
it('AttributesAreEvaluated', function(){
|
||||
var c = this.compile('<a ng:bind-attr=\'{"a":"a", "b":"a+b={{a+b}}"}\'></a>');
|
||||
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('<a ng:bind-attr=\'{"a":"a", "b":"a+b={{a+b}}"}\'></a>');
|
||||
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('<input type="button" ng:click="person.save()" value="Apply">');
|
||||
c.scope.$set("person.save", function(){
|
||||
var scope = this.compile('<input type="button" ng:click="person.save()" value="Apply">');
|
||||
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('<input type="image" ng:click="action()">');
|
||||
c.scope.$set("action", function(){
|
||||
var scope = this.compile('<input type="image" ng:click="action()">');
|
||||
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('<button ng:click="person.save()">Apply</button>');
|
||||
c.scope.$set("person.save", function(){
|
||||
var scope = this.compile('<button ng:click="person.save()">Apply</button>');
|
||||
scope.$set("person.save", function(){
|
||||
savedCalled = true;
|
||||
});
|
||||
browserTrigger(c.view, 'click');
|
||||
browserTrigger(scope.$element, 'click');
|
||||
assertTrue(savedCalled);
|
||||
});
|
||||
|
||||
it('RepeaterUpdateBindings', function(){
|
||||
var a = this.compile('<ul><LI ng:repeat="item in model.items" ng:bind="item.a"/></ul>');
|
||||
var form = a.view;
|
||||
var scope = this.compile('<ul><LI ng:repeat="item in model.items" ng:bind="item.a"/></ul>');
|
||||
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('<ul>' +
|
||||
'<#comment></#comment>' +
|
||||
'<li ng:bind="item.a" ng:repeat-index="0">A</li>' +
|
||||
|
|
@ -195,7 +194,7 @@ describe('Binder', function(){
|
|||
'</ul>', sortedHtml(form));
|
||||
|
||||
items.unshift({a:'C'});
|
||||
a.scope.$eval();
|
||||
scope.$eval();
|
||||
assertEquals('<ul>' +
|
||||
'<#comment></#comment>' +
|
||||
'<li ng:bind="item.a" ng:repeat-index="0">C</li>' +
|
||||
|
|
@ -204,7 +203,7 @@ describe('Binder', function(){
|
|||
'</ul>', sortedHtml(form));
|
||||
|
||||
items.shift();
|
||||
a.scope.$eval();
|
||||
scope.$eval();
|
||||
assertEquals('<ul>' +
|
||||
'<#comment></#comment>' +
|
||||
'<li ng:bind="item.a" ng:repeat-index="0">A</li>' +
|
||||
|
|
@ -213,17 +212,17 @@ describe('Binder', function(){
|
|||
|
||||
items.shift();
|
||||
items.shift();
|
||||
a.scope.$eval();
|
||||
scope.$eval();
|
||||
});
|
||||
|
||||
it('RepeaterContentDoesNotBind', function(){
|
||||
var a = this.compile('<ul><LI ng:repeat="item in model.items"><span ng:bind="item.a"></span></li></ul>');
|
||||
a.scope.$set('model', {items:[{a:"A"}]});
|
||||
a.scope.$eval();
|
||||
var scope = this.compile('<ul><LI ng:repeat="item in model.items"><span ng:bind="item.a"></span></li></ul>');
|
||||
scope.$set('model', {items:[{a:"A"}]});
|
||||
scope.$eval();
|
||||
assertEquals('<ul>' +
|
||||
'<#comment></#comment>' +
|
||||
'<li ng:repeat-index="0"><span ng:bind="item.a">A</span></li>' +
|
||||
'</ul>', sortedHtml(a.view));
|
||||
'</ul>', sortedHtml(scope.$element));
|
||||
});
|
||||
|
||||
it('DoNotOverwriteCustomAction', function(){
|
||||
|
|
@ -232,61 +231,60 @@ describe('Binder', function(){
|
|||
});
|
||||
|
||||
it('RepeaterAdd', function(){
|
||||
var c = this.compile('<div><input type="text" name="item.x" ng:repeat="item in items"></div>');
|
||||
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('<div><input type="text" name="item.x" ng:repeat="item in items"></div>');
|
||||
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('<div><div ng:repeat="i in items">{{i}}</div></div>');
|
||||
var scope = this.compile('<div><div ng:repeat="i in items">{{i}}</div></div>');
|
||||
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('<div>{{error.throw()}}</div>');
|
||||
var doc = a.view;
|
||||
var errorLogs = a.scope.$service('$log').error.logs;
|
||||
var scope = this.compile('<div>{{error.throw()}}</div>');
|
||||
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('<div attr="before {{error.throw()}} after"></div>');
|
||||
var doc = a.view;
|
||||
var errorLogs = a.scope.$service('$log').error.logs;
|
||||
var scope = this.compile('<div attr="before {{error.throw()}} after"></div>');
|
||||
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('<div><div ng:repeat="m in model" name="{{m.name}}">' +
|
||||
var scope = this.compile('<div><div ng:repeat="m in model" name="{{m.name}}">' +
|
||||
'<ul name="{{i}}" ng:repeat="i in m.item"></ul>' +
|
||||
'</div></div>');
|
||||
|
||||
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('<div>'+
|
||||
'<#comment></#comment>'+
|
||||
|
|
@ -332,121 +330,121 @@ describe('Binder', function(){
|
|||
'<#comment></#comment>'+
|
||||
'<ul name="b1" ng:bind-attr="{"name":"{{i}}"}" ng:repeat-index="0"></ul>'+
|
||||
'<ul name="b2" ng:bind-attr="{"name":"{{i}}"}" ng:repeat-index="1"></ul>'+
|
||||
'</div></div>', sortedHtml(a.view));
|
||||
'</div></div>', sortedHtml(scope.$element));
|
||||
});
|
||||
|
||||
it('HideBindingExpression', function(){
|
||||
var a = this.compile('<div ng:hide="hidden == 3"/>');
|
||||
var scope = this.compile('<div ng:hide="hidden == 3"/>');
|
||||
|
||||
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('<div ng:hide="hidden"/>');
|
||||
var scope = this.compile('<div ng:hide="hidden"/>');
|
||||
|
||||
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('<div ng:show="show"/>');
|
||||
var scope = this.compile('<div ng:show="show"/>');
|
||||
|
||||
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('<div ng:class="undefined"/>');
|
||||
doc.scope.$eval();
|
||||
var scope = this.compile('<div ng:class="undefined"/>');
|
||||
scope.$eval();
|
||||
|
||||
assertEquals(
|
||||
'<div class="undefined" ng:class="undefined"></div>',
|
||||
sortedHtml(doc.view));
|
||||
sortedHtml(scope.$element));
|
||||
});
|
||||
|
||||
it('BindClass', function(){
|
||||
var c = this.compile('<div ng:class="class"/>');
|
||||
var scope = this.compile('<div ng:class="class"/>');
|
||||
|
||||
c.scope.$set('class', 'testClass');
|
||||
c.scope.$eval();
|
||||
scope.$set('class', 'testClass');
|
||||
scope.$eval();
|
||||
|
||||
assertEquals('<div class="testClass" ng:class="class"></div>', sortedHtml(c.view));
|
||||
assertEquals('<div class="testClass" ng:class="class"></div>', sortedHtml(scope.$element));
|
||||
|
||||
c.scope.$set('class', ['a', 'b']);
|
||||
c.scope.$eval();
|
||||
scope.$set('class', ['a', 'b']);
|
||||
scope.$eval();
|
||||
|
||||
assertEquals('<div class="a b" ng:class="class"></div>', sortedHtml(c.view));
|
||||
assertEquals('<div class="a b" ng:class="class"></div>', sortedHtml(scope.$element));
|
||||
});
|
||||
|
||||
it('BindClassEvenOdd', function(){
|
||||
var x = this.compile('<div><div ng:repeat="i in [0,1]" ng:class-even="\'e\'" ng:class-odd="\'o\'"></div></div>');
|
||||
x.scope.$eval();
|
||||
var d1 = jqLite(x.view[0].childNodes[1]);
|
||||
var d2 = jqLite(x.view[0].childNodes[2]);
|
||||
var scope = this.compile('<div><div ng:repeat="i in [0,1]" ng:class-even="\'e\'" ng:class-odd="\'o\'"></div></div>');
|
||||
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(
|
||||
'<div><#comment></#comment>' +
|
||||
'<div class="o" ng:class-even="\'e\'" ng:class-odd="\'o\'" ng:repeat-index="0"></div>' +
|
||||
'<div class="e" ng:class-even="\'e\'" ng:class-odd="\'o\'" ng:repeat-index="1"></div></div>',
|
||||
sortedHtml(x.view));
|
||||
sortedHtml(scope.$element));
|
||||
});
|
||||
|
||||
it('BindStyle', function(){
|
||||
var c = this.compile('<div ng:style="style"/>');
|
||||
var scope = this.compile('<div ng:style="style"/>');
|
||||
|
||||
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('<a ng:click="action()">Add Phone</a>');
|
||||
c.scope.action = function(){
|
||||
var scope = this.compile('<a ng:click="action()">Add Phone</a>');
|
||||
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("<div>{{a}}" +
|
||||
var scope = this.compile("<div>{{a}}" +
|
||||
"<div ng:non-bindable>{{a}}</div>" +
|
||||
"<div ng:non-bindable=''>{{b}}</div>" +
|
||||
"<div ng:non-bindable='true'>{{c}}</div></div>");
|
||||
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('<select name="s"><option ng:repeat="i in [0,1]" value="{{i}}" ng:bind="i"></option></select>');
|
||||
c.scope.$set('s', 1);
|
||||
c.scope.$eval();
|
||||
assertEquals(1, c.view[0].selectedIndex);
|
||||
var scope = this.compile('<select name="s"><option ng:repeat="i in [0,1]" value="{{i}}" ng:bind="i"></option></select>');
|
||||
scope.$set('s', 1);
|
||||
scope.$eval();
|
||||
assertEquals(1, scope.$element[0].selectedIndex);
|
||||
});
|
||||
|
||||
it('RepeaterShouldBindInputsDefaults', function () {
|
||||
var c = this.compile('<div><input value="123" name="item.name" ng:repeat="item in items"></div>');
|
||||
c.scope.$set('items', [{}, {name:'misko'}]);
|
||||
c.scope.$eval();
|
||||
var scope = this.compile('<div><input value="123" name="item.name" ng:repeat="item in items"></div>');
|
||||
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('<pre>Hello {{name}}!</pre>');
|
||||
c.scope.$set("name", "World");
|
||||
c.scope.$eval();
|
||||
var scope = this.compile('<pre>Hello {{name}}!</pre>');
|
||||
scope.$set("name", "World");
|
||||
scope.$eval();
|
||||
|
||||
assertEquals('<pre ng:bind-template="Hello {{name}}!">Hello World!</pre>', sortedHtml(c.view));
|
||||
assertEquals('<pre ng:bind-template="Hello {{name}}!">Hello World!</pre>', sortedHtml(scope.$element));
|
||||
});
|
||||
|
||||
it('FillInOptionValueWhenMissing', function(){
|
||||
var c = this.compile(
|
||||
var scope = this.compile(
|
||||
'<select name="foo"><option selected="true">{{a}}</option><option value="">{{b}}</option><option>C</option></select>');
|
||||
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('<div id="test"><input name="name" ng:required>' +
|
||||
var scope = this.compile('<div id="test"><input name="name" ng:required>' +
|
||||
'<input ng:repeat="item in items" name="item.name" ng:required/></div>',
|
||||
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('<div><input name="name" ng:required><input ng:show="show" name="name" ng:required></div>', jqLite(document.body));
|
||||
c.scope.$set("show", true);
|
||||
c.scope.$eval();
|
||||
assertEquals(2, c.scope.$service('$invalidWidgets').length);
|
||||
var scope = this.compile('<div><input name="name" ng:required><input ng:show="show" name="name" ng:required></div>', 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('<div>' +
|
||||
var scope = this.compile('<div>' +
|
||||
'<input name="a0" ng:bind-attr="{disabled:\'{{true}}\'}"><input name="a1" ng:bind-attr="{disabled:\'{{false}}\'}">' +
|
||||
'<input name="b0" ng:bind-attr="{disabled:\'{{1}}\'}"><input name="b1" ng:bind-attr="{disabled:\'{{0}}\'}">' +
|
||||
'<input name="c0" ng:bind-attr="{disabled:\'{{[0]}}\'}"><input name="c1" ng:bind-attr="{disabled:\'{{[]}}\'}"></div>');
|
||||
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('<div>' +
|
||||
var scope = this.compile('<div>' +
|
||||
'<input type="button" ng:click="greeting=\'ABC\'"/>' +
|
||||
'<input type="button" ng:click=":garbage:"/></div>');
|
||||
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('<div>' +
|
||||
var scope = this.compile('<div>' +
|
||||
'<input type="radio" name="sex" value="female"/>' +
|
||||
'<input type="radio" name="sex" value="male"/></div>');
|
||||
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('<ul><li ng:repeat="(k,v) in {a:0,b:1}" ng:bind=\"k + v\"></li></ul>');
|
||||
x.scope.$eval();
|
||||
var scope = this.compile('<ul><li ng:repeat="(k,v) in {a:0,b:1}" ng:bind=\"k + v\"></li></ul>');
|
||||
scope.$eval();
|
||||
assertEquals('<ul>' +
|
||||
'<#comment></#comment>' +
|
||||
'<li ng:bind=\"k + v\" ng:repeat-index="0">a0</li>' +
|
||||
'<li ng:bind=\"k + v\" ng:repeat-index="1">b1</li>' +
|
||||
'</ul>',
|
||||
sortedHtml(x.view));
|
||||
sortedHtml(scope.$element));
|
||||
});
|
||||
|
||||
it('ItShouldFireChangeListenersBeforeUpdate', function(){
|
||||
var x = this.compile('<div ng:bind="name"></div>');
|
||||
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('<div ng:bind="name"></div>');
|
||||
scope.$set("name", "");
|
||||
scope.$watch("watched", "name=123");
|
||||
scope.$set("watched", "change");
|
||||
scope.$eval();
|
||||
assertEquals(123, scope.$get("name"));
|
||||
assertEquals(
|
||||
'<div ng:bind="name">123</div>',
|
||||
sortedHtml(x.view));
|
||||
sortedHtml(scope.$element));
|
||||
});
|
||||
|
||||
it('ItShouldHandleMultilineBindings', function(){
|
||||
var x = this.compile('<div>{{\n 1 \n + \n 2 \n}}</div>');
|
||||
x.scope.$eval();
|
||||
assertEquals("3", x.view.text());
|
||||
var scope = this.compile('<div>{{\n 1 \n + \n 2 \n}}</div>');
|
||||
scope.$eval();
|
||||
assertEquals("3", scope.$element.text());
|
||||
});
|
||||
|
||||
it('ItBindHiddenInputFields', function(){
|
||||
var x = this.compile('<input type="hidden" name="myName" value="abc" />');
|
||||
x.scope.$eval();
|
||||
assertEquals("abc", x.scope.$get("myName"));
|
||||
var scope = this.compile('<input type="hidden" name="myName" value="abc" />');
|
||||
scope.$eval();
|
||||
assertEquals("abc", scope.$get("myName"));
|
||||
});
|
||||
|
||||
it('ItShouldUseFormaterForText', function(){
|
||||
var x = this.compile('<input name="a" ng:format="list" value="a,b">');
|
||||
x.scope.$eval();
|
||||
assertEquals(['a','b'], x.scope.$get('a'));
|
||||
var input = x.view;
|
||||
var scope = this.compile('<input name="a" ng:format="list" value="a,b">');
|
||||
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);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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("<div>" + html + "</div>");
|
||||
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);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -180,7 +180,7 @@ describe("resource", function() {
|
|||
});
|
||||
|
||||
it('should excersize full stack', function(){
|
||||
var scope = angular.compile('<div></div>')().scope;
|
||||
var scope = angular.compile('<div></div>')();
|
||||
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('<div></div>')().scope;
|
||||
var scope = angular.compile('<div></div>')();
|
||||
var $browser = scope.$service('$browser');
|
||||
var $resource = scope.$service('$resource');
|
||||
var Person = $resource('/Person/:id', null, {query: {method:'GET', isArray: true, verifyCache: true}});
|
||||
|
|
|
|||
|
|
@ -12,25 +12,25 @@ describe("ScenarioSpec: Compilation", function(){
|
|||
describe('compilation', function(){
|
||||
it("should compile dom node and return scope", function(){
|
||||
var node = jqLite('<div ng:init="a=1">{{b=a+1}}</div>')[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('<div>{{a=123}}</div>'))().scope;
|
||||
scope = compile(jqLite('<div>{{a=123}}</div>'))();
|
||||
expect(jqLite(scope.$element).text()).toEqual('123');
|
||||
});
|
||||
|
||||
it("should compile text node and return scope", function(){
|
||||
scope = angular.compile('<div>{{a=123}}</div>')().scope;
|
||||
scope = angular.compile('<div>{{a=123}}</div>')();
|
||||
expect(jqLite(scope.$element).text()).toEqual('123');
|
||||
});
|
||||
});
|
||||
|
||||
describe('scope', function(){
|
||||
it("should have $set, $get, $eval, $updateView methods", function(){
|
||||
scope = angular.compile('<div>{{a}}</div>')().scope;
|
||||
scope = angular.compile('<div>{{a}}</div>')();
|
||||
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('<div></div>')(angular.scope({$config: {a:"b"}})).scope;
|
||||
scope = angular.compile('<div></div>')(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("<div>{{$location}}</div>")().scope;
|
||||
scope = angular.compile("<div>{{$location}}</div>")();
|
||||
var $location = scope.$service('$location');
|
||||
var $browser = scope.$service('$browser');
|
||||
expect($location.hashSearch.book).toBeUndefined();
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ describe('ValidatorTest', function(){
|
|||
validator.last = last;
|
||||
validator._this = this;
|
||||
};
|
||||
var scope = compile('<input name="name" ng:validate="myValidator:\'hevery\'"/>')().scope;
|
||||
var scope = compile('<input name="name" ng:validate="myValidator:\'hevery\'"/>')();
|
||||
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('<input />')().scope;
|
||||
self = angular.compile('<input />')();
|
||||
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(
|
||||
'<input type="text" name="name" ng:validate="asynchronous:asyncFn"/>')().scope;
|
||||
'<input type="text" name="name" ng:validate="asynchronous:asyncFn"/>')();
|
||||
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(
|
||||
'<input name="name" ng:validate="asynchronous:asyncFn:updateFn"/>')().scope;
|
||||
'<input name="name" ng:validate="asynchronous:asyncFn:updateFn"/>')();
|
||||
scope.asyncFn = jasmine.createSpy();
|
||||
scope.updateFn = jasmine.createSpy();
|
||||
scope.name = 'misko';
|
||||
|
|
|
|||
|
|
@ -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)();
|
||||
};
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ describe("markups", function(){
|
|||
element = null;
|
||||
compile = function(html) {
|
||||
element = jqLite(html);
|
||||
scope = angular.compile(element)().scope;
|
||||
scope = angular.compile(element)();
|
||||
};
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ describe('$invalidWidgets', function() {
|
|||
it("should count number of invalid widgets", function(){
|
||||
var element = jqLite('<input name="price" ng:required ng:validate="number"></input>')
|
||||
jqLite(document.body).append(element);
|
||||
scope = compile(element)().scope;
|
||||
scope = compile(element)();
|
||||
var $invalidWidgets = scope.$service('$invalidWidgets');
|
||||
expect($invalidWidgets.length).toEqual(1);
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ describe('$route', function() {
|
|||
function BookChapter() {
|
||||
this.log = '<init>';
|
||||
}
|
||||
scope = compile('<div></div>')().scope;
|
||||
scope = compile('<div></div>')();
|
||||
$location = scope.$service('$location');
|
||||
$route = scope.$service('$route');
|
||||
$route.when('/Book/:book/Chapter/:chapter', {controller: BookChapter, template:'Chapter.html'});
|
||||
|
|
|
|||
|
|
@ -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('<ng:switch on="url" change="name=\'works\'"><div ng:switch-when="a">{{name}}</div></ng:switch>')().scope;
|
||||
var scope = angular.compile('<ng:switch on="url" change="name=\'works\'"><div ng:switch-when="a">{{name}}</div></ng:switch>')();
|
||||
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('<ng:include src="url" scope="childScope"></ng:include>');
|
||||
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('<ng:include src="url" scope="childScope"></ng:include>');
|
||||
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('<ng:include src="url" scope="this"></ng:include>');
|
||||
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('<ng:include src="url" onload="loaded = true"></ng:include>');
|
||||
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('<ng:view></ng:view>')().scope;
|
||||
rootScope = angular.compile('<ng:view></ng:view>')();
|
||||
$route = rootScope.$service('$route');
|
||||
$location = rootScope.$service('$location');
|
||||
$browser = rootScope.$service('$browser');
|
||||
|
|
@ -880,7 +880,7 @@ describe("widget", function(){
|
|||
rootScope = angular.compile(
|
||||
'<div>' +
|
||||
'include: <ng:include src="\'includePartial.html\'">' +
|
||||
'</ng:include></div>')(myApp).scope;
|
||||
'</ng:include></div>')(myApp);
|
||||
|
||||
$browser.xhr.expectGET('viewPartial.html').respond('content');
|
||||
$browser.xhr.flush();
|
||||
|
|
|
|||
Loading…
Reference in a new issue