mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-05-12 08:53:10 +00:00
chore(directives,widgets): reorg the code under directive/ dir
This commit is contained in:
parent
dd7b0f56fc
commit
f54db2ccda
51 changed files with 3951 additions and 3818 deletions
33
angularFiles.js
vendored
33
angularFiles.js
vendored
|
|
@ -38,12 +38,29 @@ angularFiles = {
|
||||||
'src/service/http.js',
|
'src/service/http.js',
|
||||||
'src/service/httpBackend.js',
|
'src/service/httpBackend.js',
|
||||||
'src/service/locale.js',
|
'src/service/locale.js',
|
||||||
'src/directives.js',
|
'src/directive/directives.js',
|
||||||
'src/markups.js',
|
'src/directive/a.js',
|
||||||
'src/widgets.js',
|
'src/directive/booleanAttrDirs.js',
|
||||||
'src/widget/form.js',
|
'src/directive/form.js',
|
||||||
'src/widget/input.js',
|
'src/directive/input.js',
|
||||||
'src/widget/select.js'
|
'src/directive/ngBind.js',
|
||||||
|
'src/directive/ngClass.js',
|
||||||
|
'src/directive/ngCloak.js',
|
||||||
|
'src/directive/ngController.js',
|
||||||
|
'src/directive/ngEventDirs.js',
|
||||||
|
'src/directive/ngInclude.js',
|
||||||
|
'src/directive/ngInit.js',
|
||||||
|
'src/directive/ngNonBindable.js',
|
||||||
|
'src/directive/ngPluralize.js',
|
||||||
|
'src/directive/ngRepeat.js',
|
||||||
|
'src/directive/ngShowHide.js',
|
||||||
|
'src/directive/ngStyle.js',
|
||||||
|
'src/directive/ngSwitch.js',
|
||||||
|
'src/directive/ngTransclude.js',
|
||||||
|
'src/directive/ngView.js',
|
||||||
|
'src/directive/script.js',
|
||||||
|
'src/directive/select.js',
|
||||||
|
'src/directive/style.js'
|
||||||
],
|
],
|
||||||
|
|
||||||
'angularScenario': [
|
'angularScenario': [
|
||||||
|
|
@ -83,7 +100,7 @@ angularFiles = {
|
||||||
'test/*.js',
|
'test/*.js',
|
||||||
'test/service/*.js',
|
'test/service/*.js',
|
||||||
'test/service/filter/*.js',
|
'test/service/filter/*.js',
|
||||||
'test/widget/*.js',
|
'test/directive/*.js',
|
||||||
'example/personalLog/test/*.js'
|
'example/personalLog/test/*.js'
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
@ -143,7 +160,7 @@ angularFiles = {
|
||||||
'test/jstd-scenario-adapter/*.js',
|
'test/jstd-scenario-adapter/*.js',
|
||||||
'test/*.js',
|
'test/*.js',
|
||||||
'test/service/*.js',
|
'test/service/*.js',
|
||||||
'test/widget/*.js',
|
'test/directive/*.js',
|
||||||
'example/personalLog/test/*.js'
|
'example/personalLog/test/*.js'
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
|
||||||
29
src/directive/a.js
Normal file
29
src/directive/a.js
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Modifies the default behavior of html A tag, so that the default action is prevented when href
|
||||||
|
* attribute is empty.
|
||||||
|
*
|
||||||
|
* The reasoning for this change is to allow easy creation of action links with ng:click without
|
||||||
|
* changing the location or causing page reloads, e.g.:
|
||||||
|
* <a href="" ng:click="model.$save()">Save</a>
|
||||||
|
*/
|
||||||
|
var htmlAnchorDirective = valueFn({
|
||||||
|
restrict: 'E',
|
||||||
|
compile: function(element, attr) {
|
||||||
|
// turn <a href ng:click="..">link</a> into a link in IE
|
||||||
|
// but only if it doesn't have name attribute, in which case it's an anchor
|
||||||
|
if (!attr.href) {
|
||||||
|
attr.$set('href', '');
|
||||||
|
}
|
||||||
|
|
||||||
|
return function(scope, element) {
|
||||||
|
element.bind('click', function(event){
|
||||||
|
// if we have no href url, then don't navigate anywhere.
|
||||||
|
if (!element.attr('href')) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @ngdoc directive
|
* @ngdoc directive
|
||||||
* @name angular.module.ng.$compileProvider.directive.ng:href
|
* @name angular.module.ng.$compileProvider.directive.ng:href
|
||||||
|
|
@ -267,3 +266,17 @@
|
||||||
* @param {template} template any string which can contain '{{}}' markup.
|
* @param {template} template any string which can contain '{{}}' markup.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function ngAttributeAliasDirective(propName, attrName) {
|
||||||
|
ngAttributeAliasDirectives[directiveNormalize('ng-' + attrName)] = valueFn(
|
||||||
|
function(scope, element, attr) {
|
||||||
|
attr.$observe(directiveNormalize('ng-' + attrName), function(value) {
|
||||||
|
attr.$set(attrName, value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
var ngAttributeAliasDirectives = {};
|
||||||
|
forEach(BOOLEAN_ATTR, ngAttributeAliasDirective);
|
||||||
|
ngAttributeAliasDirective(null, 'src');
|
||||||
11
src/directive/directives.js
Normal file
11
src/directive/directives.js
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
function ngDirective(directive) {
|
||||||
|
if (isFunction(directive)) {
|
||||||
|
directive = {
|
||||||
|
link: directive
|
||||||
|
}
|
||||||
|
}
|
||||||
|
directive.restrict = directive.restrict || 'AC';
|
||||||
|
return valueFn(directive);
|
||||||
|
};
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
*
|
*
|
||||||
* @description
|
* @description
|
||||||
* `FormController` keeps track of all its widgets as well as state of them form, such as being valid/invalid or dirty/pristine.
|
* `FormController` keeps track of all its widgets as well as state of them form, such as being valid/invalid or dirty/pristine.
|
||||||
*
|
*
|
||||||
* Each {@link angular.module.ng.$compileProvider.directive.form form} directive creates an instance
|
* Each {@link angular.module.ng.$compileProvider.directive.form form} directive creates an instance
|
||||||
* of `FormController`.
|
* of `FormController`.
|
||||||
*
|
*
|
||||||
249
src/directive/ngBind.js
Normal file
249
src/directive/ngBind.js
Normal file
|
|
@ -0,0 +1,249 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:bind
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* The `ng:bind` attribute tells Angular to replace the text content of the specified HTML element
|
||||||
|
* with the value of a given expression, and to update the text content when the value of that
|
||||||
|
* expression changes.
|
||||||
|
*
|
||||||
|
* Typically, you don't use `ng:bind` directly, but instead you use the double curly markup like
|
||||||
|
* `{{ expression }}` and let the Angular compiler transform it to
|
||||||
|
* `<span ng:bind="expression"></span>` when the template is compiled.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* Enter a name in the Live Preview text box; the greeting below the text box changes instantly.
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<script>
|
||||||
|
function Ctrl($scope) {
|
||||||
|
$scope.name = 'Whirled';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<div ng:controller="Ctrl">
|
||||||
|
Enter name: <input type="text" ng:model="name"> <br/>
|
||||||
|
Hello <span ng:bind="name"></span>!
|
||||||
|
</div>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should check ng:bind', function() {
|
||||||
|
expect(using('.doc-example-live').binding('name')).toBe('Whirled');
|
||||||
|
using('.doc-example-live').input('name').enter('world');
|
||||||
|
expect(using('.doc-example-live').binding('name')).toBe('world');
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
var ngBindDirective = ngDirective(function(scope, element, attr) {
|
||||||
|
element.addClass('ng-binding').data('$binding', attr.ngBind);
|
||||||
|
scope.$watch(attr.ngBind, function(value) {
|
||||||
|
element.text(value == undefined ? '' : value);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:bind-html-unsafe
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Creates a binding that will innerHTML the result of evaluating the `expression` into the current
|
||||||
|
* element. *The innerHTML-ed content will not be sanitized!* You should use this directive only if
|
||||||
|
* {@link angular.module.ng.$compileProvider.directive.ng:bind-html ng:bind-html} directive is too
|
||||||
|
* restrictive and when you absolutely trust the source of the content you are binding to.
|
||||||
|
*
|
||||||
|
* See {@link angular.module.ng.$sanitize $sanitize} docs for examples.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate.
|
||||||
|
*/
|
||||||
|
var ngBindHtmlUnsafeDirective = ngDirective(function(scope, element, attr) {
|
||||||
|
element.addClass('ng-binding').data('$binding', attr.ngBindHtmlUnsafe);
|
||||||
|
scope.$watch(attr.ngBindHtmlUnsafe, function(value) {
|
||||||
|
element.html(value == undefined ? '' : value);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:bind-html
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Creates a binding that will sanitize the result of evaluating the `expression` with the
|
||||||
|
* {@link angular.module.ng.$sanitize $sanitize} service and innerHTML the result into the current
|
||||||
|
* element.
|
||||||
|
*
|
||||||
|
* See {@link angular.module.ng.$sanitize $sanitize} docs for examples.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate.
|
||||||
|
*/
|
||||||
|
var ngBindHtmlDirective = ['$sanitize', function($sanitize) {
|
||||||
|
return function(scope, element, attr) {
|
||||||
|
element.addClass('ng-binding').data('$binding', attr.ngBindHtml);
|
||||||
|
scope.$watch(attr.ngBindHtml, function(value) {
|
||||||
|
if (value = $sanitize(value)) {
|
||||||
|
element.html(value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}];
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:bind-template
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* The `ng:bind-template` attribute specifies that the element
|
||||||
|
* text should be replaced with the template in ng:bind-template.
|
||||||
|
* Unlike ng:bind the ng:bind-template can contain multiple `{{` `}}`
|
||||||
|
* expressions. (This is required since some HTML elements
|
||||||
|
* can not have SPAN elements such as TITLE, or OPTION to name a few.)
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {string} template of form
|
||||||
|
* <tt>{{</tt> <tt>expression</tt> <tt>}}</tt> to eval.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* Try it here: enter text in text box and watch the greeting change.
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<script>
|
||||||
|
function Ctrl($scope) {
|
||||||
|
$scope.salutation = 'Hello';
|
||||||
|
$scope.name = 'World';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<div ng:controller="Ctrl">
|
||||||
|
Salutation: <input type="text" ng:model="salutation"><br/>
|
||||||
|
Name: <input type="text" ng:model="name"><br/>
|
||||||
|
<pre ng:bind-template="{{salutation}} {{name}}!"></pre>
|
||||||
|
</div>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should check ng:bind', function() {
|
||||||
|
expect(using('.doc-example-live').binding('salutation')).
|
||||||
|
toBe('Hello');
|
||||||
|
expect(using('.doc-example-live').binding('name')).
|
||||||
|
toBe('World');
|
||||||
|
using('.doc-example-live').input('salutation').enter('Greetings');
|
||||||
|
using('.doc-example-live').input('name').enter('user');
|
||||||
|
expect(using('.doc-example-live').binding('salutation')).
|
||||||
|
toBe('Greetings');
|
||||||
|
expect(using('.doc-example-live').binding('name')).
|
||||||
|
toBe('user');
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
var ngBindTemplateDirective = ['$interpolate', function($interpolate) {
|
||||||
|
return function(scope, element, attr) {
|
||||||
|
// TODO: move this to scenario runner
|
||||||
|
var interpolateFn = $interpolate(element.attr(attr.$attr.ngBindTemplate));
|
||||||
|
element.addClass('ng-binding').data('$binding', interpolateFn);
|
||||||
|
attr.$observe('ngBindTemplate', function(value) {
|
||||||
|
element.text(value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}];
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:bind-attr
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* The `ng:bind-attr` attribute specifies that a
|
||||||
|
* {@link guide/dev_guide.templates.databinding databinding} should be created between a particular
|
||||||
|
* element attribute and a given expression. Unlike `ng:bind`, the `ng:bind-attr` contains one or
|
||||||
|
* more JSON key value pairs; each pair specifies an attribute and the
|
||||||
|
* {@link guide/dev_guide.expressions expression} to which it will be mapped.
|
||||||
|
*
|
||||||
|
* Instead of writing `ng:bind-attr` statements in your HTML, you can use double-curly markup to
|
||||||
|
* specify an <tt ng:non-bindable>{{expression}}</tt> for the value of an attribute.
|
||||||
|
* At compile time, the attribute is translated into an
|
||||||
|
* `<span ng:bind-attr="{attr:expression}"></span>`.
|
||||||
|
*
|
||||||
|
* The following HTML snippet shows how to specify `ng:bind-attr`:
|
||||||
|
* <pre>
|
||||||
|
* <a ng:bind-attr='{"href":"http://www.google.com/search?q={{query}}"}'>Google</a>
|
||||||
|
* </pre>
|
||||||
|
*
|
||||||
|
* This is cumbersome, so as we mentioned using double-curly markup is a prefered way of creating
|
||||||
|
* this binding:
|
||||||
|
* <pre>
|
||||||
|
* <a href="http://www.google.com/search?q={{query}}">Google</a>
|
||||||
|
* </pre>
|
||||||
|
*
|
||||||
|
* During compilation, the template with attribute markup gets translated to the ng:bind-attr form
|
||||||
|
* mentioned above.
|
||||||
|
*
|
||||||
|
* _Note_: You might want to consider using {@link angular.module.ng.$compileProvider.directive.ng:href ng:href} instead of
|
||||||
|
* `href` if the binding is present in the main application template (`index.html`) and you want to
|
||||||
|
* make sure that a user is not capable of clicking on raw/uncompiled link.
|
||||||
|
*
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {string} attribute_json one or more JSON key-value pairs representing
|
||||||
|
* the attributes to replace with expressions. Each key matches an attribute
|
||||||
|
* which needs to be replaced. Each value is a text template of
|
||||||
|
* the attribute with the embedded
|
||||||
|
* <tt ng:non-bindable>{{expression}}</tt>s. Any number of
|
||||||
|
* key-value pairs can be specified.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* Enter a search string in the Live Preview text box and then click "Google". The search executes instantly.
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<script>
|
||||||
|
function Ctrl($scope) {
|
||||||
|
$scope.query = 'AngularJS';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<div ng:controller="Ctrl">
|
||||||
|
Google for:
|
||||||
|
<input type="text" ng:model="query"/>
|
||||||
|
<a ng:bind-attr='{"href":"http://www.google.com/search?q={{query}}"}'>
|
||||||
|
Google
|
||||||
|
</a> (ng:bind-attr) |
|
||||||
|
<a href="http://www.google.com/search?q={{query}}">Google</a>
|
||||||
|
(curly binding in attribute val)
|
||||||
|
</div>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should check ng:bind-attr', function() {
|
||||||
|
expect(using('.doc-example-live').element('a').attr('href')).
|
||||||
|
toBe('http://www.google.com/search?q=AngularJS');
|
||||||
|
using('.doc-example-live').input('query').enter('google');
|
||||||
|
expect(using('.doc-example-live').element('a').attr('href')).
|
||||||
|
toBe('http://www.google.com/search?q=google');
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
|
||||||
|
var ngBindAttrDirective = ['$interpolate', function($interpolate) {
|
||||||
|
return function(scope, element, attr) {
|
||||||
|
var lastValue = {};
|
||||||
|
var interpolateFns = {};
|
||||||
|
scope.$watch(function() {
|
||||||
|
var values = scope.$eval(attr.ngBindAttr);
|
||||||
|
for(var key in values) {
|
||||||
|
var exp = values[key],
|
||||||
|
fn = (interpolateFns[exp] ||
|
||||||
|
(interpolateFns[values[key]] = $interpolate(exp))),
|
||||||
|
value = fn(scope);
|
||||||
|
if (lastValue[key] !== value) {
|
||||||
|
attr.$set(key, lastValue[key] = value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}];
|
||||||
143
src/directive/ngClass.js
Normal file
143
src/directive/ngClass.js
Normal file
|
|
@ -0,0 +1,143 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
function classDirective(name, selector) {
|
||||||
|
name = 'ngClass' + name;
|
||||||
|
return ngDirective(function(scope, element, attr) {
|
||||||
|
scope.$watch(attr[name], function(newVal, oldVal) {
|
||||||
|
if (selector === true || scope.$index % 2 === selector) {
|
||||||
|
if (oldVal && (newVal !== oldVal)) {
|
||||||
|
if (isObject(oldVal) && !isArray(oldVal))
|
||||||
|
oldVal = map(oldVal, function(v, k) { if (v) return k });
|
||||||
|
element.removeClass(isArray(oldVal) ? oldVal.join(' ') : oldVal);
|
||||||
|
}
|
||||||
|
if (isObject(newVal) && !isArray(newVal))
|
||||||
|
newVal = map(newVal, function(v, k) { if (v) return k });
|
||||||
|
if (newVal) element.addClass(isArray(newVal) ? newVal.join(' ') : newVal); }
|
||||||
|
}, true);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:class
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* The `ng:class` allows you to set CSS class on HTML element dynamically by databinding an
|
||||||
|
* expression that represents all classes to be added.
|
||||||
|
*
|
||||||
|
* The directive won't add duplicate classes if a particular class was already set.
|
||||||
|
*
|
||||||
|
* When the expression changes, the previously added classes are removed and only then the classes
|
||||||
|
* new classes are added.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to eval. The result
|
||||||
|
* of the evaluation can be a string representing space delimited class
|
||||||
|
* names, an array, or a map of class names to boolean values.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<input type="button" value="set" ng:click="myVar='ng-invalid'">
|
||||||
|
<input type="button" value="clear" ng:click="myVar=''">
|
||||||
|
<br>
|
||||||
|
<span ng:class="myVar">Sample Text </span>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should check ng:class', function() {
|
||||||
|
expect(element('.doc-example-live span').prop('className')).not().
|
||||||
|
toMatch(/ng-invalid/);
|
||||||
|
|
||||||
|
using('.doc-example-live').element(':button:first').click();
|
||||||
|
|
||||||
|
expect(element('.doc-example-live span').prop('className')).
|
||||||
|
toMatch(/ng-invalid/);
|
||||||
|
|
||||||
|
using('.doc-example-live').element(':button:last').click();
|
||||||
|
|
||||||
|
expect(element('.doc-example-live span').prop('className')).not().
|
||||||
|
toMatch(/ng-invalid/);
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
var ngClassDirective = classDirective('', true);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:class-odd
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* The `ng:class-odd` and `ng:class-even` works exactly as
|
||||||
|
* {@link angular.module.ng.$compileProvider.directive.ng:class ng:class}, except it works in conjunction with `ng:repeat` and
|
||||||
|
* takes affect only on odd (even) rows.
|
||||||
|
*
|
||||||
|
* This directive can be applied only within a scope of an
|
||||||
|
* {@link angular.module.ng.$compileProvider.directive.ng:repeat ng:repeat}.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to eval. The result
|
||||||
|
* of the evaluation can be a string representing space delimited class names or an array.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<ol ng:init="names=['John', 'Mary', 'Cate', 'Suz']">
|
||||||
|
<li ng:repeat="name in names">
|
||||||
|
<span ng:class-odd="'ng-format-negative'"
|
||||||
|
ng:class-even="'ng-invalid'">
|
||||||
|
{{name}}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should check ng:class-odd and ng:class-even', function() {
|
||||||
|
expect(element('.doc-example-live li:first span').prop('className')).
|
||||||
|
toMatch(/ng-format-negative/);
|
||||||
|
expect(element('.doc-example-live li:last span').prop('className')).
|
||||||
|
toMatch(/ng-invalid/);
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
var ngClassOddDirective = classDirective('Odd', 0);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:class-even
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* The `ng:class-odd` and `ng:class-even` works exactly as
|
||||||
|
* {@link angular.module.ng.$compileProvider.directive.ng:class ng:class}, except it works in conjunction with `ng:repeat` and
|
||||||
|
* takes affect only on odd (even) rows.
|
||||||
|
*
|
||||||
|
* This directive can be applied only within a scope of an
|
||||||
|
* {@link angular.module.ng.$compileProvider.directive.ng:repeat ng:repeat}.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to eval. The result
|
||||||
|
* of the evaluation can be a string representing space delimited class names or an array.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<ol ng:init="names=['John', 'Mary', 'Cate', 'Suz']">
|
||||||
|
<li ng:repeat="name in names">
|
||||||
|
<span ng:class-odd="'odd'" ng:class-even="'even'">
|
||||||
|
{{name}}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should check ng:class-odd and ng:class-even', function() {
|
||||||
|
expect(element('.doc-example-live li:first span').prop('className')).
|
||||||
|
toMatch(/odd/);
|
||||||
|
expect(element('.doc-example-live li:last span').prop('className')).
|
||||||
|
toMatch(/even/);
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
var ngClassEvenDirective = classDirective('Even', 1);
|
||||||
61
src/directive/ngCloak.js
Normal file
61
src/directive/ngCloak.js
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:cloak
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* The `ng:cloak` directive is used to prevent the Angular html template from being briefly
|
||||||
|
* displayed by the browser in its raw (uncompiled) form while your application is loading. Use this
|
||||||
|
* directive to avoid the undesirable flicker effect caused by the html template display.
|
||||||
|
*
|
||||||
|
* The directive can be applied to the `<body>` element, but typically a fine-grained application is
|
||||||
|
* prefered in order to benefit from progressive rendering of the browser view.
|
||||||
|
*
|
||||||
|
* `ng:cloak` works in cooperation with a css rule that is embedded within `angular.js` and
|
||||||
|
* `angular.min.js` files. Following is the css rule:
|
||||||
|
*
|
||||||
|
* <pre>
|
||||||
|
* [ng\:cloak], .ng-cloak {
|
||||||
|
* display: none;
|
||||||
|
* }
|
||||||
|
* </pre>
|
||||||
|
*
|
||||||
|
* When this css rule is loaded by the browser, all html elements (including their children) that
|
||||||
|
* are tagged with the `ng:cloak` directive are hidden. When Angular comes across this directive
|
||||||
|
* during the compilation of the template it deletes the `ng:cloak` element attribute, which
|
||||||
|
* makes the compiled element visible.
|
||||||
|
*
|
||||||
|
* For the best result, `angular.js` script must be loaded in the head section of the html file;
|
||||||
|
* alternatively, the css rule (above) must be included in the external stylesheet of the
|
||||||
|
* application.
|
||||||
|
*
|
||||||
|
* Legacy browsers, like IE7, do not provide attribute selector support (added in CSS 2.1) so they
|
||||||
|
* cannot match the `[ng\:cloak]` selector. To work around this limitation, you must add the css
|
||||||
|
* class `ng-cloak` in addition to `ng:cloak` directive as shown in the example below.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<div id="template1" ng:cloak>{{ 'hello' }}</div>
|
||||||
|
<div id="template2" ng:cloak class="ng-cloak">{{ 'hello IE7' }}</div>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should remove the template directive and css class', function() {
|
||||||
|
expect(element('.doc-example-live #template1').attr('ng:cloak')).
|
||||||
|
not().toBeDefined();
|
||||||
|
expect(element('.doc-example-live #template2').attr('ng:cloak')).
|
||||||
|
not().toBeDefined();
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
var ngCloakDirective = ngDirective({
|
||||||
|
compile: function(element, attr) {
|
||||||
|
attr.$set('ngCloak', undefined);
|
||||||
|
element.removeClass('ng-cloak');
|
||||||
|
}
|
||||||
|
});
|
||||||
103
src/directive/ngController.js
Normal file
103
src/directive/ngController.js
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:controller
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* The `ng:controller` directive assigns behavior to a scope. This is a key aspect of how angular
|
||||||
|
* supports the principles behind the Model-View-Controller design pattern.
|
||||||
|
*
|
||||||
|
* MVC components in angular:
|
||||||
|
*
|
||||||
|
* * Model — The Model is data in scope properties; scopes are attached to the DOM.
|
||||||
|
* * View — The template (HTML with data bindings) is rendered into the View.
|
||||||
|
* * Controller — The `ng:controller` directive specifies a Controller class; the class has
|
||||||
|
* methods that typically express the business logic behind the application.
|
||||||
|
*
|
||||||
|
* Note that an alternative way to define controllers is via the `{@link angular.module.ng.$route}`
|
||||||
|
* service.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @scope
|
||||||
|
* @param {expression} expression Name of a globally accessible constructor function or an
|
||||||
|
* {@link guide/dev_guide.expressions expression} that on the current scope evaluates to a
|
||||||
|
* constructor function.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* Here is a simple form for editing user contact information. Adding, removing, clearing, and
|
||||||
|
* greeting are methods declared on the controller (see source tab). These methods can
|
||||||
|
* easily be called from the angular markup. Notice that the scope becomes the `this` for the
|
||||||
|
* controller's instance. This allows for easy access to the view data from the controller. Also
|
||||||
|
* notice that any changes to the data are automatically reflected in the View without the need
|
||||||
|
* for a manual update.
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<script type="text/javascript">
|
||||||
|
function SettingsController($scope) {
|
||||||
|
$scope.name = "John Smith";
|
||||||
|
$scope.contacts = [
|
||||||
|
{type:'phone', value:'408 555 1212'},
|
||||||
|
{type:'email', value:'john.smith@example.org'} ];
|
||||||
|
|
||||||
|
$scope.greet = function() {
|
||||||
|
alert(this.name);
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.addContact = function() {
|
||||||
|
this.contacts.push({type:'email', value:'yourname@example.org'});
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.removeContact = function(contactToRemove) {
|
||||||
|
var index = this.contacts.indexOf(contactToRemove);
|
||||||
|
this.contacts.splice(index, 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.clearContact = function(contact) {
|
||||||
|
contact.type = 'phone';
|
||||||
|
contact.value = '';
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<div ng:controller="SettingsController">
|
||||||
|
Name: <input type="text" ng:model="name"/>
|
||||||
|
[ <a href="" ng:click="greet()">greet</a> ]<br/>
|
||||||
|
Contact:
|
||||||
|
<ul>
|
||||||
|
<li ng:repeat="contact in contacts">
|
||||||
|
<select ng:model="contact.type">
|
||||||
|
<option>phone</option>
|
||||||
|
<option>email</option>
|
||||||
|
</select>
|
||||||
|
<input type="text" ng:model="contact.value"/>
|
||||||
|
[ <a href="" ng:click="clearContact(contact)">clear</a>
|
||||||
|
| <a href="" ng:click="removeContact(contact)">X</a> ]
|
||||||
|
</li>
|
||||||
|
<li>[ <a href="" ng:click="addContact()">add</a> ]</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should check controller', function() {
|
||||||
|
expect(element('.doc-example-live div>:input').val()).toBe('John Smith');
|
||||||
|
expect(element('.doc-example-live li:nth-child(1) input').val())
|
||||||
|
.toBe('408 555 1212');
|
||||||
|
expect(element('.doc-example-live li:nth-child(2) input').val())
|
||||||
|
.toBe('john.smith@example.org');
|
||||||
|
|
||||||
|
element('.doc-example-live li:first a:contains("clear")').click();
|
||||||
|
expect(element('.doc-example-live li:first input').val()).toBe('');
|
||||||
|
|
||||||
|
element('.doc-example-live li:last a:contains("add")').click();
|
||||||
|
expect(element('.doc-example-live li:nth-child(3) input').val())
|
||||||
|
.toBe('yourname@example.org');
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
var ngControllerDirective = ['$controller', '$window', function($controller, $window) {
|
||||||
|
return {
|
||||||
|
scope: true,
|
||||||
|
controller: '@'
|
||||||
|
}
|
||||||
|
}];
|
||||||
222
src/directive/ngEventDirs.js
Normal file
222
src/directive/ngEventDirs.js
Normal file
|
|
@ -0,0 +1,222 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:click
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* The ng:click allows you to specify custom behavior when
|
||||||
|
* element is clicked.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate upon
|
||||||
|
* click. (Event object is available as `$event`)
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<button ng:click="count = count + 1" ng:init="count=0">
|
||||||
|
Increment
|
||||||
|
</button>
|
||||||
|
count: {{count}}
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should check ng:click', function() {
|
||||||
|
expect(binding('count')).toBe('0');
|
||||||
|
element('.doc-example-live :button').click();
|
||||||
|
expect(binding('count')).toBe('1');
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
/*
|
||||||
|
* A directive that allows creation of custom onclick handlers that are defined as angular
|
||||||
|
* expressions and are compiled and executed within the current scope.
|
||||||
|
*
|
||||||
|
* Events that are handled via these handler are always configured not to propagate further.
|
||||||
|
*/
|
||||||
|
var ngEventDirectives = {};
|
||||||
|
forEach(
|
||||||
|
'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave'.split(' '),
|
||||||
|
function(name) {
|
||||||
|
var directiveName = directiveNormalize('ng-' + name);
|
||||||
|
ngEventDirectives[directiveName] = ['$parse', function($parse) {
|
||||||
|
return function(scope, element, attr) {
|
||||||
|
var fn = $parse(attr[directiveName]);
|
||||||
|
element.bind(lowercase(name), function(event) {
|
||||||
|
scope.$apply(function() {
|
||||||
|
fn(scope, {$event:event});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}];
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:dblclick
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* The ng:dblclick allows you to specify custom behavior on dblclick event.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate upon
|
||||||
|
* dblclick. (Event object is available as `$event`)
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* See {@link angular.module.ng.$compileProvider.directive.ng:click ng:click}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:mousedown
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* The ng:mousedown allows you to specify custom behavior on mousedown event.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate upon
|
||||||
|
* mousedown. (Event object is available as `$event`)
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* See {@link angular.module.ng.$compileProvider.directive.ng:click ng:click}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:mouseup
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Specify custom behavior on mouseup event.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate upon
|
||||||
|
* mouseup. (Event object is available as `$event`)
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* See {@link angular.module.ng.$compileProvider.directive.ng:click ng:click}
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:mouseover
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Specify custom behavior on mouseover event.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate upon
|
||||||
|
* mouseover. (Event object is available as `$event`)
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* See {@link angular.module.ng.$compileProvider.directive.ng:click ng:click}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:mouseenter
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Specify custom behavior on mouseenter event.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate upon
|
||||||
|
* mouseenter. (Event object is available as `$event`)
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* See {@link angular.module.ng.$compileProvider.directive.ng:click ng:click}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:mouseleave
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Specify custom behavior on mouseleave event.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate upon
|
||||||
|
* mouseleave. (Event object is available as `$event`)
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* See {@link angular.module.ng.$compileProvider.directive.ng:click ng:click}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:mousemove
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Specify custom behavior on mousemove event.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate upon
|
||||||
|
* mousemove. (Event object is available as `$event`)
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* See {@link angular.module.ng.$compileProvider.directive.ng:click ng:click}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:submit
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Enables binding angular expressions to onsubmit events.
|
||||||
|
*
|
||||||
|
* Additionally it prevents the default action (which for form means sending the request to the
|
||||||
|
* server and reloading the current page).
|
||||||
|
*
|
||||||
|
* @element form
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to eval.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<script>
|
||||||
|
function Ctrl($scope) {
|
||||||
|
$scope.list = [];
|
||||||
|
$scope.text = 'hello';
|
||||||
|
$scope.submit = function() {
|
||||||
|
if (this.text) {
|
||||||
|
this.list.push(this.text);
|
||||||
|
this.text = '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<form ng:submit="submit()" ng:controller="Ctrl">
|
||||||
|
Enter text and hit enter:
|
||||||
|
<input type="text" ng:model="text" name="text" />
|
||||||
|
<input type="submit" id="submit" value="Submit" />
|
||||||
|
<pre>list={{list}}</pre>
|
||||||
|
</form>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should check ng:submit', function() {
|
||||||
|
expect(binding('list')).toBe('[]');
|
||||||
|
element('.doc-example-live #submit').click();
|
||||||
|
expect(binding('list')).toBe('["hello"]');
|
||||||
|
expect(input('text').val()).toBe('');
|
||||||
|
});
|
||||||
|
it('should ignore empty strings', function() {
|
||||||
|
expect(binding('list')).toBe('[]');
|
||||||
|
element('.doc-example-live #submit').click();
|
||||||
|
element('.doc-example-live #submit').click();
|
||||||
|
expect(binding('list')).toBe('["hello"]');
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
var ngSubmitDirective = ngDirective(function(scope, element, attrs) {
|
||||||
|
element.bind('submit', function() {
|
||||||
|
scope.$apply(attrs.ngSubmit);
|
||||||
|
});
|
||||||
|
});
|
||||||
119
src/directive/ngInclude.js
Normal file
119
src/directive/ngInclude.js
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:include
|
||||||
|
* @restrict EA
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Fetches, compiles and includes an external HTML fragment.
|
||||||
|
*
|
||||||
|
* Keep in mind that Same Origin Policy applies to included resources
|
||||||
|
* (e.g. ng:include won't work for file:// access).
|
||||||
|
*
|
||||||
|
* @scope
|
||||||
|
*
|
||||||
|
* @param {string} src angular expression evaluating to URL. If the source is a string constant,
|
||||||
|
* make sure you wrap it in quotes, e.g. `src="'myPartialTemplate.html'"`.
|
||||||
|
* @param {Scope=} [scope=new_child_scope] optional expression which evaluates to an
|
||||||
|
* instance of angular.module.ng.$rootScope.Scope to set the HTML fragment to.
|
||||||
|
* @param {string=} onload Expression to evaluate when a new partial is loaded.
|
||||||
|
*
|
||||||
|
* @param {string=} autoscroll Whether `ng:include` should call {@link angular.module.ng.$anchorScroll
|
||||||
|
* $anchorScroll} to scroll the viewport after the content is loaded.
|
||||||
|
*
|
||||||
|
* - If the attribute is not set, disable scrolling.
|
||||||
|
* - If the attribute is set without value, enable scrolling.
|
||||||
|
* - Otherwise enable scrolling only if the expression evaluates to truthy value.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
<doc:example>
|
||||||
|
<doc:source jsfiddle="false">
|
||||||
|
<script>
|
||||||
|
function Ctrl($scope) {
|
||||||
|
$scope.templates =
|
||||||
|
[ { name: 'template1.html', url: 'examples/ng-include/template1.html'}
|
||||||
|
, { name: 'template2.html', url: 'examples/ng-include/template2.html'} ];
|
||||||
|
$scope.template = $scope.templates[0];
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<div ng:controller="Ctrl">
|
||||||
|
<select ng:model="template" ng:options="t.name for t in templates">
|
||||||
|
<option value="">(blank)</option>
|
||||||
|
</select>
|
||||||
|
url of the template: <tt><a href="{{template.url}}">{{template.url}}</a></tt>
|
||||||
|
<hr/>
|
||||||
|
<div ng-include src="template.url"></div>
|
||||||
|
</div>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should load template1.html', function() {
|
||||||
|
expect(element('.doc-example-live [ng-include]').text()).
|
||||||
|
toBe('Content of template1.html\n');
|
||||||
|
});
|
||||||
|
it('should load template2.html', function() {
|
||||||
|
select('template').option('1');
|
||||||
|
expect(element('.doc-example-live [ng-include]').text()).
|
||||||
|
toBe('Content of template2.html\n');
|
||||||
|
});
|
||||||
|
it('should change to blank', function() {
|
||||||
|
select('template').option('');
|
||||||
|
expect(element('.doc-example-live [ng-include]').text()).toEqual('');
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile',
|
||||||
|
function($http, $templateCache, $anchorScroll, $compile) {
|
||||||
|
return {
|
||||||
|
restrict: 'EA',
|
||||||
|
compile: function(element, attr) {
|
||||||
|
var srcExp = attr.src,
|
||||||
|
scopeExp = attr.scope || '',
|
||||||
|
autoScrollExp = attr.autoscroll;
|
||||||
|
|
||||||
|
return function(scope, element, attr) {
|
||||||
|
var changeCounter = 0,
|
||||||
|
childScope;
|
||||||
|
|
||||||
|
function incrementChange() { changeCounter++;}
|
||||||
|
scope.$watch(srcExp, incrementChange);
|
||||||
|
scope.$watch(function() {
|
||||||
|
var includeScope = scope.$eval(scopeExp);
|
||||||
|
if (includeScope) return includeScope.$id;
|
||||||
|
}, incrementChange);
|
||||||
|
scope.$watch(function() {return changeCounter;}, function(newChangeCounter) {
|
||||||
|
var src = scope.$eval(srcExp),
|
||||||
|
useScope = scope.$eval(scopeExp);
|
||||||
|
|
||||||
|
function clearContent() {
|
||||||
|
// if this callback is still desired
|
||||||
|
if (newChangeCounter === changeCounter) {
|
||||||
|
if (childScope) childScope.$destroy();
|
||||||
|
childScope = null;
|
||||||
|
element.html('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (src) {
|
||||||
|
$http.get(src, {cache: $templateCache}).success(function(response) {
|
||||||
|
// if this callback is still desired
|
||||||
|
if (newChangeCounter === changeCounter) {
|
||||||
|
element.html(response);
|
||||||
|
if (childScope) childScope.$destroy();
|
||||||
|
childScope = useScope ? useScope : scope.$new();
|
||||||
|
$compile(element.contents())(childScope);
|
||||||
|
if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) {
|
||||||
|
$anchorScroll();
|
||||||
|
}
|
||||||
|
scope.$emit('$contentLoaded');
|
||||||
|
}
|
||||||
|
}).error(clearContent);
|
||||||
|
} else {
|
||||||
|
clearContent();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}];
|
||||||
37
src/directive/ngInit.js
Normal file
37
src/directive/ngInit.js
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:init
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* The `ng:init` attribute specifies initialization tasks to be executed
|
||||||
|
* before the template enters execution mode during bootstrap.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to eval.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<div ng:init="greeting='Hello'; person='World'">
|
||||||
|
{{greeting}} {{person}}!
|
||||||
|
</div>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should check greeting', function() {
|
||||||
|
expect(binding('greeting')).toBe('Hello');
|
||||||
|
expect(binding('person')).toBe('World');
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
var ngInitDirective = ngDirective({
|
||||||
|
compile: function() {
|
||||||
|
return {
|
||||||
|
pre: function(scope, element, attrs) {
|
||||||
|
scope.$eval(attrs.ngInit);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
34
src/directive/ngNonBindable.js
Normal file
34
src/directive/ngNonBindable.js
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:non-bindable
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Sometimes it is necessary to write code which looks like bindings but which should be left alone
|
||||||
|
* by angular. Use `ng:non-bindable` to make angular ignore a chunk of HTML.
|
||||||
|
*
|
||||||
|
* Note: `ng:non-bindable` looks like a directive, but is actually an attribute widget.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* In this example there are two location where a simple binding (`{{}}`) is present, but the one
|
||||||
|
* wrapped in `ng:non-bindable` is left alone.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<div>Normal: {{1 + 2}}</div>
|
||||||
|
<div ng:non-bindable>Ignored: {{1 + 2}}</div>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should check ng:non-bindable', function() {
|
||||||
|
expect(using('.doc-example-live').binding('1 + 2')).toBe('3');
|
||||||
|
expect(using('.doc-example-live').element('div:last').text()).
|
||||||
|
toMatch(/1 \+ 2/);
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
var ngNonBindableDirective = ngDirective({ terminal: true });
|
||||||
204
src/directive/ngPluralize.js
Normal file
204
src/directive/ngPluralize.js
Normal file
|
|
@ -0,0 +1,204 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:pluralize
|
||||||
|
* @restrict EA
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* # Overview
|
||||||
|
* ng:pluralize is a widget that displays messages according to en-US localization rules.
|
||||||
|
* These rules are bundled with angular.js and the rules can be overridden
|
||||||
|
* (see {@link guide/dev_guide.i18n Angular i18n} dev guide). You configure ng:pluralize by
|
||||||
|
* specifying the mappings between
|
||||||
|
* {@link http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html
|
||||||
|
* plural categories} and the strings to be displayed.
|
||||||
|
*
|
||||||
|
* # Plural categories and explicit number rules
|
||||||
|
* There are two
|
||||||
|
* {@link http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html
|
||||||
|
* plural categories} in Angular's default en-US locale: "one" and "other".
|
||||||
|
*
|
||||||
|
* While a pural category may match many numbers (for example, in en-US locale, "other" can match
|
||||||
|
* any number that is not 1), an explicit number rule can only match one number. For example, the
|
||||||
|
* explicit number rule for "3" matches the number 3. You will see the use of plural categories
|
||||||
|
* and explicit number rules throughout later parts of this documentation.
|
||||||
|
*
|
||||||
|
* # Configuring ng:pluralize
|
||||||
|
* You configure ng:pluralize by providing 2 attributes: `count` and `when`.
|
||||||
|
* You can also provide an optional attribute, `offset`.
|
||||||
|
*
|
||||||
|
* The value of the `count` attribute can be either a string or an {@link guide/dev_guide.expressions
|
||||||
|
* Angular expression}; these are evaluated on the current scope for its binded value.
|
||||||
|
*
|
||||||
|
* The `when` attribute specifies the mappings between plural categories and the actual
|
||||||
|
* string to be displayed. The value of the attribute should be a JSON object so that Angular
|
||||||
|
* can interpret it correctly.
|
||||||
|
*
|
||||||
|
* The following example shows how to configure ng:pluralize:
|
||||||
|
*
|
||||||
|
* <pre>
|
||||||
|
* <ng:pluralize count="personCount"
|
||||||
|
when="{'0': 'Nobody is viewing.',
|
||||||
|
* 'one': '1 person is viewing.',
|
||||||
|
* 'other': '{} people are viewing.'}">
|
||||||
|
* </ng:pluralize>
|
||||||
|
*</pre>
|
||||||
|
*
|
||||||
|
* In the example, `"0: Nobody is viewing."` is an explicit number rule. If you did not
|
||||||
|
* specify this rule, 0 would be matched to the "other" category and "0 people are viewing"
|
||||||
|
* would be shown instead of "Nobody is viewing". You can specify an explicit number rule for
|
||||||
|
* other numbers, for example 12, so that instead of showing "12 people are viewing", you can
|
||||||
|
* show "a dozen people are viewing".
|
||||||
|
*
|
||||||
|
* You can use a set of closed braces(`{}`) as a placeholder for the number that you want substituted
|
||||||
|
* into pluralized strings. In the previous example, Angular will replace `{}` with
|
||||||
|
* <span ng:non-bindable>`{{personCount}}`</span>. The closed braces `{}` is a placeholder
|
||||||
|
* for <span ng:non-bindable>{{numberExpression}}</span>.
|
||||||
|
*
|
||||||
|
* # Configuring ng:pluralize with offset
|
||||||
|
* The `offset` attribute allows further customization of pluralized text, which can result in
|
||||||
|
* a better user experience. For example, instead of the message "4 people are viewing this document",
|
||||||
|
* you might display "John, Kate and 2 others are viewing this document".
|
||||||
|
* The offset attribute allows you to offset a number by any desired value.
|
||||||
|
* Let's take a look at an example:
|
||||||
|
*
|
||||||
|
* <pre>
|
||||||
|
* <ng:pluralize count="personCount" offset=2
|
||||||
|
* when="{'0': 'Nobody is viewing.',
|
||||||
|
* '1': '{{person1}} is viewing.',
|
||||||
|
* '2': '{{person1}} and {{person2}} are viewing.',
|
||||||
|
* 'one': '{{person1}}, {{person2}} and one other person are viewing.',
|
||||||
|
* 'other': '{{person1}}, {{person2}} and {} other people are viewing.'}">
|
||||||
|
* </ng:pluralize>
|
||||||
|
* </pre>
|
||||||
|
*
|
||||||
|
* Notice that we are still using two plural categories(one, other), but we added
|
||||||
|
* three explicit number rules 0, 1 and 2.
|
||||||
|
* When one person, perhaps John, views the document, "John is viewing" will be shown.
|
||||||
|
* When three people view the document, no explicit number rule is found, so
|
||||||
|
* an offset of 2 is taken off 3, and Angular uses 1 to decide the plural category.
|
||||||
|
* In this case, plural category 'one' is matched and "John, Marry and one other person are viewing"
|
||||||
|
* is shown.
|
||||||
|
*
|
||||||
|
* Note that when you specify offsets, you must provide explicit number rules for
|
||||||
|
* numbers from 0 up to and including the offset. If you use an offset of 3, for example,
|
||||||
|
* you must provide explicit number rules for 0, 1, 2 and 3. You must also provide plural strings for
|
||||||
|
* plural categories "one" and "other".
|
||||||
|
*
|
||||||
|
* @param {string|expression} count The variable to be bounded to.
|
||||||
|
* @param {string} when The mapping between plural category to its correspoding strings.
|
||||||
|
* @param {number=} offset Offset to deduct from the total number.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<script>
|
||||||
|
function Ctrl($scope) {
|
||||||
|
$scope.person1 = 'Igor';
|
||||||
|
$scope.person2 = 'Misko';
|
||||||
|
$scope.personCount = 1;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<div ng:controller="Ctrl">
|
||||||
|
Person 1:<input type="text" ng:model="person1" value="Igor" /><br/>
|
||||||
|
Person 2:<input type="text" ng:model="person2" value="Misko" /><br/>
|
||||||
|
Number of People:<input type="text" ng:model="personCount" value="1" /><br/>
|
||||||
|
|
||||||
|
<!--- Example with simple pluralization rules for en locale --->
|
||||||
|
Without Offset:
|
||||||
|
<ng-pluralize count="personCount"
|
||||||
|
when="{'0': 'Nobody is viewing.',
|
||||||
|
'one': '1 person is viewing.',
|
||||||
|
'other': '{} people are viewing.'}">
|
||||||
|
</ng-pluralize><br>
|
||||||
|
|
||||||
|
<!--- Example with offset --->
|
||||||
|
With Offset(2):
|
||||||
|
<ng-pluralize count="personCount" offset=2
|
||||||
|
when="{'0': 'Nobody is viewing.',
|
||||||
|
'1': '{{person1}} is viewing.',
|
||||||
|
'2': '{{person1}} and {{person2}} are viewing.',
|
||||||
|
'one': '{{person1}}, {{person2}} and one other person are viewing.',
|
||||||
|
'other': '{{person1}}, {{person2}} and {} other people are viewing.'}">
|
||||||
|
</ng-pluralize>
|
||||||
|
</div>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should show correct pluralized string', function() {
|
||||||
|
expect(element('.doc-example-live ng-pluralize:first').text()).
|
||||||
|
toBe('1 person is viewing.');
|
||||||
|
expect(element('.doc-example-live ng-pluralize:last').text()).
|
||||||
|
toBe('Igor is viewing.');
|
||||||
|
|
||||||
|
using('.doc-example-live').input('personCount').enter('0');
|
||||||
|
expect(element('.doc-example-live ng-pluralize:first').text()).
|
||||||
|
toBe('Nobody is viewing.');
|
||||||
|
expect(element('.doc-example-live ng-pluralize:last').text()).
|
||||||
|
toBe('Nobody is viewing.');
|
||||||
|
|
||||||
|
using('.doc-example-live').input('personCount').enter('2');
|
||||||
|
expect(element('.doc-example-live ng-pluralize:first').text()).
|
||||||
|
toBe('2 people are viewing.');
|
||||||
|
expect(element('.doc-example-live ng-pluralize:last').text()).
|
||||||
|
toBe('Igor and Misko are viewing.');
|
||||||
|
|
||||||
|
using('.doc-example-live').input('personCount').enter('3');
|
||||||
|
expect(element('.doc-example-live ng-pluralize:first').text()).
|
||||||
|
toBe('3 people are viewing.');
|
||||||
|
expect(element('.doc-example-live ng-pluralize:last').text()).
|
||||||
|
toBe('Igor, Misko and one other person are viewing.');
|
||||||
|
|
||||||
|
using('.doc-example-live').input('personCount').enter('4');
|
||||||
|
expect(element('.doc-example-live ng-pluralize:first').text()).
|
||||||
|
toBe('4 people are viewing.');
|
||||||
|
expect(element('.doc-example-live ng-pluralize:last').text()).
|
||||||
|
toBe('Igor, Misko and 2 other people are viewing.');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should show data-binded names', function() {
|
||||||
|
using('.doc-example-live').input('personCount').enter('4');
|
||||||
|
expect(element('.doc-example-live ng-pluralize:last').text()).
|
||||||
|
toBe('Igor, Misko and 2 other people are viewing.');
|
||||||
|
|
||||||
|
using('.doc-example-live').input('person1').enter('Di');
|
||||||
|
using('.doc-example-live').input('person2').enter('Vojta');
|
||||||
|
expect(element('.doc-example-live ng-pluralize:last').text()).
|
||||||
|
toBe('Di, Vojta and 2 other people are viewing.');
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
var ngPluralizeDirective = ['$locale', '$interpolate', function($locale, $interpolate) {
|
||||||
|
var BRACE = /{}/g;
|
||||||
|
return {
|
||||||
|
restrict: 'EA',
|
||||||
|
link: function(scope, element, attr) {
|
||||||
|
var numberExp = attr.count,
|
||||||
|
whenExp = element.attr(attr.$attr.when), // this is because we have {{}} in attrs
|
||||||
|
offset = attr.offset || 0,
|
||||||
|
whens = scope.$eval(whenExp),
|
||||||
|
whensExpFns = {};
|
||||||
|
|
||||||
|
forEach(whens, function(expression, key) {
|
||||||
|
whensExpFns[key] =
|
||||||
|
$interpolate(expression.replace(BRACE, '{{' + numberExp + '-' + offset + '}}'));
|
||||||
|
});
|
||||||
|
|
||||||
|
scope.$watch(function() {
|
||||||
|
var value = parseFloat(scope.$eval(numberExp));
|
||||||
|
|
||||||
|
if (!isNaN(value)) {
|
||||||
|
//if explicit number rule such as 1, 2, 3... is defined, just use it. Otherwise,
|
||||||
|
//check it against pluralization rules in $locale service
|
||||||
|
if (!whens[value]) value = $locale.pluralCat(value - offset);
|
||||||
|
return whensExpFns[value](scope, element, true);
|
||||||
|
} else {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
}, function(newVal) {
|
||||||
|
element.text(newVal);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}];
|
||||||
182
src/directive/ngRepeat.js
Normal file
182
src/directive/ngRepeat.js
Normal file
|
|
@ -0,0 +1,182 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:repeat
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* The `ng:repeat` widget instantiates a template once per item from a collection. Each template
|
||||||
|
* instance gets its own scope, where the given loop variable is set to the current collection item,
|
||||||
|
* and `$index` is set to the item index or key.
|
||||||
|
*
|
||||||
|
* Special properties are exposed on the local scope of each template instance, including:
|
||||||
|
*
|
||||||
|
* * `$index` – `{number}` – iterator offset of the repeated element (0..length-1)
|
||||||
|
* * `$position` – `{string}` – position of the repeated element in the iterator. One of:
|
||||||
|
* * `'first'`,
|
||||||
|
* * `'middle'`
|
||||||
|
* * `'last'`
|
||||||
|
*
|
||||||
|
* Note: Although `ng:repeat` looks like a directive, it is actually an attribute widget.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @scope
|
||||||
|
* @priority 1000
|
||||||
|
* @param {string} repeat_expression The expression indicating how to enumerate a collection. Two
|
||||||
|
* formats are currently supported:
|
||||||
|
*
|
||||||
|
* * `variable in expression` – where variable is the user defined loop variable and `expression`
|
||||||
|
* is a scope expression giving the collection to enumerate.
|
||||||
|
*
|
||||||
|
* For example: `track in cd.tracks`.
|
||||||
|
*
|
||||||
|
* * `(key, value) in expression` – where `key` and `value` can be any user defined identifiers,
|
||||||
|
* and `expression` is the scope expression giving the collection to enumerate.
|
||||||
|
*
|
||||||
|
* For example: `(name, age) in {'adam':10, 'amalie':12}`.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* This example initializes the scope to a list of names and
|
||||||
|
* then uses `ng:repeat` to display every person:
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<div ng:init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]">
|
||||||
|
I have {{friends.length}} friends. They are:
|
||||||
|
<ul>
|
||||||
|
<li ng:repeat="friend in friends">
|
||||||
|
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should check ng:repeat', function() {
|
||||||
|
var r = using('.doc-example-live').repeater('ul li');
|
||||||
|
expect(r.count()).toBe(2);
|
||||||
|
expect(r.row(0)).toEqual(["1","John","25"]);
|
||||||
|
expect(r.row(1)).toEqual(["2","Mary","28"]);
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
var ngRepeatDirective = ngDirective({
|
||||||
|
transclude: 'element',
|
||||||
|
priority: 1000,
|
||||||
|
terminal: true,
|
||||||
|
compile: function(element, attr, linker) {
|
||||||
|
return function(scope, iterStartElement, attr){
|
||||||
|
var expression = attr.ngRepeat;
|
||||||
|
var match = expression.match(/^\s*(.+)\s+in\s+(.*)\s*$/),
|
||||||
|
lhs, rhs, valueIdent, keyIdent;
|
||||||
|
if (! match) {
|
||||||
|
throw Error("Expected ng:repeat in form of '_item_ in _collection_' but got '" +
|
||||||
|
expression + "'.");
|
||||||
|
}
|
||||||
|
lhs = match[1];
|
||||||
|
rhs = match[2];
|
||||||
|
match = lhs.match(/^([\$\w]+)|\(([\$\w]+)\s*,\s*([\$\w]+)\)$/);
|
||||||
|
if (!match) {
|
||||||
|
throw Error("'item' in 'item in collection' should be identifier or (key, value) but got '" +
|
||||||
|
keyValue + "'.");
|
||||||
|
}
|
||||||
|
valueIdent = match[3] || match[1];
|
||||||
|
keyIdent = match[2];
|
||||||
|
|
||||||
|
// Store a list of elements from previous run. This is a hash where key is the item from the
|
||||||
|
// iterator, and the value is an array of objects with following properties.
|
||||||
|
// - scope: bound scope
|
||||||
|
// - element: previous element.
|
||||||
|
// - index: position
|
||||||
|
// We need an array of these objects since the same object can be returned from the iterator.
|
||||||
|
// We expect this to be a rare case.
|
||||||
|
var lastOrder = new HashQueueMap();
|
||||||
|
scope.$watch(function(scope){
|
||||||
|
var index, length,
|
||||||
|
collection = scope.$eval(rhs),
|
||||||
|
collectionLength = size(collection, true),
|
||||||
|
childScope,
|
||||||
|
// Same as lastOrder but it has the current state. It will become the
|
||||||
|
// lastOrder on the next iteration.
|
||||||
|
nextOrder = new HashQueueMap(),
|
||||||
|
key, value, // key/value of iteration
|
||||||
|
array, last, // last object information {scope, element, index}
|
||||||
|
cursor = iterStartElement; // current position of the node
|
||||||
|
|
||||||
|
if (!isArray(collection)) {
|
||||||
|
// if object, extract keys, sort them and use to determine order of iteration over obj props
|
||||||
|
array = [];
|
||||||
|
for(key in collection) {
|
||||||
|
if (collection.hasOwnProperty(key) && key.charAt(0) != '$') {
|
||||||
|
array.push(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
array.sort();
|
||||||
|
} else {
|
||||||
|
array = collection || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// we are not using forEach for perf reasons (trying to avoid #call)
|
||||||
|
for (index = 0, length = array.length; index < length; index++) {
|
||||||
|
key = (collection === array) ? index : array[index];
|
||||||
|
value = collection[key];
|
||||||
|
last = lastOrder.shift(value);
|
||||||
|
if (last) {
|
||||||
|
// if we have already seen this object, then we need to reuse the
|
||||||
|
// associated scope/element
|
||||||
|
childScope = last.scope;
|
||||||
|
nextOrder.push(value, last);
|
||||||
|
|
||||||
|
if (index === last.index) {
|
||||||
|
// do nothing
|
||||||
|
cursor = last.element;
|
||||||
|
} else {
|
||||||
|
// existing item which got moved
|
||||||
|
last.index = index;
|
||||||
|
// This may be a noop, if the element is next, but I don't know of a good way to
|
||||||
|
// figure this out, since it would require extra DOM access, so let's just hope that
|
||||||
|
// the browsers realizes that it is noop, and treats it as such.
|
||||||
|
cursor.after(last.element);
|
||||||
|
cursor = last.element;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// new item which we don't know about
|
||||||
|
childScope = scope.$new();
|
||||||
|
}
|
||||||
|
|
||||||
|
childScope[valueIdent] = value;
|
||||||
|
if (keyIdent) childScope[keyIdent] = key;
|
||||||
|
childScope.$index = index;
|
||||||
|
childScope.$position = index === 0 ?
|
||||||
|
'first' :
|
||||||
|
(index == collectionLength - 1 ? 'last' : 'middle');
|
||||||
|
|
||||||
|
if (!last) {
|
||||||
|
linker(childScope, function(clone){
|
||||||
|
cursor.after(clone);
|
||||||
|
last = {
|
||||||
|
scope: childScope,
|
||||||
|
element: (cursor = clone),
|
||||||
|
index: index
|
||||||
|
};
|
||||||
|
nextOrder.push(value, last);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//shrink children
|
||||||
|
for (key in lastOrder) {
|
||||||
|
if (lastOrder.hasOwnProperty(key)) {
|
||||||
|
array = lastOrder[key];
|
||||||
|
while(array.length) {
|
||||||
|
value = array.pop();
|
||||||
|
value.element.remove();
|
||||||
|
value.scope.$destroy();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
lastOrder = nextOrder;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
80
src/directive/ngShowHide.js
Normal file
80
src/directive/ngShowHide.js
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:show
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* The `ng:show` and `ng:hide` directives show or hide a portion of the DOM tree (HTML)
|
||||||
|
* conditionally.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression If the {@link guide/dev_guide.expressions expression} is truthy
|
||||||
|
* then the element is shown or hidden respectively.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
Click me: <input type="checkbox" ng:model="checked"><br/>
|
||||||
|
Show: <span ng:show="checked">I show up when your checkbox is checked.</span> <br/>
|
||||||
|
Hide: <span ng:hide="checked">I hide when your checkbox is checked.</span>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should check ng:show / ng:hide', function() {
|
||||||
|
expect(element('.doc-example-live span:first:hidden').count()).toEqual(1);
|
||||||
|
expect(element('.doc-example-live span:last:visible').count()).toEqual(1);
|
||||||
|
|
||||||
|
input('checked').check();
|
||||||
|
|
||||||
|
expect(element('.doc-example-live span:first:visible').count()).toEqual(1);
|
||||||
|
expect(element('.doc-example-live span:last:hidden').count()).toEqual(1);
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
//TODO(misko): refactor to remove element from the DOM
|
||||||
|
var ngShowDirective = ngDirective(function(scope, element, attr){
|
||||||
|
scope.$watch(attr.ngShow, function(value){
|
||||||
|
element.css('display', toBoolean(value) ? '' : 'none');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:hide
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* The `ng:hide` and `ng:show` directives hide or show a portion
|
||||||
|
* of the HTML conditionally.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression If the {@link guide/dev_guide.expressions expression} truthy then
|
||||||
|
* the element is shown or hidden respectively.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
Click me: <input type="checkbox" ng:model="checked"><br/>
|
||||||
|
Show: <span ng:show="checked">I show up when you checkbox is checked?</span> <br/>
|
||||||
|
Hide: <span ng:hide="checked">I hide when you checkbox is checked?</span>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should check ng:show / ng:hide', function() {
|
||||||
|
expect(element('.doc-example-live span:first:hidden').count()).toEqual(1);
|
||||||
|
expect(element('.doc-example-live span:last:visible').count()).toEqual(1);
|
||||||
|
|
||||||
|
input('checked').check();
|
||||||
|
|
||||||
|
expect(element('.doc-example-live span:first:visible').count()).toEqual(1);
|
||||||
|
expect(element('.doc-example-live span:last:hidden').count()).toEqual(1);
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
//TODO(misko): refactor to remove element from the DOM
|
||||||
|
var ngHideDirective = ngDirective(function(scope, element, attr){
|
||||||
|
scope.$watch(attr.ngHide, function(value){
|
||||||
|
element.css('display', toBoolean(value) ? 'none' : '');
|
||||||
|
});
|
||||||
|
});
|
||||||
42
src/directive/ngStyle.js
Normal file
42
src/directive/ngStyle.js
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:style
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* The ng:style allows you to set CSS style on an HTML element conditionally.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
* @param {expression} expression {@link guide/dev_guide.expressions Expression} which evals to an
|
||||||
|
* object whose keys are CSS style names and values are corresponding values for those CSS
|
||||||
|
* keys.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<input type="button" value="set" ng:click="myStyle={color:'red'}">
|
||||||
|
<input type="button" value="clear" ng:click="myStyle={}">
|
||||||
|
<br/>
|
||||||
|
<span ng:style="myStyle">Sample Text</span>
|
||||||
|
<pre>myStyle={{myStyle}}</pre>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should check ng:style', function() {
|
||||||
|
expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)');
|
||||||
|
element('.doc-example-live :button[value=set]').click();
|
||||||
|
expect(element('.doc-example-live span').css('color')).toBe('rgb(255, 0, 0)');
|
||||||
|
element('.doc-example-live :button[value=clear]').click();
|
||||||
|
expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)');
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
var ngStyleDirective = ngDirective(function(scope, element, attr) {
|
||||||
|
scope.$watch(attr.ngStyle, function(newStyles, oldStyles) {
|
||||||
|
if (oldStyles && (newStyles !== oldStyles)) {
|
||||||
|
forEach(oldStyles, function(val, style) { element.css(style, '');});
|
||||||
|
}
|
||||||
|
if (newStyles) element.css(newStyles);
|
||||||
|
}, true);
|
||||||
|
});
|
||||||
110
src/directive/ngSwitch.js
Normal file
110
src/directive/ngSwitch.js
Normal file
|
|
@ -0,0 +1,110 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:switch
|
||||||
|
* @restrict EA
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Conditionally change the DOM structure.
|
||||||
|
*
|
||||||
|
* @usageContent
|
||||||
|
* <any ng:switch-when="matchValue1">...</any>
|
||||||
|
* <any ng:switch-when="matchValue2">...</any>
|
||||||
|
* ...
|
||||||
|
* <any ng:switch-default>...</any>
|
||||||
|
*
|
||||||
|
* @scope
|
||||||
|
* @param {*} on expression to match against <tt>ng:switch-when</tt>.
|
||||||
|
* @paramDescription
|
||||||
|
* On child elments add:
|
||||||
|
*
|
||||||
|
* * `ng:switch-when`: the case statement to match against. If match then this
|
||||||
|
* case will be displayed.
|
||||||
|
* * `ng:switch-default`: the default case when no other casses match.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<script>
|
||||||
|
function Ctrl($scope) {
|
||||||
|
$scope.items = ['settings', 'home', 'other'];
|
||||||
|
$scope.selection = $scope.items[0];
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<div ng:controller="Ctrl">
|
||||||
|
<select ng:model="selection" ng:options="item for item in items">
|
||||||
|
</select>
|
||||||
|
<tt>selection={{selection}}</tt>
|
||||||
|
<hr/>
|
||||||
|
<ng:switch on="selection" >
|
||||||
|
<div ng:switch-when="settings">Settings Div</div>
|
||||||
|
<span ng:switch-when="home">Home Span</span>
|
||||||
|
<span ng:switch-default>default</span>
|
||||||
|
</ng:switch>
|
||||||
|
</div>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should start in settings', function() {
|
||||||
|
expect(element('.doc-example-live ng\\:switch').text()).toMatch(/Settings Div/);
|
||||||
|
});
|
||||||
|
it('should change to home', function() {
|
||||||
|
select('selection').option('home');
|
||||||
|
expect(element('.doc-example-live ng\\:switch').text()).toMatch(/Home Span/);
|
||||||
|
});
|
||||||
|
it('should select deafault', function() {
|
||||||
|
select('selection').option('other');
|
||||||
|
expect(element('.doc-example-live ng\\:switch').text()).toMatch(/default/);
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
var NG_SWITCH = 'ng-switch';
|
||||||
|
var ngSwitchDirective = valueFn({
|
||||||
|
restrict: 'EA',
|
||||||
|
compile: function(element, attr) {
|
||||||
|
var watchExpr = attr.ngSwitch || attr.on,
|
||||||
|
cases = {};
|
||||||
|
|
||||||
|
element.data(NG_SWITCH, cases);
|
||||||
|
return function(scope, element){
|
||||||
|
var selectedTransclude,
|
||||||
|
selectedElement;
|
||||||
|
|
||||||
|
scope.$watch(watchExpr, function(value) {
|
||||||
|
if (selectedElement) {
|
||||||
|
selectedElement.remove();
|
||||||
|
selectedElement = null;
|
||||||
|
}
|
||||||
|
if ((selectedTransclude = cases['!' + value] || cases['?'])) {
|
||||||
|
scope.$eval(attr.change);
|
||||||
|
selectedTransclude(scope.$new(), function(caseElement, scope) {
|
||||||
|
selectedElement = caseElement;
|
||||||
|
element.append(caseElement);
|
||||||
|
element.bind('$destroy', bind(scope, scope.$destroy));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var ngSwitchWhenDirective = ngDirective({
|
||||||
|
transclude: 'element',
|
||||||
|
priority: 500,
|
||||||
|
compile: function(element, attrs, transclude) {
|
||||||
|
var cases = element.inheritedData(NG_SWITCH);
|
||||||
|
assertArg(cases);
|
||||||
|
cases['!' + attrs.ngSwitchWhen] = transclude;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var ngSwitchDefaultDirective = ngDirective({
|
||||||
|
transclude: 'element',
|
||||||
|
priority: 500,
|
||||||
|
compile: function(element, attrs, transclude) {
|
||||||
|
var cases = element.inheritedData(NG_SWITCH);
|
||||||
|
assertArg(cases);
|
||||||
|
cases['?'] = transclude;
|
||||||
|
}
|
||||||
|
});
|
||||||
58
src/directive/ngTransclude.js
Normal file
58
src/directive/ngTransclude.js
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:transclude
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Insert the transcluded DOM here.
|
||||||
|
*
|
||||||
|
* @element ANY
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
<doc:example module="transclude">
|
||||||
|
<doc:source>
|
||||||
|
<script>
|
||||||
|
function Ctrl($scope) {
|
||||||
|
$scope.title = 'Lorem Ipsum';
|
||||||
|
$scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
|
||||||
|
}
|
||||||
|
|
||||||
|
angular.module('transclude', [])
|
||||||
|
.directive('pane', function(){
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
transclude: true,
|
||||||
|
scope: 'isolate',
|
||||||
|
locals: { title:'bind' },
|
||||||
|
template: '<div style="border: 1px solid black;">' +
|
||||||
|
'<div style="background-color: gray">{{title}}</div>' +
|
||||||
|
'<div ng-transclude></div>' +
|
||||||
|
'</div>'
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<div ng:controller="Ctrl">
|
||||||
|
<input ng:model="title"><br>
|
||||||
|
<textarea ng:model="text"></textarea> <br/>
|
||||||
|
<pane title="{{title}}">{{text}}</pane>
|
||||||
|
</div>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should have transcluded', function() {
|
||||||
|
input('title').enter('TITLE');
|
||||||
|
input('text').enter('TEXT');
|
||||||
|
expect(binding('title')).toEqual('TITLE');
|
||||||
|
expect(binding('text')).toEqual('TEXT');
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
var ngTranscludeDirective = ngDirective({
|
||||||
|
controller: ['$transclude', '$element', function($transclude, $element) {
|
||||||
|
$transclude(function(clone) {
|
||||||
|
$element.append(clone);
|
||||||
|
});
|
||||||
|
}]
|
||||||
|
});
|
||||||
169
src/directive/ngView.js
Normal file
169
src/directive/ngView.js
Normal file
|
|
@ -0,0 +1,169 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.ng:view
|
||||||
|
* @restrict ECA
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* # Overview
|
||||||
|
* `ng:view` is a directive that complements the {@link angular.module.ng.$route $route} service by
|
||||||
|
* including the rendered template of the current route into the main layout (`index.html`) file.
|
||||||
|
* Every time the current route changes, the included view changes with it according to the
|
||||||
|
* configuration of the `$route` service.
|
||||||
|
*
|
||||||
|
* @scope
|
||||||
|
* @example
|
||||||
|
<doc:example module="ngView">
|
||||||
|
<doc:source>
|
||||||
|
<script type="text/ng-template" id="examples/book.html">
|
||||||
|
controller: {{name}}<br />
|
||||||
|
Book Id: {{params.bookId}}<br />
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/ng-template" id="examples/chapter.html">
|
||||||
|
controller: {{name}}<br />
|
||||||
|
Book Id: {{params.bookId}}<br />
|
||||||
|
Chapter Id: {{params.chapterId}}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
angular.module('ngView', [], function($routeProvider, $locationProvider) {
|
||||||
|
$routeProvider.when('/Book/:bookId', {
|
||||||
|
template: 'examples/book.html',
|
||||||
|
controller: BookCntl
|
||||||
|
});
|
||||||
|
$routeProvider.when('/Book/:bookId/ch/:chapterId', {
|
||||||
|
template: 'examples/chapter.html',
|
||||||
|
controller: ChapterCntl
|
||||||
|
});
|
||||||
|
|
||||||
|
// configure html5 to get links working on jsfiddle
|
||||||
|
$locationProvider.html5Mode(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
function MainCntl($scope, $route, $routeParams, $location) {
|
||||||
|
$scope.$route = $route;
|
||||||
|
$scope.$location = $location;
|
||||||
|
$scope.$routeParams = $routeParams;
|
||||||
|
}
|
||||||
|
|
||||||
|
function BookCntl($scope, $routeParams) {
|
||||||
|
$scope.name = "BookCntl";
|
||||||
|
$scope.params = $routeParams;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ChapterCntl($scope, $routeParams) {
|
||||||
|
$scope.name = "ChapterCntl";
|
||||||
|
$scope.params = $routeParams;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div ng:controller="MainCntl">
|
||||||
|
Choose:
|
||||||
|
<a href="/Book/Moby">Moby</a> |
|
||||||
|
<a href="/Book/Moby/ch/1">Moby: Ch1</a> |
|
||||||
|
<a href="/Book/Gatsby">Gatsby</a> |
|
||||||
|
<a href="/Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
|
||||||
|
<a href="/Book/Scarlet">Scarlet Letter</a><br/>
|
||||||
|
|
||||||
|
<ng:view></ng:view>
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<pre>$location.path() = {{$location.path()}}</pre>
|
||||||
|
<pre>$route.current.template = {{$route.current.template}}</pre>
|
||||||
|
<pre>$route.current.params = {{$route.current.params}}</pre>
|
||||||
|
<pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
|
||||||
|
<pre>$routeParams = {{$routeParams}}</pre>
|
||||||
|
</div>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should load and compile correct template', function() {
|
||||||
|
element('a:contains("Moby: Ch1")').click();
|
||||||
|
var content = element('.doc-example-live ng\\:view').text();
|
||||||
|
expect(content).toMatch(/controller\: ChapterCntl/);
|
||||||
|
expect(content).toMatch(/Book Id\: Moby/);
|
||||||
|
expect(content).toMatch(/Chapter Id\: 1/);
|
||||||
|
|
||||||
|
element('a:contains("Scarlet")').click();
|
||||||
|
content = element('.doc-example-live ng\\:view').text();
|
||||||
|
expect(content).toMatch(/controller\: BookCntl/);
|
||||||
|
expect(content).toMatch(/Book Id\: Scarlet/);
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$compile',
|
||||||
|
'$controller',
|
||||||
|
function($http, $templateCache, $route, $anchorScroll, $compile,
|
||||||
|
$controller) {
|
||||||
|
return {
|
||||||
|
restrict: 'ECA',
|
||||||
|
terminal: true,
|
||||||
|
link: function(scope, element) {
|
||||||
|
var changeCounter = 0,
|
||||||
|
lastScope;
|
||||||
|
|
||||||
|
scope.$on('$afterRouteChange', function(event, next, previous) {
|
||||||
|
changeCounter++;
|
||||||
|
});
|
||||||
|
|
||||||
|
scope.$watch(function() {return changeCounter;}, function(newChangeCounter) {
|
||||||
|
var template = $route.current && $route.current.template;
|
||||||
|
|
||||||
|
function destroyLastScope() {
|
||||||
|
if (lastScope) {
|
||||||
|
lastScope.$destroy();
|
||||||
|
lastScope = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearContent() {
|
||||||
|
// ignore callback if another route change occured since
|
||||||
|
if (newChangeCounter == changeCounter) {
|
||||||
|
element.html('');
|
||||||
|
}
|
||||||
|
destroyLastScope();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (template) {
|
||||||
|
$http.get(template, {cache: $templateCache}).success(function(response) {
|
||||||
|
// ignore callback if another route change occured since
|
||||||
|
if (newChangeCounter == changeCounter) {
|
||||||
|
element.html(response);
|
||||||
|
destroyLastScope();
|
||||||
|
|
||||||
|
var link = $compile(element.contents()),
|
||||||
|
current = $route.current;
|
||||||
|
|
||||||
|
lastScope = current.scope = scope.$new();
|
||||||
|
if (current.controller) {
|
||||||
|
$controller(current.controller, {$scope: lastScope});
|
||||||
|
}
|
||||||
|
|
||||||
|
link(lastScope);
|
||||||
|
lastScope.$emit('$contentLoaded');
|
||||||
|
|
||||||
|
// $anchorScroll might listen on event...
|
||||||
|
$anchorScroll();
|
||||||
|
}
|
||||||
|
}).error(clearContent);
|
||||||
|
} else {
|
||||||
|
clearContent();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}];
|
||||||
|
|
||||||
|
|
||||||
|
var onloadDirective = valueFn({
|
||||||
|
restrict: 'AC',
|
||||||
|
link: function(scope, elm, attr) {
|
||||||
|
var onloadExp = attr.onload || ''; //workaround for jquery bug #7537)
|
||||||
|
|
||||||
|
scope.$on('$contentLoaded', function(event) {
|
||||||
|
scope.$eval(onloadExp);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
42
src/directive/script.js
Normal file
42
src/directive/script.js
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc directive
|
||||||
|
* @name angular.module.ng.$compileProvider.directive.script
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Load content of a script tag, with type `text/ng-template`, into `$templateCache`, so that the
|
||||||
|
* template can be used by `ng:include`, `ng:view` or directive templates.
|
||||||
|
*
|
||||||
|
* @restrict E
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
<doc:example>
|
||||||
|
<doc:source>
|
||||||
|
<script type="text/ng-template" id="/tpl.html">
|
||||||
|
Content of the template.
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a ng:click="currentTpl='/tpl.html'" id="tpl-link">Load inlined template</a>
|
||||||
|
<div id="tpl-content" ng-include src="currentTpl"></div>
|
||||||
|
</doc:source>
|
||||||
|
<doc:scenario>
|
||||||
|
it('should load template defined inside script tag', function() {
|
||||||
|
element('#tpl-link').click();
|
||||||
|
expect(element('#tpl-content').text()).toMatch(/Content of the template/);
|
||||||
|
});
|
||||||
|
</doc:scenario>
|
||||||
|
</doc:example>
|
||||||
|
*/
|
||||||
|
var scriptDirective = ['$templateCache', function($templateCache) {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
terminal: true,
|
||||||
|
compile: function(element, attr) {
|
||||||
|
if (attr.type == 'text/ng-template') {
|
||||||
|
var templateUrl = attr.id;
|
||||||
|
$templateCache.put(templateUrl, element.text());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}];
|
||||||
6
src/directive/style.js
Normal file
6
src/directive/style.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var styleDirective = valueFn({
|
||||||
|
restrict: 'E',
|
||||||
|
terminal: true
|
||||||
|
});
|
||||||
1031
src/directives.js
1031
src/directives.js
File diff suppressed because it is too large
Load diff
876
src/widgets.js
876
src/widgets.js
|
|
@ -1,876 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @ngdoc directive
|
|
||||||
* @name angular.module.ng.$compileProvider.directive.ng:include
|
|
||||||
* @restrict EA
|
|
||||||
*
|
|
||||||
* @description
|
|
||||||
* Fetches, compiles and includes an external HTML fragment.
|
|
||||||
*
|
|
||||||
* Keep in mind that Same Origin Policy applies to included resources
|
|
||||||
* (e.g. ng:include won't work for file:// access).
|
|
||||||
*
|
|
||||||
* @scope
|
|
||||||
*
|
|
||||||
* @param {string} src angular expression evaluating to URL. If the source is a string constant,
|
|
||||||
* make sure you wrap it in quotes, e.g. `src="'myPartialTemplate.html'"`.
|
|
||||||
* @param {Scope=} [scope=new_child_scope] optional expression which evaluates to an
|
|
||||||
* instance of angular.module.ng.$rootScope.Scope to set the HTML fragment to.
|
|
||||||
* @param {string=} onload Expression to evaluate when a new partial is loaded.
|
|
||||||
*
|
|
||||||
* @param {string=} autoscroll Whether `ng:include` should call {@link angular.module.ng.$anchorScroll
|
|
||||||
* $anchorScroll} to scroll the viewport after the content is loaded.
|
|
||||||
*
|
|
||||||
* - If the attribute is not set, disable scrolling.
|
|
||||||
* - If the attribute is set without value, enable scrolling.
|
|
||||||
* - Otherwise enable scrolling only if the expression evaluates to truthy value.
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
<doc:example>
|
|
||||||
<doc:source jsfiddle="false">
|
|
||||||
<script>
|
|
||||||
function Ctrl($scope) {
|
|
||||||
$scope.templates =
|
|
||||||
[ { name: 'template1.html', url: 'examples/ng-include/template1.html'}
|
|
||||||
, { name: 'template2.html', url: 'examples/ng-include/template2.html'} ];
|
|
||||||
$scope.template = $scope.templates[0];
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<div ng:controller="Ctrl">
|
|
||||||
<select ng:model="template" ng:options="t.name for t in templates">
|
|
||||||
<option value="">(blank)</option>
|
|
||||||
</select>
|
|
||||||
url of the template: <tt><a href="{{template.url}}">{{template.url}}</a></tt>
|
|
||||||
<hr/>
|
|
||||||
<div ng-include src="template.url"></div>
|
|
||||||
</div>
|
|
||||||
</doc:source>
|
|
||||||
<doc:scenario>
|
|
||||||
it('should load template1.html', function() {
|
|
||||||
expect(element('.doc-example-live [ng-include]').text()).
|
|
||||||
toBe('Content of template1.html\n');
|
|
||||||
});
|
|
||||||
it('should load template2.html', function() {
|
|
||||||
select('template').option('1');
|
|
||||||
expect(element('.doc-example-live [ng-include]').text()).
|
|
||||||
toBe('Content of template2.html\n');
|
|
||||||
});
|
|
||||||
it('should change to blank', function() {
|
|
||||||
select('template').option('');
|
|
||||||
expect(element('.doc-example-live [ng-include]').text()).toEqual('');
|
|
||||||
});
|
|
||||||
</doc:scenario>
|
|
||||||
</doc:example>
|
|
||||||
*/
|
|
||||||
var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile',
|
|
||||||
function($http, $templateCache, $anchorScroll, $compile) {
|
|
||||||
return {
|
|
||||||
restrict: 'EA',
|
|
||||||
compile: function(element, attr) {
|
|
||||||
var srcExp = attr.src,
|
|
||||||
scopeExp = attr.scope || '',
|
|
||||||
autoScrollExp = attr.autoscroll;
|
|
||||||
|
|
||||||
return function(scope, element, attr) {
|
|
||||||
var changeCounter = 0,
|
|
||||||
childScope;
|
|
||||||
|
|
||||||
function incrementChange() { changeCounter++;}
|
|
||||||
scope.$watch(srcExp, incrementChange);
|
|
||||||
scope.$watch(function() {
|
|
||||||
var includeScope = scope.$eval(scopeExp);
|
|
||||||
if (includeScope) return includeScope.$id;
|
|
||||||
}, incrementChange);
|
|
||||||
scope.$watch(function() {return changeCounter;}, function(newChangeCounter) {
|
|
||||||
var src = scope.$eval(srcExp),
|
|
||||||
useScope = scope.$eval(scopeExp);
|
|
||||||
|
|
||||||
function clearContent() {
|
|
||||||
// if this callback is still desired
|
|
||||||
if (newChangeCounter === changeCounter) {
|
|
||||||
if (childScope) childScope.$destroy();
|
|
||||||
childScope = null;
|
|
||||||
element.html('');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (src) {
|
|
||||||
$http.get(src, {cache: $templateCache}).success(function(response) {
|
|
||||||
// if this callback is still desired
|
|
||||||
if (newChangeCounter === changeCounter) {
|
|
||||||
element.html(response);
|
|
||||||
if (childScope) childScope.$destroy();
|
|
||||||
childScope = useScope ? useScope : scope.$new();
|
|
||||||
$compile(element.contents())(childScope);
|
|
||||||
if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) {
|
|
||||||
$anchorScroll();
|
|
||||||
}
|
|
||||||
scope.$emit('$contentLoaded');
|
|
||||||
}
|
|
||||||
}).error(clearContent);
|
|
||||||
} else {
|
|
||||||
clearContent();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @ngdoc directive
|
|
||||||
* @name angular.module.ng.$compileProvider.directive.ng:switch
|
|
||||||
* @restrict EA
|
|
||||||
*
|
|
||||||
* @description
|
|
||||||
* Conditionally change the DOM structure.
|
|
||||||
*
|
|
||||||
* @usageContent
|
|
||||||
* <any ng:switch-when="matchValue1">...</any>
|
|
||||||
* <any ng:switch-when="matchValue2">...</any>
|
|
||||||
* ...
|
|
||||||
* <any ng:switch-default>...</any>
|
|
||||||
*
|
|
||||||
* @scope
|
|
||||||
* @param {*} on expression to match against <tt>ng:switch-when</tt>.
|
|
||||||
* @paramDescription
|
|
||||||
* On child elments add:
|
|
||||||
*
|
|
||||||
* * `ng:switch-when`: the case statement to match against. If match then this
|
|
||||||
* case will be displayed.
|
|
||||||
* * `ng:switch-default`: the default case when no other casses match.
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
<doc:example>
|
|
||||||
<doc:source>
|
|
||||||
<script>
|
|
||||||
function Ctrl($scope) {
|
|
||||||
$scope.items = ['settings', 'home', 'other'];
|
|
||||||
$scope.selection = $scope.items[0];
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<div ng:controller="Ctrl">
|
|
||||||
<select ng:model="selection" ng:options="item for item in items">
|
|
||||||
</select>
|
|
||||||
<tt>selection={{selection}}</tt>
|
|
||||||
<hr/>
|
|
||||||
<ng:switch on="selection" >
|
|
||||||
<div ng:switch-when="settings">Settings Div</div>
|
|
||||||
<span ng:switch-when="home">Home Span</span>
|
|
||||||
<span ng:switch-default>default</span>
|
|
||||||
</ng:switch>
|
|
||||||
</div>
|
|
||||||
</doc:source>
|
|
||||||
<doc:scenario>
|
|
||||||
it('should start in settings', function() {
|
|
||||||
expect(element('.doc-example-live ng\\:switch').text()).toMatch(/Settings Div/);
|
|
||||||
});
|
|
||||||
it('should change to home', function() {
|
|
||||||
select('selection').option('home');
|
|
||||||
expect(element('.doc-example-live ng\\:switch').text()).toMatch(/Home Span/);
|
|
||||||
});
|
|
||||||
it('should select deafault', function() {
|
|
||||||
select('selection').option('other');
|
|
||||||
expect(element('.doc-example-live ng\\:switch').text()).toMatch(/default/);
|
|
||||||
});
|
|
||||||
</doc:scenario>
|
|
||||||
</doc:example>
|
|
||||||
*/
|
|
||||||
var NG_SWITCH = 'ng-switch';
|
|
||||||
var ngSwitchDirective = valueFn({
|
|
||||||
restrict: 'EA',
|
|
||||||
compile: function(element, attr) {
|
|
||||||
var watchExpr = attr.ngSwitch || attr.on,
|
|
||||||
cases = {};
|
|
||||||
|
|
||||||
element.data(NG_SWITCH, cases);
|
|
||||||
return function(scope, element){
|
|
||||||
var selectedTransclude,
|
|
||||||
selectedElement;
|
|
||||||
|
|
||||||
scope.$watch(watchExpr, function(value) {
|
|
||||||
if (selectedElement) {
|
|
||||||
selectedElement.remove();
|
|
||||||
selectedElement = null;
|
|
||||||
}
|
|
||||||
if ((selectedTransclude = cases['!' + value] || cases['?'])) {
|
|
||||||
scope.$eval(attr.change);
|
|
||||||
selectedTransclude(scope.$new(), function(caseElement, scope) {
|
|
||||||
selectedElement = caseElement;
|
|
||||||
element.append(caseElement);
|
|
||||||
element.bind('$destroy', bind(scope, scope.$destroy));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var ngSwitchWhenDirective = ngDirective({
|
|
||||||
transclude: 'element',
|
|
||||||
priority: 500,
|
|
||||||
compile: function(element, attrs, transclude) {
|
|
||||||
var cases = element.inheritedData(NG_SWITCH);
|
|
||||||
assertArg(cases);
|
|
||||||
cases['!' + attrs.ngSwitchWhen] = transclude;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var ngSwitchDefaultDirective = ngDirective({
|
|
||||||
transclude: 'element',
|
|
||||||
priority: 500,
|
|
||||||
compile: function(element, attrs, transclude) {
|
|
||||||
var cases = element.inheritedData(NG_SWITCH);
|
|
||||||
assertArg(cases);
|
|
||||||
cases['?'] = transclude;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Modifies the default behavior of html A tag, so that the default action is prevented when href
|
|
||||||
* attribute is empty.
|
|
||||||
*
|
|
||||||
* The reasoning for this change is to allow easy creation of action links with ng:click without
|
|
||||||
* changing the location or causing page reloads, e.g.:
|
|
||||||
* <a href="" ng:click="model.$save()">Save</a>
|
|
||||||
*/
|
|
||||||
var htmlAnchorDirective = valueFn({
|
|
||||||
restrict: 'E',
|
|
||||||
compile: function(element, attr) {
|
|
||||||
// turn <a href ng:click="..">link</a> into a link in IE
|
|
||||||
// but only if it doesn't have name attribute, in which case it's an anchor
|
|
||||||
if (!attr.href) {
|
|
||||||
attr.$set('href', '');
|
|
||||||
}
|
|
||||||
|
|
||||||
return function(scope, element) {
|
|
||||||
element.bind('click', function(event){
|
|
||||||
// if we have no href url, then don't navigate anywhere.
|
|
||||||
if (!element.attr('href')) {
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @ngdoc directive
|
|
||||||
* @name angular.module.ng.$compileProvider.directive.ng:repeat
|
|
||||||
*
|
|
||||||
* @description
|
|
||||||
* The `ng:repeat` widget instantiates a template once per item from a collection. Each template
|
|
||||||
* instance gets its own scope, where the given loop variable is set to the current collection item,
|
|
||||||
* and `$index` is set to the item index or key.
|
|
||||||
*
|
|
||||||
* Special properties are exposed on the local scope of each template instance, including:
|
|
||||||
*
|
|
||||||
* * `$index` – `{number}` – iterator offset of the repeated element (0..length-1)
|
|
||||||
* * `$position` – `{string}` – position of the repeated element in the iterator. One of:
|
|
||||||
* * `'first'`,
|
|
||||||
* * `'middle'`
|
|
||||||
* * `'last'`
|
|
||||||
*
|
|
||||||
* Note: Although `ng:repeat` looks like a directive, it is actually an attribute widget.
|
|
||||||
*
|
|
||||||
* @element ANY
|
|
||||||
* @scope
|
|
||||||
* @priority 1000
|
|
||||||
* @param {string} repeat_expression The expression indicating how to enumerate a collection. Two
|
|
||||||
* formats are currently supported:
|
|
||||||
*
|
|
||||||
* * `variable in expression` – where variable is the user defined loop variable and `expression`
|
|
||||||
* is a scope expression giving the collection to enumerate.
|
|
||||||
*
|
|
||||||
* For example: `track in cd.tracks`.
|
|
||||||
*
|
|
||||||
* * `(key, value) in expression` – where `key` and `value` can be any user defined identifiers,
|
|
||||||
* and `expression` is the scope expression giving the collection to enumerate.
|
|
||||||
*
|
|
||||||
* For example: `(name, age) in {'adam':10, 'amalie':12}`.
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* This example initializes the scope to a list of names and
|
|
||||||
* then uses `ng:repeat` to display every person:
|
|
||||||
<doc:example>
|
|
||||||
<doc:source>
|
|
||||||
<div ng:init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]">
|
|
||||||
I have {{friends.length}} friends. They are:
|
|
||||||
<ul>
|
|
||||||
<li ng:repeat="friend in friends">
|
|
||||||
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</doc:source>
|
|
||||||
<doc:scenario>
|
|
||||||
it('should check ng:repeat', function() {
|
|
||||||
var r = using('.doc-example-live').repeater('ul li');
|
|
||||||
expect(r.count()).toBe(2);
|
|
||||||
expect(r.row(0)).toEqual(["1","John","25"]);
|
|
||||||
expect(r.row(1)).toEqual(["2","Mary","28"]);
|
|
||||||
});
|
|
||||||
</doc:scenario>
|
|
||||||
</doc:example>
|
|
||||||
*/
|
|
||||||
var ngRepeatDirective = ngDirective({
|
|
||||||
transclude: 'element',
|
|
||||||
priority: 1000,
|
|
||||||
terminal: true,
|
|
||||||
compile: function(element, attr, linker) {
|
|
||||||
return function(scope, iterStartElement, attr){
|
|
||||||
var expression = attr.ngRepeat;
|
|
||||||
var match = expression.match(/^\s*(.+)\s+in\s+(.*)\s*$/),
|
|
||||||
lhs, rhs, valueIdent, keyIdent;
|
|
||||||
if (! match) {
|
|
||||||
throw Error("Expected ng:repeat in form of '_item_ in _collection_' but got '" +
|
|
||||||
expression + "'.");
|
|
||||||
}
|
|
||||||
lhs = match[1];
|
|
||||||
rhs = match[2];
|
|
||||||
match = lhs.match(/^([\$\w]+)|\(([\$\w]+)\s*,\s*([\$\w]+)\)$/);
|
|
||||||
if (!match) {
|
|
||||||
throw Error("'item' in 'item in collection' should be identifier or (key, value) but got '" +
|
|
||||||
keyValue + "'.");
|
|
||||||
}
|
|
||||||
valueIdent = match[3] || match[1];
|
|
||||||
keyIdent = match[2];
|
|
||||||
|
|
||||||
// Store a list of elements from previous run. This is a hash where key is the item from the
|
|
||||||
// iterator, and the value is an array of objects with following properties.
|
|
||||||
// - scope: bound scope
|
|
||||||
// - element: previous element.
|
|
||||||
// - index: position
|
|
||||||
// We need an array of these objects since the same object can be returned from the iterator.
|
|
||||||
// We expect this to be a rare case.
|
|
||||||
var lastOrder = new HashQueueMap();
|
|
||||||
scope.$watch(function(scope){
|
|
||||||
var index, length,
|
|
||||||
collection = scope.$eval(rhs),
|
|
||||||
collectionLength = size(collection, true),
|
|
||||||
childScope,
|
|
||||||
// Same as lastOrder but it has the current state. It will become the
|
|
||||||
// lastOrder on the next iteration.
|
|
||||||
nextOrder = new HashQueueMap(),
|
|
||||||
key, value, // key/value of iteration
|
|
||||||
array, last, // last object information {scope, element, index}
|
|
||||||
cursor = iterStartElement; // current position of the node
|
|
||||||
|
|
||||||
if (!isArray(collection)) {
|
|
||||||
// if object, extract keys, sort them and use to determine order of iteration over obj props
|
|
||||||
array = [];
|
|
||||||
for(key in collection) {
|
|
||||||
if (collection.hasOwnProperty(key) && key.charAt(0) != '$') {
|
|
||||||
array.push(key);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
array.sort();
|
|
||||||
} else {
|
|
||||||
array = collection || [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// we are not using forEach for perf reasons (trying to avoid #call)
|
|
||||||
for (index = 0, length = array.length; index < length; index++) {
|
|
||||||
key = (collection === array) ? index : array[index];
|
|
||||||
value = collection[key];
|
|
||||||
last = lastOrder.shift(value);
|
|
||||||
if (last) {
|
|
||||||
// if we have already seen this object, then we need to reuse the
|
|
||||||
// associated scope/element
|
|
||||||
childScope = last.scope;
|
|
||||||
nextOrder.push(value, last);
|
|
||||||
|
|
||||||
if (index === last.index) {
|
|
||||||
// do nothing
|
|
||||||
cursor = last.element;
|
|
||||||
} else {
|
|
||||||
// existing item which got moved
|
|
||||||
last.index = index;
|
|
||||||
// This may be a noop, if the element is next, but I don't know of a good way to
|
|
||||||
// figure this out, since it would require extra DOM access, so let's just hope that
|
|
||||||
// the browsers realizes that it is noop, and treats it as such.
|
|
||||||
cursor.after(last.element);
|
|
||||||
cursor = last.element;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// new item which we don't know about
|
|
||||||
childScope = scope.$new();
|
|
||||||
}
|
|
||||||
|
|
||||||
childScope[valueIdent] = value;
|
|
||||||
if (keyIdent) childScope[keyIdent] = key;
|
|
||||||
childScope.$index = index;
|
|
||||||
childScope.$position = index === 0 ?
|
|
||||||
'first' :
|
|
||||||
(index == collectionLength - 1 ? 'last' : 'middle');
|
|
||||||
|
|
||||||
if (!last) {
|
|
||||||
linker(childScope, function(clone){
|
|
||||||
cursor.after(clone);
|
|
||||||
last = {
|
|
||||||
scope: childScope,
|
|
||||||
element: (cursor = clone),
|
|
||||||
index: index
|
|
||||||
};
|
|
||||||
nextOrder.push(value, last);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//shrink children
|
|
||||||
for (key in lastOrder) {
|
|
||||||
if (lastOrder.hasOwnProperty(key)) {
|
|
||||||
array = lastOrder[key];
|
|
||||||
while(array.length) {
|
|
||||||
value = array.pop();
|
|
||||||
value.element.remove();
|
|
||||||
value.scope.$destroy();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
lastOrder = nextOrder;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @ngdoc directive
|
|
||||||
* @name angular.module.ng.$compileProvider.directive.ng:non-bindable
|
|
||||||
*
|
|
||||||
* @description
|
|
||||||
* Sometimes it is necessary to write code which looks like bindings but which should be left alone
|
|
||||||
* by angular. Use `ng:non-bindable` to make angular ignore a chunk of HTML.
|
|
||||||
*
|
|
||||||
* Note: `ng:non-bindable` looks like a directive, but is actually an attribute widget.
|
|
||||||
*
|
|
||||||
* @element ANY
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* In this example there are two location where a simple binding (`{{}}`) is present, but the one
|
|
||||||
* wrapped in `ng:non-bindable` is left alone.
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
<doc:example>
|
|
||||||
<doc:source>
|
|
||||||
<div>Normal: {{1 + 2}}</div>
|
|
||||||
<div ng:non-bindable>Ignored: {{1 + 2}}</div>
|
|
||||||
</doc:source>
|
|
||||||
<doc:scenario>
|
|
||||||
it('should check ng:non-bindable', function() {
|
|
||||||
expect(using('.doc-example-live').binding('1 + 2')).toBe('3');
|
|
||||||
expect(using('.doc-example-live').element('div:last').text()).
|
|
||||||
toMatch(/1 \+ 2/);
|
|
||||||
});
|
|
||||||
</doc:scenario>
|
|
||||||
</doc:example>
|
|
||||||
*/
|
|
||||||
var ngNonBindableDirective = ngDirective({ terminal: true });
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @ngdoc directive
|
|
||||||
* @name angular.module.ng.$compileProvider.directive.ng:view
|
|
||||||
* @restrict ECA
|
|
||||||
*
|
|
||||||
* @description
|
|
||||||
* # Overview
|
|
||||||
* `ng:view` is a directive that complements the {@link angular.module.ng.$route $route} service by
|
|
||||||
* including the rendered template of the current route into the main layout (`index.html`) file.
|
|
||||||
* Every time the current route changes, the included view changes with it according to the
|
|
||||||
* configuration of the `$route` service.
|
|
||||||
*
|
|
||||||
* @scope
|
|
||||||
* @example
|
|
||||||
<doc:example module="ngView">
|
|
||||||
<doc:source>
|
|
||||||
<script type="text/ng-template" id="examples/book.html">
|
|
||||||
controller: {{name}}<br />
|
|
||||||
Book Id: {{params.bookId}}<br />
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script type="text/ng-template" id="examples/chapter.html">
|
|
||||||
controller: {{name}}<br />
|
|
||||||
Book Id: {{params.bookId}}<br />
|
|
||||||
Chapter Id: {{params.chapterId}}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
angular.module('ngView', [], function($routeProvider, $locationProvider) {
|
|
||||||
$routeProvider.when('/Book/:bookId', {
|
|
||||||
template: 'examples/book.html',
|
|
||||||
controller: BookCntl
|
|
||||||
});
|
|
||||||
$routeProvider.when('/Book/:bookId/ch/:chapterId', {
|
|
||||||
template: 'examples/chapter.html',
|
|
||||||
controller: ChapterCntl
|
|
||||||
});
|
|
||||||
|
|
||||||
// configure html5 to get links working on jsfiddle
|
|
||||||
$locationProvider.html5Mode(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
function MainCntl($scope, $route, $routeParams, $location) {
|
|
||||||
$scope.$route = $route;
|
|
||||||
$scope.$location = $location;
|
|
||||||
$scope.$routeParams = $routeParams;
|
|
||||||
}
|
|
||||||
|
|
||||||
function BookCntl($scope, $routeParams) {
|
|
||||||
$scope.name = "BookCntl";
|
|
||||||
$scope.params = $routeParams;
|
|
||||||
}
|
|
||||||
|
|
||||||
function ChapterCntl($scope, $routeParams) {
|
|
||||||
$scope.name = "ChapterCntl";
|
|
||||||
$scope.params = $routeParams;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div ng:controller="MainCntl">
|
|
||||||
Choose:
|
|
||||||
<a href="/Book/Moby">Moby</a> |
|
|
||||||
<a href="/Book/Moby/ch/1">Moby: Ch1</a> |
|
|
||||||
<a href="/Book/Gatsby">Gatsby</a> |
|
|
||||||
<a href="/Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
|
|
||||||
<a href="/Book/Scarlet">Scarlet Letter</a><br/>
|
|
||||||
|
|
||||||
<ng:view></ng:view>
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<pre>$location.path() = {{$location.path()}}</pre>
|
|
||||||
<pre>$route.current.template = {{$route.current.template}}</pre>
|
|
||||||
<pre>$route.current.params = {{$route.current.params}}</pre>
|
|
||||||
<pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
|
|
||||||
<pre>$routeParams = {{$routeParams}}</pre>
|
|
||||||
</div>
|
|
||||||
</doc:source>
|
|
||||||
<doc:scenario>
|
|
||||||
it('should load and compile correct template', function() {
|
|
||||||
element('a:contains("Moby: Ch1")').click();
|
|
||||||
var content = element('.doc-example-live ng\\:view').text();
|
|
||||||
expect(content).toMatch(/controller\: ChapterCntl/);
|
|
||||||
expect(content).toMatch(/Book Id\: Moby/);
|
|
||||||
expect(content).toMatch(/Chapter Id\: 1/);
|
|
||||||
|
|
||||||
element('a:contains("Scarlet")').click();
|
|
||||||
content = element('.doc-example-live ng\\:view').text();
|
|
||||||
expect(content).toMatch(/controller\: BookCntl/);
|
|
||||||
expect(content).toMatch(/Book Id\: Scarlet/);
|
|
||||||
});
|
|
||||||
</doc:scenario>
|
|
||||||
</doc:example>
|
|
||||||
*/
|
|
||||||
var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$compile',
|
|
||||||
'$controller',
|
|
||||||
function($http, $templateCache, $route, $anchorScroll, $compile,
|
|
||||||
$controller) {
|
|
||||||
return {
|
|
||||||
restrict: 'ECA',
|
|
||||||
terminal: true,
|
|
||||||
link: function(scope, element) {
|
|
||||||
var changeCounter = 0,
|
|
||||||
lastScope;
|
|
||||||
|
|
||||||
scope.$on('$afterRouteChange', function(event, next, previous) {
|
|
||||||
changeCounter++;
|
|
||||||
});
|
|
||||||
|
|
||||||
scope.$watch(function() {return changeCounter;}, function(newChangeCounter) {
|
|
||||||
var template = $route.current && $route.current.template;
|
|
||||||
|
|
||||||
function destroyLastScope() {
|
|
||||||
if (lastScope) {
|
|
||||||
lastScope.$destroy();
|
|
||||||
lastScope = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearContent() {
|
|
||||||
// ignore callback if another route change occured since
|
|
||||||
if (newChangeCounter == changeCounter) {
|
|
||||||
element.html('');
|
|
||||||
}
|
|
||||||
destroyLastScope();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (template) {
|
|
||||||
$http.get(template, {cache: $templateCache}).success(function(response) {
|
|
||||||
// ignore callback if another route change occured since
|
|
||||||
if (newChangeCounter == changeCounter) {
|
|
||||||
element.html(response);
|
|
||||||
destroyLastScope();
|
|
||||||
|
|
||||||
var link = $compile(element.contents()),
|
|
||||||
current = $route.current;
|
|
||||||
|
|
||||||
lastScope = current.scope = scope.$new();
|
|
||||||
if (current.controller) {
|
|
||||||
$controller(current.controller, {$scope: lastScope});
|
|
||||||
}
|
|
||||||
|
|
||||||
link(lastScope);
|
|
||||||
lastScope.$emit('$contentLoaded');
|
|
||||||
|
|
||||||
// $anchorScroll might listen on event...
|
|
||||||
$anchorScroll();
|
|
||||||
}
|
|
||||||
}).error(clearContent);
|
|
||||||
} else {
|
|
||||||
clearContent();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}];
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @ngdoc directive
|
|
||||||
* @name angular.module.ng.$compileProvider.directive.ng:pluralize
|
|
||||||
* @restrict EA
|
|
||||||
*
|
|
||||||
* @description
|
|
||||||
* # Overview
|
|
||||||
* ng:pluralize is a widget that displays messages according to en-US localization rules.
|
|
||||||
* These rules are bundled with angular.js and the rules can be overridden
|
|
||||||
* (see {@link guide/dev_guide.i18n Angular i18n} dev guide). You configure ng:pluralize by
|
|
||||||
* specifying the mappings between
|
|
||||||
* {@link http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html
|
|
||||||
* plural categories} and the strings to be displayed.
|
|
||||||
*
|
|
||||||
* # Plural categories and explicit number rules
|
|
||||||
* There are two
|
|
||||||
* {@link http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html
|
|
||||||
* plural categories} in Angular's default en-US locale: "one" and "other".
|
|
||||||
*
|
|
||||||
* While a pural category may match many numbers (for example, in en-US locale, "other" can match
|
|
||||||
* any number that is not 1), an explicit number rule can only match one number. For example, the
|
|
||||||
* explicit number rule for "3" matches the number 3. You will see the use of plural categories
|
|
||||||
* and explicit number rules throughout later parts of this documentation.
|
|
||||||
*
|
|
||||||
* # Configuring ng:pluralize
|
|
||||||
* You configure ng:pluralize by providing 2 attributes: `count` and `when`.
|
|
||||||
* You can also provide an optional attribute, `offset`.
|
|
||||||
*
|
|
||||||
* The value of the `count` attribute can be either a string or an {@link guide/dev_guide.expressions
|
|
||||||
* Angular expression}; these are evaluated on the current scope for its binded value.
|
|
||||||
*
|
|
||||||
* The `when` attribute specifies the mappings between plural categories and the actual
|
|
||||||
* string to be displayed. The value of the attribute should be a JSON object so that Angular
|
|
||||||
* can interpret it correctly.
|
|
||||||
*
|
|
||||||
* The following example shows how to configure ng:pluralize:
|
|
||||||
*
|
|
||||||
* <pre>
|
|
||||||
* <ng:pluralize count="personCount"
|
|
||||||
when="{'0': 'Nobody is viewing.',
|
|
||||||
* 'one': '1 person is viewing.',
|
|
||||||
* 'other': '{} people are viewing.'}">
|
|
||||||
* </ng:pluralize>
|
|
||||||
*</pre>
|
|
||||||
*
|
|
||||||
* In the example, `"0: Nobody is viewing."` is an explicit number rule. If you did not
|
|
||||||
* specify this rule, 0 would be matched to the "other" category and "0 people are viewing"
|
|
||||||
* would be shown instead of "Nobody is viewing". You can specify an explicit number rule for
|
|
||||||
* other numbers, for example 12, so that instead of showing "12 people are viewing", you can
|
|
||||||
* show "a dozen people are viewing".
|
|
||||||
*
|
|
||||||
* You can use a set of closed braces(`{}`) as a placeholder for the number that you want substituted
|
|
||||||
* into pluralized strings. In the previous example, Angular will replace `{}` with
|
|
||||||
* <span ng:non-bindable>`{{personCount}}`</span>. The closed braces `{}` is a placeholder
|
|
||||||
* for <span ng:non-bindable>{{numberExpression}}</span>.
|
|
||||||
*
|
|
||||||
* # Configuring ng:pluralize with offset
|
|
||||||
* The `offset` attribute allows further customization of pluralized text, which can result in
|
|
||||||
* a better user experience. For example, instead of the message "4 people are viewing this document",
|
|
||||||
* you might display "John, Kate and 2 others are viewing this document".
|
|
||||||
* The offset attribute allows you to offset a number by any desired value.
|
|
||||||
* Let's take a look at an example:
|
|
||||||
*
|
|
||||||
* <pre>
|
|
||||||
* <ng:pluralize count="personCount" offset=2
|
|
||||||
* when="{'0': 'Nobody is viewing.',
|
|
||||||
* '1': '{{person1}} is viewing.',
|
|
||||||
* '2': '{{person1}} and {{person2}} are viewing.',
|
|
||||||
* 'one': '{{person1}}, {{person2}} and one other person are viewing.',
|
|
||||||
* 'other': '{{person1}}, {{person2}} and {} other people are viewing.'}">
|
|
||||||
* </ng:pluralize>
|
|
||||||
* </pre>
|
|
||||||
*
|
|
||||||
* Notice that we are still using two plural categories(one, other), but we added
|
|
||||||
* three explicit number rules 0, 1 and 2.
|
|
||||||
* When one person, perhaps John, views the document, "John is viewing" will be shown.
|
|
||||||
* When three people view the document, no explicit number rule is found, so
|
|
||||||
* an offset of 2 is taken off 3, and Angular uses 1 to decide the plural category.
|
|
||||||
* In this case, plural category 'one' is matched and "John, Marry and one other person are viewing"
|
|
||||||
* is shown.
|
|
||||||
*
|
|
||||||
* Note that when you specify offsets, you must provide explicit number rules for
|
|
||||||
* numbers from 0 up to and including the offset. If you use an offset of 3, for example,
|
|
||||||
* you must provide explicit number rules for 0, 1, 2 and 3. You must also provide plural strings for
|
|
||||||
* plural categories "one" and "other".
|
|
||||||
*
|
|
||||||
* @param {string|expression} count The variable to be bounded to.
|
|
||||||
* @param {string} when The mapping between plural category to its correspoding strings.
|
|
||||||
* @param {number=} offset Offset to deduct from the total number.
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
<doc:example>
|
|
||||||
<doc:source>
|
|
||||||
<script>
|
|
||||||
function Ctrl($scope) {
|
|
||||||
$scope.person1 = 'Igor';
|
|
||||||
$scope.person2 = 'Misko';
|
|
||||||
$scope.personCount = 1;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<div ng:controller="Ctrl">
|
|
||||||
Person 1:<input type="text" ng:model="person1" value="Igor" /><br/>
|
|
||||||
Person 2:<input type="text" ng:model="person2" value="Misko" /><br/>
|
|
||||||
Number of People:<input type="text" ng:model="personCount" value="1" /><br/>
|
|
||||||
|
|
||||||
<!--- Example with simple pluralization rules for en locale --->
|
|
||||||
Without Offset:
|
|
||||||
<ng-pluralize count="personCount"
|
|
||||||
when="{'0': 'Nobody is viewing.',
|
|
||||||
'one': '1 person is viewing.',
|
|
||||||
'other': '{} people are viewing.'}">
|
|
||||||
</ng-pluralize><br>
|
|
||||||
|
|
||||||
<!--- Example with offset --->
|
|
||||||
With Offset(2):
|
|
||||||
<ng-pluralize count="personCount" offset=2
|
|
||||||
when="{'0': 'Nobody is viewing.',
|
|
||||||
'1': '{{person1}} is viewing.',
|
|
||||||
'2': '{{person1}} and {{person2}} are viewing.',
|
|
||||||
'one': '{{person1}}, {{person2}} and one other person are viewing.',
|
|
||||||
'other': '{{person1}}, {{person2}} and {} other people are viewing.'}">
|
|
||||||
</ng-pluralize>
|
|
||||||
</div>
|
|
||||||
</doc:source>
|
|
||||||
<doc:scenario>
|
|
||||||
it('should show correct pluralized string', function() {
|
|
||||||
expect(element('.doc-example-live ng-pluralize:first').text()).
|
|
||||||
toBe('1 person is viewing.');
|
|
||||||
expect(element('.doc-example-live ng-pluralize:last').text()).
|
|
||||||
toBe('Igor is viewing.');
|
|
||||||
|
|
||||||
using('.doc-example-live').input('personCount').enter('0');
|
|
||||||
expect(element('.doc-example-live ng-pluralize:first').text()).
|
|
||||||
toBe('Nobody is viewing.');
|
|
||||||
expect(element('.doc-example-live ng-pluralize:last').text()).
|
|
||||||
toBe('Nobody is viewing.');
|
|
||||||
|
|
||||||
using('.doc-example-live').input('personCount').enter('2');
|
|
||||||
expect(element('.doc-example-live ng-pluralize:first').text()).
|
|
||||||
toBe('2 people are viewing.');
|
|
||||||
expect(element('.doc-example-live ng-pluralize:last').text()).
|
|
||||||
toBe('Igor and Misko are viewing.');
|
|
||||||
|
|
||||||
using('.doc-example-live').input('personCount').enter('3');
|
|
||||||
expect(element('.doc-example-live ng-pluralize:first').text()).
|
|
||||||
toBe('3 people are viewing.');
|
|
||||||
expect(element('.doc-example-live ng-pluralize:last').text()).
|
|
||||||
toBe('Igor, Misko and one other person are viewing.');
|
|
||||||
|
|
||||||
using('.doc-example-live').input('personCount').enter('4');
|
|
||||||
expect(element('.doc-example-live ng-pluralize:first').text()).
|
|
||||||
toBe('4 people are viewing.');
|
|
||||||
expect(element('.doc-example-live ng-pluralize:last').text()).
|
|
||||||
toBe('Igor, Misko and 2 other people are viewing.');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should show data-binded names', function() {
|
|
||||||
using('.doc-example-live').input('personCount').enter('4');
|
|
||||||
expect(element('.doc-example-live ng-pluralize:last').text()).
|
|
||||||
toBe('Igor, Misko and 2 other people are viewing.');
|
|
||||||
|
|
||||||
using('.doc-example-live').input('person1').enter('Di');
|
|
||||||
using('.doc-example-live').input('person2').enter('Vojta');
|
|
||||||
expect(element('.doc-example-live ng-pluralize:last').text()).
|
|
||||||
toBe('Di, Vojta and 2 other people are viewing.');
|
|
||||||
});
|
|
||||||
</doc:scenario>
|
|
||||||
</doc:example>
|
|
||||||
*/
|
|
||||||
var ngPluralizeDirective = ['$locale', '$interpolate', function($locale, $interpolate) {
|
|
||||||
var BRACE = /{}/g;
|
|
||||||
return {
|
|
||||||
restrict: 'EA',
|
|
||||||
link: function(scope, element, attr) {
|
|
||||||
var numberExp = attr.count,
|
|
||||||
whenExp = element.attr(attr.$attr.when), // this is because we have {{}} in attrs
|
|
||||||
offset = attr.offset || 0,
|
|
||||||
whens = scope.$eval(whenExp),
|
|
||||||
whensExpFns = {};
|
|
||||||
|
|
||||||
forEach(whens, function(expression, key) {
|
|
||||||
whensExpFns[key] =
|
|
||||||
$interpolate(expression.replace(BRACE, '{{' + numberExp + '-' + offset + '}}'));
|
|
||||||
});
|
|
||||||
|
|
||||||
scope.$watch(function() {
|
|
||||||
var value = parseFloat(scope.$eval(numberExp));
|
|
||||||
|
|
||||||
if (!isNaN(value)) {
|
|
||||||
//if explicit number rule such as 1, 2, 3... is defined, just use it. Otherwise,
|
|
||||||
//check it against pluralization rules in $locale service
|
|
||||||
if (!whens[value]) value = $locale.pluralCat(value - offset);
|
|
||||||
return whensExpFns[value](scope, element, true);
|
|
||||||
} else {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
}, function(newVal) {
|
|
||||||
element.text(newVal);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}];
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @ngdoc directive
|
|
||||||
* @name angular.module.ng.$compileProvider.directive.script
|
|
||||||
*
|
|
||||||
* @description
|
|
||||||
* Load content of a script tag, with type `text/ng-template`, into `$templateCache`, so that the
|
|
||||||
* template can be used by `ng:include`, `ng:view` or directive templates.
|
|
||||||
*
|
|
||||||
* @restrict E
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
<doc:example>
|
|
||||||
<doc:source>
|
|
||||||
<script type="text/ng-template" id="/tpl.html">
|
|
||||||
Content of the template.
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<a ng:click="currentTpl='/tpl.html'" id="tpl-link">Load inlined template</a>
|
|
||||||
<div id="tpl-content" ng-include src="currentTpl"></div>
|
|
||||||
</doc:source>
|
|
||||||
<doc:scenario>
|
|
||||||
it('should load template defined inside script tag', function() {
|
|
||||||
element('#tpl-link').click();
|
|
||||||
expect(element('#tpl-content').text()).toMatch(/Content of the template/);
|
|
||||||
});
|
|
||||||
</doc:scenario>
|
|
||||||
</doc:example>
|
|
||||||
*/
|
|
||||||
var scriptDirective = ['$templateCache', function($templateCache) {
|
|
||||||
return {
|
|
||||||
restrict: 'E',
|
|
||||||
terminal: true,
|
|
||||||
compile: function(element, attr) {
|
|
||||||
if (attr.type == 'text/ng-template') {
|
|
||||||
var templateUrl = attr.id;
|
|
||||||
$templateCache.put(templateUrl, element.text());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}];
|
|
||||||
46
test/directive/aSpec.js
Normal file
46
test/directive/aSpec.js
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('a', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
|
||||||
|
afterEach(function(){
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should prevent default action to be executed when href is empty',
|
||||||
|
inject(function($rootScope, $compile) {
|
||||||
|
var orgLocation = document.location.href,
|
||||||
|
preventDefaultCalled = false,
|
||||||
|
event;
|
||||||
|
|
||||||
|
element = $compile('<a href="">empty link</a>')($rootScope);
|
||||||
|
|
||||||
|
if (msie < 9) {
|
||||||
|
|
||||||
|
event = document.createEventObject();
|
||||||
|
expect(event.returnValue).not.toBeDefined();
|
||||||
|
element[0].fireEvent('onclick', event);
|
||||||
|
expect(event.returnValue).toEqual(false);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
event = document.createEvent('MouseEvent');
|
||||||
|
event.initMouseEvent(
|
||||||
|
'click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
|
||||||
|
|
||||||
|
event.preventDefaultOrg = event.preventDefault;
|
||||||
|
event.preventDefault = function() {
|
||||||
|
preventDefaultCalled = true;
|
||||||
|
if (this.preventDefaultOrg) this.preventDefaultOrg();
|
||||||
|
};
|
||||||
|
|
||||||
|
element[0].dispatchEvent(event);
|
||||||
|
|
||||||
|
expect(preventDefaultCalled).toEqual(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
expect(document.location.href).toEqual(orgLocation);
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
@ -1,88 +1,12 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
describe("markups", function() {
|
describe('boolean attr directives', function() {
|
||||||
var element;
|
var element;
|
||||||
|
|
||||||
afterEach(function() {
|
afterEach(function() {
|
||||||
dealoc(element);
|
dealoc(element);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should translate {{}} in text', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div>hello {{name}}!</div>')($rootScope)
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(sortedHtml(element)).toEqual('<div>hello !</div>');
|
|
||||||
$rootScope.name = 'Misko';
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(sortedHtml(element)).toEqual('<div>hello Misko!</div>');
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should translate {{}} in terminal nodes', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<select ng:model="x"><option value="">Greet {{name}}!</option></select>')($rootScope)
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(sortedHtml(element).replace(' selected="true"', '')).
|
|
||||||
toEqual('<select ng:model="x">' +
|
|
||||||
'<option>Greet !</option>' +
|
|
||||||
'</select>');
|
|
||||||
$rootScope.name = 'Misko';
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(sortedHtml(element).replace(' selected="true"', '')).
|
|
||||||
toEqual('<select ng:model="x">' +
|
|
||||||
'<option>Greet Misko!</option>' +
|
|
||||||
'</select>');
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should translate {{}} in attributes', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div src="http://server/{{path}}.png"/>')($rootScope)
|
|
||||||
$rootScope.path = 'a/b';
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.attr('src')).toEqual("http://server/a/b.png");
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe('OPTION value', function() {
|
|
||||||
beforeEach(function() {
|
|
||||||
this.addMatchers({
|
|
||||||
toHaveValue: function(expected){
|
|
||||||
this.message = function() {
|
|
||||||
return 'Expected "' + this.actual.html() + '" to have value="' + expected + '".';
|
|
||||||
};
|
|
||||||
|
|
||||||
var value;
|
|
||||||
htmlParser(this.actual.html(), {
|
|
||||||
start:function(tag, attrs){
|
|
||||||
value = attrs.value;
|
|
||||||
},
|
|
||||||
end:noop,
|
|
||||||
chars:noop
|
|
||||||
});
|
|
||||||
return trim(value) == trim(expected);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
it('should populate value attribute on OPTION', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<select ng:model="x"><option>abc</option></select>')($rootScope)
|
|
||||||
expect(element).toHaveValue('abc');
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should ignore value if already exists', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<select ng:model="x"><option value="abc">xyz</option></select>')($rootScope)
|
|
||||||
expect(element).toHaveValue('abc');
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should set value even if newlines present', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<select ng:model="x"><option attr="\ntext\n" \n>\nabc\n</option></select>')($rootScope)
|
|
||||||
expect(element).toHaveValue('\nabc\n');
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should set value even if self closing HTML', inject(function($rootScope, $compile) {
|
|
||||||
// IE removes the \n from option, which makes this test pointless
|
|
||||||
if (msie) return;
|
|
||||||
element = $compile('<select ng:model="x"><option>\n</option></select>')($rootScope)
|
|
||||||
expect(element).toHaveValue('\n');
|
|
||||||
}));
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should bind href', inject(function($rootScope, $compile) {
|
it('should bind href', inject(function($rootScope, $compile) {
|
||||||
element = $compile('<a ng:href="{{url}}"></a>')($rootScope)
|
element = $compile('<a ng:href="{{url}}"></a>')($rootScope)
|
||||||
|
|
@ -91,6 +15,7 @@ describe("markups", function() {
|
||||||
expect(element.attr('href')).toEqual('http://server');
|
expect(element.attr('href')).toEqual('http://server');
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
||||||
it('should bind disabled', inject(function($rootScope, $compile) {
|
it('should bind disabled', inject(function($rootScope, $compile) {
|
||||||
element = $compile('<button ng:disabled="{{isDisabled}}">Button</button>')($rootScope)
|
element = $compile('<button ng:disabled="{{isDisabled}}">Button</button>')($rootScope)
|
||||||
$rootScope.isDisabled = false;
|
$rootScope.isDisabled = false;
|
||||||
|
|
@ -101,6 +26,7 @@ describe("markups", function() {
|
||||||
expect(element.attr('disabled')).toBeTruthy();
|
expect(element.attr('disabled')).toBeTruthy();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
||||||
it('should bind checked', inject(function($rootScope, $compile) {
|
it('should bind checked', inject(function($rootScope, $compile) {
|
||||||
element = $compile('<input type="checkbox" ng:checked="{{isChecked}}" />')($rootScope)
|
element = $compile('<input type="checkbox" ng:checked="{{isChecked}}" />')($rootScope)
|
||||||
$rootScope.isChecked = false;
|
$rootScope.isChecked = false;
|
||||||
|
|
@ -111,6 +37,7 @@ describe("markups", function() {
|
||||||
expect(element.attr('checked')).toBeTruthy();
|
expect(element.attr('checked')).toBeTruthy();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
||||||
it('should bind selected', inject(function($rootScope, $compile) {
|
it('should bind selected', inject(function($rootScope, $compile) {
|
||||||
element = $compile('<select><option value=""></option><option ng:selected="{{isSelected}}">Greetings!</option></select>')($rootScope)
|
element = $compile('<select><option value=""></option><option ng:selected="{{isSelected}}">Greetings!</option></select>')($rootScope)
|
||||||
jqLite(document.body).append(element)
|
jqLite(document.body).append(element)
|
||||||
|
|
@ -122,6 +49,7 @@ describe("markups", function() {
|
||||||
expect(element.children()[1].selected).toBeTruthy();
|
expect(element.children()[1].selected).toBeTruthy();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
||||||
it('should bind readonly', inject(function($rootScope, $compile) {
|
it('should bind readonly', inject(function($rootScope, $compile) {
|
||||||
element = $compile('<input type="text" ng:readonly="{{isReadonly}}" />')($rootScope)
|
element = $compile('<input type="text" ng:readonly="{{isReadonly}}" />')($rootScope)
|
||||||
$rootScope.isReadonly=false;
|
$rootScope.isReadonly=false;
|
||||||
|
|
@ -132,6 +60,7 @@ describe("markups", function() {
|
||||||
expect(element.attr('readOnly')).toBeTruthy();
|
expect(element.attr('readOnly')).toBeTruthy();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
||||||
it('should bind multiple', inject(function($rootScope, $compile) {
|
it('should bind multiple', inject(function($rootScope, $compile) {
|
||||||
element = $compile('<select ng:multiple="{{isMultiple}}"></select>')($rootScope)
|
element = $compile('<select ng:multiple="{{isMultiple}}"></select>')($rootScope)
|
||||||
$rootScope.isMultiple=false;
|
$rootScope.isMultiple=false;
|
||||||
|
|
@ -142,6 +71,7 @@ describe("markups", function() {
|
||||||
expect(element.attr('multiple')).toBeTruthy();
|
expect(element.attr('multiple')).toBeTruthy();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
||||||
it('should bind src', inject(function($rootScope, $compile) {
|
it('should bind src', inject(function($rootScope, $compile) {
|
||||||
element = $compile('<div ng:src="{{url}}" />')($rootScope)
|
element = $compile('<div ng:src="{{url}}" />')($rootScope)
|
||||||
$rootScope.url = 'http://localhost/';
|
$rootScope.url = 'http://localhost/';
|
||||||
|
|
@ -149,6 +79,7 @@ describe("markups", function() {
|
||||||
expect(element.attr('src')).toEqual('http://localhost/');
|
expect(element.attr('src')).toEqual('http://localhost/');
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
||||||
it('should bind href and merge with other attrs', inject(function($rootScope, $compile) {
|
it('should bind href and merge with other attrs', inject(function($rootScope, $compile) {
|
||||||
element = $compile('<a ng:href="{{url}}" rel="{{rel}}"></a>')($rootScope);
|
element = $compile('<a ng:href="{{url}}" rel="{{rel}}"></a>')($rootScope);
|
||||||
$rootScope.url = 'http://server';
|
$rootScope.url = 'http://server';
|
||||||
|
|
@ -158,6 +89,7 @@ describe("markups", function() {
|
||||||
expect(element.attr('rel')).toEqual('REL');
|
expect(element.attr('rel')).toEqual('REL');
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
||||||
it('should bind Text with no Bindings', inject(function($compile, $rootScope) {
|
it('should bind Text with no Bindings', inject(function($compile, $rootScope) {
|
||||||
forEach(['checked', 'disabled', 'multiple', 'readonly', 'selected'], function(name) {
|
forEach(['checked', 'disabled', 'multiple', 'readonly', 'selected'], function(name) {
|
||||||
element = $compile('<div ng:' + name + '="some"></div>')($rootScope)
|
element = $compile('<div ng:' + name + '="some"></div>')($rootScope)
|
||||||
|
|
@ -177,4 +109,3 @@ describe("markups", function() {
|
||||||
dealoc(element);
|
dealoc(element);
|
||||||
}));
|
}));
|
||||||
});
|
});
|
||||||
|
|
||||||
113
test/directive/ngBindSpec.js
Normal file
113
test/directive/ngBindSpec.js
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('ng:bind-*', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
|
||||||
|
afterEach(function() {
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
describe('ng:bind', function() {
|
||||||
|
|
||||||
|
it('should set text', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div ng:bind="a"></div>')($rootScope);
|
||||||
|
expect(element.text()).toEqual('');
|
||||||
|
$rootScope.a = 'misko';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.hasClass('ng-binding')).toEqual(true);
|
||||||
|
expect(element.text()).toEqual('misko');
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should set text to blank if undefined', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div ng:bind="a"></div>')($rootScope);
|
||||||
|
$rootScope.a = 'misko';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('misko');
|
||||||
|
$rootScope.a = undefined;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('');
|
||||||
|
$rootScope.a = null;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('');
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should set html', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div ng:bind-html="html"></div>')($rootScope);
|
||||||
|
$rootScope.html = '<div unknown>hello</div>';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(lowercase(element.html())).toEqual('<div>hello</div>');
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should set unsafe html', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div ng:bind-html-unsafe="html"></div>')($rootScope);
|
||||||
|
$rootScope.html = '<div onclick="">hello</div>';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(lowercase(element.html())).toEqual('<div onclick="">hello</div>');
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should suppress rendering of falsy values', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div>{{ null }}{{ undefined }}{{ "" }}-{{ 0 }}{{ false }}</div>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('-0false');
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should render object as JSON ignore $$', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div>{{ {key:"value", $$key:"hide"} }}</div>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(fromJson(element.text())).toEqual({key:'value'});
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
describe('ng:bind-template', function() {
|
||||||
|
|
||||||
|
it('should ng:bind-template', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div ng:bind-template="Hello {{name}}!"></div>')($rootScope);
|
||||||
|
$rootScope.name = 'Misko';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.hasClass('ng-binding')).toEqual(true);
|
||||||
|
expect(element.text()).toEqual('Hello Misko!');
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should render object as JSON ignore $$', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<pre>{{ {key:"value", $$key:"hide"} }}</pre>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(fromJson(element.text())).toEqual({key:'value'});
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
describe('ng:bind-attr', function() {
|
||||||
|
it('should bind attributes', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div ng:bind-attr="{src:\'http://localhost/mysrc\', alt:\'myalt\'}"/>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.attr('src')).toEqual('http://localhost/mysrc');
|
||||||
|
expect(element.attr('alt')).toEqual('myalt');
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should not pretty print JSON in attributes', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<img alt="{{ {a:1} }}"/>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.attr('alt')).toEqual('{"a":1}');
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should remove special attributes on false', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<input ng:bind-attr="{disabled:\'{{disabled}}\', readonly:\'{{readonly}}\', checked:\'{{checked}}\'}"/>')($rootScope);
|
||||||
|
var input = element[0];
|
||||||
|
expect(input.disabled).toEqual(false);
|
||||||
|
expect(input.readOnly).toEqual(false);
|
||||||
|
expect(input.checked).toEqual(false);
|
||||||
|
|
||||||
|
$rootScope.disabled = true;
|
||||||
|
$rootScope.readonly = true;
|
||||||
|
$rootScope.checked = true;
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(input.disabled).toEqual(true);
|
||||||
|
expect(input.readOnly).toEqual(true);
|
||||||
|
expect(input.checked).toEqual(true);
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
});
|
||||||
204
test/directive/ngClassSpec.js
Normal file
204
test/directive/ngClassSpec.js
Normal file
|
|
@ -0,0 +1,204 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('ng:class', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
|
||||||
|
afterEach(function() {
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should add new and remove old classes dynamically', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div class="existing" ng:class="dynClass"></div>')($rootScope);
|
||||||
|
$rootScope.dynClass = 'A';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.hasClass('existing')).toBe(true);
|
||||||
|
expect(element.hasClass('A')).toBe(true);
|
||||||
|
|
||||||
|
$rootScope.dynClass = 'B';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.hasClass('existing')).toBe(true);
|
||||||
|
expect(element.hasClass('A')).toBe(false);
|
||||||
|
expect(element.hasClass('B')).toBe(true);
|
||||||
|
|
||||||
|
delete $rootScope.dynClass;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.hasClass('existing')).toBe(true);
|
||||||
|
expect(element.hasClass('A')).toBe(false);
|
||||||
|
expect(element.hasClass('B')).toBe(false);
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should support adding multiple classes via an array', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div class="existing" ng:class="[\'A\', \'B\']"></div>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.hasClass('existing')).toBeTruthy();
|
||||||
|
expect(element.hasClass('A')).toBeTruthy();
|
||||||
|
expect(element.hasClass('B')).toBeTruthy();
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should support adding multiple classes conditionally via a map of class names to boolean' +
|
||||||
|
'expressions', inject(function($rootScope, $compile) {
|
||||||
|
var element = $compile(
|
||||||
|
'<div class="existing" ' +
|
||||||
|
'ng:class="{A: conditionA, B: conditionB(), AnotB: conditionA&&!conditionB}">' +
|
||||||
|
'</div>')($rootScope);
|
||||||
|
$rootScope.conditionA = true;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.hasClass('existing')).toBeTruthy();
|
||||||
|
expect(element.hasClass('A')).toBeTruthy();
|
||||||
|
expect(element.hasClass('B')).toBeFalsy();
|
||||||
|
expect(element.hasClass('AnotB')).toBeTruthy();
|
||||||
|
|
||||||
|
$rootScope.conditionB = function() { return true };
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.hasClass('existing')).toBeTruthy();
|
||||||
|
expect(element.hasClass('A')).toBeTruthy();
|
||||||
|
expect(element.hasClass('B')).toBeTruthy();
|
||||||
|
expect(element.hasClass('AnotB')).toBeFalsy();
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should support adding multiple classes via a space delimited string', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div class="existing" ng:class="\'A B\'"></div>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.hasClass('existing')).toBeTruthy();
|
||||||
|
expect(element.hasClass('A')).toBeTruthy();
|
||||||
|
expect(element.hasClass('B')).toBeTruthy();
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should preserve class added post compilation with pre-existing classes', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div class="existing" ng:class="dynClass"></div>')($rootScope);
|
||||||
|
$rootScope.dynClass = 'A';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.hasClass('existing')).toBe(true);
|
||||||
|
|
||||||
|
// add extra class, change model and eval
|
||||||
|
element.addClass('newClass');
|
||||||
|
$rootScope.dynClass = 'B';
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(element.hasClass('existing')).toBe(true);
|
||||||
|
expect(element.hasClass('B')).toBe(true);
|
||||||
|
expect(element.hasClass('newClass')).toBe(true);
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should preserve class added post compilation without pre-existing classes"', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div ng:class="dynClass"></div>')($rootScope);
|
||||||
|
$rootScope.dynClass = 'A';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.hasClass('A')).toBe(true);
|
||||||
|
|
||||||
|
// add extra class, change model and eval
|
||||||
|
element.addClass('newClass');
|
||||||
|
$rootScope.dynClass = 'B';
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(element.hasClass('B')).toBe(true);
|
||||||
|
expect(element.hasClass('newClass')).toBe(true);
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should preserve other classes with similar name"', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div class="ui-panel ui-selected" ng:class="dynCls"></div>')($rootScope);
|
||||||
|
$rootScope.dynCls = 'panel';
|
||||||
|
$rootScope.$digest();
|
||||||
|
$rootScope.dynCls = 'foo';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element[0].className).toBe('ui-panel ui-selected ng-scope foo');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should not add duplicate classes', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div class="panel bar" ng:class="dynCls"></div>')($rootScope);
|
||||||
|
$rootScope.dynCls = 'panel';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element[0].className).toBe('panel bar ng-scope');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should remove classes even if it was specified via class attribute', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div class="panel bar" ng:class="dynCls"></div>')($rootScope);
|
||||||
|
$rootScope.dynCls = 'panel';
|
||||||
|
$rootScope.$digest();
|
||||||
|
$rootScope.dynCls = 'window';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element[0].className).toBe('bar ng-scope window');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should remove classes even if they were added by another code', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div ng:class="dynCls"></div>')($rootScope);
|
||||||
|
$rootScope.dynCls = 'foo';
|
||||||
|
$rootScope.$digest();
|
||||||
|
element.addClass('foo');
|
||||||
|
$rootScope.dynCls = '';
|
||||||
|
$rootScope.$digest();
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should convert undefined and null values to an empty string', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div ng:class="dynCls"></div>')($rootScope);
|
||||||
|
$rootScope.dynCls = [undefined, null];
|
||||||
|
$rootScope.$digest();
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should ng:class odd/even', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<ul><li ng:repeat="i in [0,1]" class="existing" ng:class-odd="\'odd\'" ng:class-even="\'even\'"></li><ul>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
var e1 = jqLite(element[0].childNodes[1]);
|
||||||
|
var e2 = jqLite(element[0].childNodes[2]);
|
||||||
|
expect(e1.hasClass('existing')).toBeTruthy();
|
||||||
|
expect(e1.hasClass('odd')).toBeTruthy();
|
||||||
|
expect(e2.hasClass('existing')).toBeTruthy();
|
||||||
|
expect(e2.hasClass('even')).toBeTruthy();
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should allow both ng:class and ng:class-odd/even on the same element', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<ul>' +
|
||||||
|
'<li ng:repeat="i in [0,1]" ng:class="\'plainClass\'" ' +
|
||||||
|
'ng:class-odd="\'odd\'" ng:class-even="\'even\'"></li>' +
|
||||||
|
'<ul>')($rootScope);
|
||||||
|
$rootScope.$apply();
|
||||||
|
var e1 = jqLite(element[0].childNodes[1]);
|
||||||
|
var e2 = jqLite(element[0].childNodes[2]);
|
||||||
|
|
||||||
|
expect(e1.hasClass('plainClass')).toBeTruthy();
|
||||||
|
expect(e1.hasClass('odd')).toBeTruthy();
|
||||||
|
expect(e1.hasClass('even')).toBeFalsy();
|
||||||
|
expect(e2.hasClass('plainClass')).toBeTruthy();
|
||||||
|
expect(e2.hasClass('even')).toBeTruthy();
|
||||||
|
expect(e2.hasClass('odd')).toBeFalsy();
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should allow both ng:class and ng:class-odd/even with multiple classes', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<ul>' +
|
||||||
|
'<li ng:repeat="i in [0,1]" ng:class="[\'A\', \'B\']" ' +
|
||||||
|
'ng:class-odd="[\'C\', \'D\']" ng:class-even="[\'E\', \'F\']"></li>' +
|
||||||
|
'<ul>')($rootScope);
|
||||||
|
$rootScope.$apply();
|
||||||
|
var e1 = jqLite(element[0].childNodes[1]);
|
||||||
|
var e2 = jqLite(element[0].childNodes[2]);
|
||||||
|
|
||||||
|
expect(e1.hasClass('A')).toBeTruthy();
|
||||||
|
expect(e1.hasClass('B')).toBeTruthy();
|
||||||
|
expect(e1.hasClass('C')).toBeTruthy();
|
||||||
|
expect(e1.hasClass('D')).toBeTruthy();
|
||||||
|
expect(e1.hasClass('E')).toBeFalsy();
|
||||||
|
expect(e1.hasClass('F')).toBeFalsy();
|
||||||
|
|
||||||
|
expect(e2.hasClass('A')).toBeTruthy();
|
||||||
|
expect(e2.hasClass('B')).toBeTruthy();
|
||||||
|
expect(e2.hasClass('E')).toBeTruthy();
|
||||||
|
expect(e2.hasClass('F')).toBeTruthy();
|
||||||
|
expect(e2.hasClass('C')).toBeFalsy();
|
||||||
|
expect(e2.hasClass('D')).toBeFalsy();
|
||||||
|
}));
|
||||||
|
});
|
||||||
26
test/directive/ngClickSpec.js
Normal file
26
test/directive/ngClickSpec.js
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('ng:click', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
afterEach(function() {
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should get called on a click', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div ng:click="clicked = true"></div>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect($rootScope.clicked).toBeFalsy();
|
||||||
|
|
||||||
|
browserTrigger(element, 'click');
|
||||||
|
expect($rootScope.clicked).toEqual(true);
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should pass event object', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div ng:click="event = $event"></div>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
browserTrigger(element, 'click');
|
||||||
|
expect($rootScope.event).toBeDefined();
|
||||||
|
}));
|
||||||
|
});
|
||||||
49
test/directive/ngCloakSpec.js
Normal file
49
test/directive/ngCloakSpec.js
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('ng:cloak', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
|
||||||
|
afterEach(function() {
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should get removed when an element is compiled', inject(function($rootScope, $compile) {
|
||||||
|
element = jqLite('<div ng:cloak></div>');
|
||||||
|
expect(element.attr('ng:cloak')).toBe('');
|
||||||
|
$compile(element);
|
||||||
|
expect(element.attr('ng:cloak')).toBeUndefined();
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should remove ng-cloak class from a compiled element with attribute', inject(
|
||||||
|
function($rootScope, $compile) {
|
||||||
|
element = jqLite('<div ng:cloak class="foo ng-cloak bar"></div>');
|
||||||
|
|
||||||
|
expect(element.hasClass('foo')).toBe(true);
|
||||||
|
expect(element.hasClass('ng-cloak')).toBe(true);
|
||||||
|
expect(element.hasClass('bar')).toBe(true);
|
||||||
|
|
||||||
|
$compile(element);
|
||||||
|
|
||||||
|
expect(element.hasClass('foo')).toBe(true);
|
||||||
|
expect(element.hasClass('ng-cloak')).toBe(false);
|
||||||
|
expect(element.hasClass('bar')).toBe(true);
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should remove ng-cloak class from a compiled element', inject(function($rootScope, $compile) {
|
||||||
|
element = jqLite('<div class="foo ng-cloak bar"></div>');
|
||||||
|
|
||||||
|
expect(element.hasClass('foo')).toBe(true);
|
||||||
|
expect(element.hasClass('ng-cloak')).toBe(true);
|
||||||
|
expect(element.hasClass('bar')).toBe(true);
|
||||||
|
|
||||||
|
$compile(element);
|
||||||
|
|
||||||
|
expect(element.hasClass('foo')).toBe(true);
|
||||||
|
expect(element.hasClass('ng-cloak')).toBe(false);
|
||||||
|
expect(element.hasClass('bar')).toBe(true);
|
||||||
|
}));
|
||||||
|
});
|
||||||
65
test/directive/ngControllerSpec.js
Normal file
65
test/directive/ngControllerSpec.js
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('ng:controller', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
beforeEach(inject(function($window) {
|
||||||
|
$window.Greeter = function($scope) {
|
||||||
|
// private stuff (not exported to scope)
|
||||||
|
this.prefix = 'Hello ';
|
||||||
|
|
||||||
|
// public stuff (exported to scope)
|
||||||
|
var ctrl = this;
|
||||||
|
$scope.name = 'Misko';
|
||||||
|
$scope.greet = function(name) {
|
||||||
|
return ctrl.prefix + name + ctrl.suffix;
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.protoGreet = bind(this, this.protoGreet);
|
||||||
|
};
|
||||||
|
$window.Greeter.prototype = {
|
||||||
|
suffix: '!',
|
||||||
|
protoGreet: function(name) {
|
||||||
|
return this.prefix + name + this.suffix;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$window.Child = function($scope) {
|
||||||
|
$scope.name = 'Adam';
|
||||||
|
};
|
||||||
|
}));
|
||||||
|
|
||||||
|
afterEach(function() {
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should instantiate controller and bind methods', inject(function($compile, $rootScope) {
|
||||||
|
element = $compile('<div ng:controller="Greeter">{{greet(name)}}</div>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('Hello Misko!');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should allow nested controllers', inject(function($compile, $rootScope) {
|
||||||
|
element = $compile('<div ng:controller="Greeter"><div ng:controller="Child">{{greet(name)}}</div></div>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('Hello Adam!');
|
||||||
|
dealoc(element);
|
||||||
|
|
||||||
|
element = $compile('<div ng:controller="Greeter"><div ng:controller="Child">{{protoGreet(name)}}</div></div>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('Hello Adam!');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should instantiate controller defined on scope', inject(function($compile, $rootScope) {
|
||||||
|
$rootScope.Greeter = function($scope) {
|
||||||
|
$scope.name = 'Vojta';
|
||||||
|
};
|
||||||
|
|
||||||
|
element = $compile('<div ng:controller="Greeter">{{name}}</div>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('Vojta');
|
||||||
|
}));
|
||||||
|
});
|
||||||
25
test/directive/ngEventDirsSpec.js
Normal file
25
test/directive/ngEventDirsSpec.js
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('event directives', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
|
||||||
|
afterEach(function() {
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
describe('ng:submit', function() {
|
||||||
|
|
||||||
|
it('should get called on form submit', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<form action="" ng:submit="submitted = true">' +
|
||||||
|
'<input type="submit"/>' +
|
||||||
|
'</form>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect($rootScope.submitted).not.toBeDefined();
|
||||||
|
|
||||||
|
browserTrigger(element.children()[0]);
|
||||||
|
expect($rootScope.submitted).toEqual(true);
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
});
|
||||||
274
test/directive/ngIncludeSpec.js
Normal file
274
test/directive/ngIncludeSpec.js
Normal file
|
|
@ -0,0 +1,274 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('ng:include', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
|
||||||
|
afterEach(function(){
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function putIntoCache(url, content) {
|
||||||
|
return function($templateCache) {
|
||||||
|
$templateCache.put(url, [200, content, {}]);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
it('should include on external file', inject(putIntoCache('myUrl', '{{name}}'),
|
||||||
|
function($rootScope, $compile, $browser) {
|
||||||
|
element = jqLite('<ng:include src="url" scope="childScope"></ng:include>');
|
||||||
|
element = $compile(element)($rootScope);
|
||||||
|
$rootScope.childScope = $rootScope.$new();
|
||||||
|
$rootScope.childScope.name = 'misko';
|
||||||
|
$rootScope.url = 'myUrl';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('misko');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should remove previously included text if a falsy value is bound to src', inject(
|
||||||
|
putIntoCache('myUrl', '{{name}}'),
|
||||||
|
function($rootScope, $compile, $browser) {
|
||||||
|
element = jqLite('<ng:include src="url" scope="childScope"></ng:include>');
|
||||||
|
element = $compile(element)($rootScope);
|
||||||
|
$rootScope.childScope = $rootScope.$new();
|
||||||
|
$rootScope.childScope.name = 'igor';
|
||||||
|
$rootScope.url = 'myUrl';
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(element.text()).toEqual('igor');
|
||||||
|
|
||||||
|
$rootScope.url = undefined;
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(element.text()).toEqual('');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should allow this for scope', inject(putIntoCache('myUrl', '{{"abc"}}'),
|
||||||
|
function($rootScope, $compile, $browser) {
|
||||||
|
element = jqLite('<ng:include src="url" scope="this"></ng:include>');
|
||||||
|
element = $compile(element)($rootScope);
|
||||||
|
$rootScope.url = 'myUrl';
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
// TODO(misko): because we are using scope==this, the eval gets registered
|
||||||
|
// during the flush phase and hence does not get called.
|
||||||
|
// I don't think passing 'this' makes sense. Does having scope on ng:include makes sense?
|
||||||
|
// should we make scope="this" illegal?
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(element.text()).toEqual('abc');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should fire $contentLoaded event after linking the content', inject(
|
||||||
|
function($rootScope, $compile, $templateCache) {
|
||||||
|
var contentLoadedSpy = jasmine.createSpy('content loaded').andCallFake(function() {
|
||||||
|
expect(element.text()).toBe('partial content');
|
||||||
|
});
|
||||||
|
|
||||||
|
$templateCache.put('url', [200, 'partial content', {}]);
|
||||||
|
$rootScope.$on('$contentLoaded', contentLoadedSpy);
|
||||||
|
|
||||||
|
element = $compile('<ng:include src="\'url\'"></ng:include>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(contentLoadedSpy).toHaveBeenCalledOnce();
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should evaluate onload expression when a partial is loaded', inject(
|
||||||
|
putIntoCache('myUrl', 'my partial'),
|
||||||
|
function($rootScope, $compile, $browser) {
|
||||||
|
element = jqLite('<ng:include src="url" onload="loaded = true"></ng:include>');
|
||||||
|
element = $compile(element)($rootScope);
|
||||||
|
|
||||||
|
expect($rootScope.loaded).not.toBeDefined();
|
||||||
|
|
||||||
|
$rootScope.url = 'myUrl';
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(element.text()).toEqual('my partial');
|
||||||
|
expect($rootScope.loaded).toBe(true);
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should destroy old scope', inject(putIntoCache('myUrl', 'my partial'),
|
||||||
|
function($rootScope, $compile, $browser) {
|
||||||
|
element = jqLite('<ng:include src="url"></ng:include>');
|
||||||
|
element = $compile(element)($rootScope);
|
||||||
|
|
||||||
|
expect($rootScope.$$childHead).toBeFalsy();
|
||||||
|
|
||||||
|
$rootScope.url = 'myUrl';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect($rootScope.$$childHead).toBeTruthy();
|
||||||
|
|
||||||
|
$rootScope.url = null;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect($rootScope.$$childHead).toBeFalsy();
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should do xhr request and cache it',
|
||||||
|
inject(function($rootScope, $httpBackend, $compile, $browser) {
|
||||||
|
element = $compile('<ng:include src="url"></ng:include>')($rootScope);
|
||||||
|
$httpBackend.expect('GET', 'myUrl').respond('my partial');
|
||||||
|
|
||||||
|
$rootScope.url = 'myUrl';
|
||||||
|
$rootScope.$digest();
|
||||||
|
$httpBackend.flush();
|
||||||
|
expect(element.text()).toEqual('my partial');
|
||||||
|
|
||||||
|
$rootScope.url = null;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('');
|
||||||
|
|
||||||
|
$rootScope.url = 'myUrl';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('my partial');
|
||||||
|
dealoc($rootScope);
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should clear content when error during xhr request',
|
||||||
|
inject(function($httpBackend, $compile, $rootScope) {
|
||||||
|
element = $compile('<ng:include src="url">content</ng:include>')($rootScope);
|
||||||
|
$httpBackend.expect('GET', 'myUrl').respond(404, '');
|
||||||
|
|
||||||
|
$rootScope.url = 'myUrl';
|
||||||
|
$rootScope.$digest();
|
||||||
|
$httpBackend.flush();
|
||||||
|
|
||||||
|
expect(element.text()).toBe('');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should be async even if served from cache', inject(
|
||||||
|
putIntoCache('myUrl', 'my partial'),
|
||||||
|
function($rootScope, $compile, $browser) {
|
||||||
|
element = $compile('<ng:include src="url"></ng:include>')($rootScope);
|
||||||
|
|
||||||
|
$rootScope.url = 'myUrl';
|
||||||
|
|
||||||
|
var called = 0;
|
||||||
|
// we want to assert only during first watch
|
||||||
|
$rootScope.$watch(function() {
|
||||||
|
if (!called++) expect(element.text()).toBe('');
|
||||||
|
});
|
||||||
|
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('my partial');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should discard pending xhr callbacks if a new template is requested before the current ' +
|
||||||
|
'finished loading', inject(function($rootScope, $compile, $httpBackend) {
|
||||||
|
element = jqLite("<ng:include src='templateUrl'></ng:include>");
|
||||||
|
var log = [];
|
||||||
|
|
||||||
|
$rootScope.templateUrl = 'myUrl1';
|
||||||
|
$rootScope.logger = function(msg) {
|
||||||
|
log.push(msg);
|
||||||
|
}
|
||||||
|
$compile(element)($rootScope);
|
||||||
|
expect(log.join('; ')).toEqual('');
|
||||||
|
|
||||||
|
$httpBackend.expect('GET', 'myUrl1').respond('<div>{{logger("url1")}}</div>');
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(log.join('; ')).toEqual('');
|
||||||
|
$rootScope.templateUrl = 'myUrl2';
|
||||||
|
$httpBackend.expect('GET', 'myUrl2').respond('<div>{{logger("url2")}}</div>');
|
||||||
|
$rootScope.$digest();
|
||||||
|
$httpBackend.flush(); // now that we have two requests pending, flush!
|
||||||
|
|
||||||
|
expect(log.join('; ')).toEqual('url2; url2'); // it's here twice because we go through at
|
||||||
|
// least two digest cycles
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should compile only the content', inject(function($compile, $rootScope, $templateCache) {
|
||||||
|
// regression
|
||||||
|
|
||||||
|
var onload = jasmine.createSpy('$contentLoaded');
|
||||||
|
$rootScope.$on('$contentLoaded', onload);
|
||||||
|
$templateCache.put('tpl.html', [200, 'partial {{tpl}}', {}]);
|
||||||
|
|
||||||
|
element = $compile('<div><div ng:repeat="i in [1]">' +
|
||||||
|
'<ng:include src="tpl"></ng:include></div></div>')($rootScope);
|
||||||
|
expect(onload).not.toHaveBeenCalled();
|
||||||
|
|
||||||
|
$rootScope.$apply(function() {
|
||||||
|
$rootScope.tpl = 'tpl.html';
|
||||||
|
});
|
||||||
|
expect(onload).toHaveBeenCalledOnce();
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
describe('autoscoll', function() {
|
||||||
|
var autoScrollSpy;
|
||||||
|
|
||||||
|
function spyOnAnchorScroll() {
|
||||||
|
return function($provide) {
|
||||||
|
autoScrollSpy = jasmine.createSpy('$anchorScroll');
|
||||||
|
$provide.value('$anchorScroll', autoScrollSpy);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function compileAndLink(tpl) {
|
||||||
|
return function($compile, $rootScope) {
|
||||||
|
element = $compile(tpl)($rootScope);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeTplAndValueTo(template, value) {
|
||||||
|
return function($rootScope, $browser) {
|
||||||
|
$rootScope.$apply(function() {
|
||||||
|
$rootScope.tpl = template;
|
||||||
|
$rootScope.value = value;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
beforeEach(module(spyOnAnchorScroll()));
|
||||||
|
beforeEach(inject(
|
||||||
|
putIntoCache('template.html', 'CONTENT'),
|
||||||
|
putIntoCache('another.html', 'CONTENT')));
|
||||||
|
|
||||||
|
|
||||||
|
it('should call $anchorScroll if autoscroll attribute is present', inject(
|
||||||
|
compileAndLink('<ng:include src="tpl" autoscroll></ng:include>'),
|
||||||
|
changeTplAndValueTo('template.html'), function() {
|
||||||
|
expect(autoScrollSpy).toHaveBeenCalledOnce();
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should call $anchorScroll if autoscroll evaluates to true', inject(
|
||||||
|
compileAndLink('<ng:include src="tpl" autoscroll="value"></ng:include>'),
|
||||||
|
changeTplAndValueTo('template.html', true),
|
||||||
|
changeTplAndValueTo('another.html', 'some-string'),
|
||||||
|
changeTplAndValueTo('template.html', 100), function() {
|
||||||
|
expect(autoScrollSpy).toHaveBeenCalled();
|
||||||
|
expect(autoScrollSpy.callCount).toBe(3);
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should not call $anchorScroll if autoscroll attribute is not present', inject(
|
||||||
|
compileAndLink('<ng:include src="tpl"></ng:include>'),
|
||||||
|
changeTplAndValueTo('template.html'), function() {
|
||||||
|
expect(autoScrollSpy).not.toHaveBeenCalled();
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should not call $anchorScroll if autoscroll evaluates to false', inject(
|
||||||
|
compileAndLink('<ng:include src="tpl" autoscroll="value"></ng:include>'),
|
||||||
|
changeTplAndValueTo('template.html', false),
|
||||||
|
changeTplAndValueTo('template.html', undefined),
|
||||||
|
changeTplAndValueTo('template.html', null), function() {
|
||||||
|
expect(autoScrollSpy).not.toHaveBeenCalled();
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
});
|
||||||
16
test/directive/ngInitSpec.js
Normal file
16
test/directive/ngInitSpec.js
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('ng:init', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
|
||||||
|
afterEach(function() {
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it("should ng:init", inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div ng:init="a=123"></div>')($rootScope);
|
||||||
|
expect($rootScope.a).toEqual(123);
|
||||||
|
}));
|
||||||
|
});
|
||||||
20
test/directive/ngNonBindableSpec.js
Normal file
20
test/directive/ngNonBindableSpec.js
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
|
||||||
|
describe('ng:non-bindable', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
|
||||||
|
afterEach(function(){
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should prevent compilation of the owning element and its children',
|
||||||
|
inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div ng:non-bindable><span ng:bind="name"></span></div>')($rootScope);
|
||||||
|
$rootScope.name = 'misko';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('');
|
||||||
|
}));
|
||||||
|
});
|
||||||
136
test/directive/ngPluralizeSpec.js
Normal file
136
test/directive/ngPluralizeSpec.js
Normal file
|
|
@ -0,0 +1,136 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('ng:pluralize', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
|
||||||
|
afterEach(function(){
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
describe('deal with pluralized strings without offset', function() {
|
||||||
|
beforeEach(inject(function($rootScope, $compile) {
|
||||||
|
element = $compile(
|
||||||
|
'<ng:pluralize count="email"' +
|
||||||
|
"when=\"{'0': 'You have no new email'," +
|
||||||
|
"'one': 'You have one new email'," +
|
||||||
|
"'other': 'You have {} new emails'}\">" +
|
||||||
|
'</ng:pluralize>')($rootScope);
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should show single/plural strings', inject(function($rootScope) {
|
||||||
|
$rootScope.email = 0;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('You have no new email');
|
||||||
|
|
||||||
|
$rootScope.email = '0';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('You have no new email');
|
||||||
|
|
||||||
|
$rootScope.email = 1;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('You have one new email');
|
||||||
|
|
||||||
|
$rootScope.email = 0.01;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('You have 0.01 new emails');
|
||||||
|
|
||||||
|
$rootScope.email = '0.1';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('You have 0.1 new emails');
|
||||||
|
|
||||||
|
$rootScope.email = 2;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('You have 2 new emails');
|
||||||
|
|
||||||
|
$rootScope.email = -0.1;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('You have -0.1 new emails');
|
||||||
|
|
||||||
|
$rootScope.email = '-0.01';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('You have -0.01 new emails');
|
||||||
|
|
||||||
|
$rootScope.email = -2;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('You have -2 new emails');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should show single/plural strings with mal-formed inputs', inject(function($rootScope) {
|
||||||
|
$rootScope.email = '';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('');
|
||||||
|
|
||||||
|
$rootScope.email = null;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('');
|
||||||
|
|
||||||
|
$rootScope.email = undefined;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('');
|
||||||
|
|
||||||
|
$rootScope.email = 'a3';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('');
|
||||||
|
|
||||||
|
$rootScope.email = '011';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('You have 11 new emails');
|
||||||
|
|
||||||
|
$rootScope.email = '-011';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('You have -11 new emails');
|
||||||
|
|
||||||
|
$rootScope.email = '1fff';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('You have one new email');
|
||||||
|
|
||||||
|
$rootScope.email = '0aa22';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('You have no new email');
|
||||||
|
|
||||||
|
$rootScope.email = '000001';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('You have one new email');
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
describe('deal with pluralized strings with offset', function() {
|
||||||
|
it('should show single/plural strings with offset', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile(
|
||||||
|
"<ng:pluralize count=\"viewCount\" offset=2 " +
|
||||||
|
"when=\"{'0': 'Nobody is viewing.'," +
|
||||||
|
"'1': '{{p1}} is viewing.'," +
|
||||||
|
"'2': '{{p1}} and {{p2}} are viewing.'," +
|
||||||
|
"'one': '{{p1}}, {{p2}} and one other person are viewing.'," +
|
||||||
|
"'other': '{{p1}}, {{p2}} and {} other people are viewing.'}\">" +
|
||||||
|
"</ng:pluralize>")($rootScope);
|
||||||
|
$rootScope.p1 = 'Igor';
|
||||||
|
$rootScope.p2 = 'Misko';
|
||||||
|
|
||||||
|
$rootScope.viewCount = 0;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('Nobody is viewing.');
|
||||||
|
|
||||||
|
$rootScope.viewCount = 1;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('Igor is viewing.');
|
||||||
|
|
||||||
|
$rootScope.viewCount = 2;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('Igor and Misko are viewing.');
|
||||||
|
|
||||||
|
$rootScope.viewCount = 3;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('Igor, Misko and one other person are viewing.');
|
||||||
|
|
||||||
|
$rootScope.viewCount = 4;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('Igor, Misko and 2 other people are viewing.');
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
});
|
||||||
282
test/directive/ngRepeatSpec.js
Normal file
282
test/directive/ngRepeatSpec.js
Normal file
|
|
@ -0,0 +1,282 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('ng:repeat', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
|
||||||
|
afterEach(function(){
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should ng:repeat over array', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile(
|
||||||
|
'<ul>' +
|
||||||
|
'<li ng:repeat="item in items" ng:init="suffix = \';\'" ng:bind="item + suffix"></li>' +
|
||||||
|
'</ul>')($rootScope);
|
||||||
|
|
||||||
|
Array.prototype.extraProperty = "should be ignored";
|
||||||
|
// INIT
|
||||||
|
$rootScope.items = ['misko', 'shyam'];
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.find('li').length).toEqual(2);
|
||||||
|
expect(element.text()).toEqual('misko;shyam;');
|
||||||
|
delete Array.prototype.extraProperty;
|
||||||
|
|
||||||
|
// GROW
|
||||||
|
$rootScope.items = ['adam', 'kai', 'brad'];
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.find('li').length).toEqual(3);
|
||||||
|
expect(element.text()).toEqual('adam;kai;brad;');
|
||||||
|
|
||||||
|
// SHRINK
|
||||||
|
$rootScope.items = ['brad'];
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.find('li').length).toEqual(1);
|
||||||
|
expect(element.text()).toEqual('brad;');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should ng:repeat over object', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile(
|
||||||
|
'<ul>' +
|
||||||
|
'<li ng:repeat="(key, value) in items" ng:bind="key + \':\' + value + \';\' "></li>' +
|
||||||
|
'</ul>')($rootScope);
|
||||||
|
$rootScope.items = {misko:'swe', shyam:'set'};
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('misko:swe;shyam:set;');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should not ng:repeat over parent properties', inject(function($rootScope, $compile) {
|
||||||
|
var Class = function() {};
|
||||||
|
Class.prototype.abc = function() {};
|
||||||
|
Class.prototype.value = 'abc';
|
||||||
|
|
||||||
|
element = $compile(
|
||||||
|
'<ul>' +
|
||||||
|
'<li ng:repeat="(key, value) in items" ng:bind="key + \':\' + value + \';\' "></li>' +
|
||||||
|
'</ul>')($rootScope);
|
||||||
|
$rootScope.items = new Class();
|
||||||
|
$rootScope.items.name = 'value';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('name:value;');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should error on wrong parsing of ng:repeat', inject(function($rootScope, $compile, $log) {
|
||||||
|
expect(function() {
|
||||||
|
element = $compile('<ul><li ng:repeat="i dont parse"></li></ul>')($rootScope);
|
||||||
|
}).toThrow("Expected ng:repeat in form of '_item_ in _collection_' but got 'i dont parse'.");
|
||||||
|
|
||||||
|
$log.error.logs.shift();
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should expose iterator offset as $index when iterating over arrays',
|
||||||
|
inject(function($rootScope, $compile) {
|
||||||
|
element = $compile(
|
||||||
|
'<ul>' +
|
||||||
|
'<li ng:repeat="item in items" ng:bind="item + $index + \'|\'"></li>' +
|
||||||
|
'</ul>')($rootScope);
|
||||||
|
$rootScope.items = ['misko', 'shyam', 'frodo'];
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('misko0|shyam1|frodo2|');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should expose iterator offset as $index when iterating over objects',
|
||||||
|
inject(function($rootScope, $compile) {
|
||||||
|
element = $compile(
|
||||||
|
'<ul>' +
|
||||||
|
'<li ng:repeat="(key, val) in items" ng:bind="key + \':\' + val + $index + \'|\'"></li>' +
|
||||||
|
'</ul>')($rootScope);
|
||||||
|
$rootScope.items = {'misko':'m', 'shyam':'s', 'frodo':'f'};
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('frodo:f0|misko:m1|shyam:s2|');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should expose iterator position as $position when iterating over arrays',
|
||||||
|
inject(function($rootScope, $compile) {
|
||||||
|
element = $compile(
|
||||||
|
'<ul>' +
|
||||||
|
'<li ng:repeat="item in items" ng:bind="item + \':\' + $position + \'|\'"></li>' +
|
||||||
|
'</ul>')($rootScope);
|
||||||
|
$rootScope.items = ['misko', 'shyam', 'doug'];
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('misko:first|shyam:middle|doug:last|');
|
||||||
|
|
||||||
|
$rootScope.items.push('frodo');
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('misko:first|shyam:middle|doug:middle|frodo:last|');
|
||||||
|
|
||||||
|
$rootScope.items.pop();
|
||||||
|
$rootScope.items.pop();
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('misko:first|shyam:last|');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should expose iterator position as $position when iterating over objects',
|
||||||
|
inject(function($rootScope, $compile) {
|
||||||
|
element = $compile(
|
||||||
|
'<ul>' +
|
||||||
|
'<li ng:repeat="(key, val) in items" ng:bind="key + \':\' + val + \':\' + $position + \'|\'">' +
|
||||||
|
'</li>' +
|
||||||
|
'</ul>')($rootScope);
|
||||||
|
$rootScope.items = {'misko':'m', 'shyam':'s', 'doug':'d', 'frodo':'f'};
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('doug:d:first|frodo:f:middle|misko:m:middle|shyam:s:last|');
|
||||||
|
|
||||||
|
delete $rootScope.items.doug;
|
||||||
|
delete $rootScope.items.frodo;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('misko:m:first|shyam:s:last|');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should ignore $ and $$ properties', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<ul><li ng:repeat="i in items">{{i}}|</li></ul>')($rootScope);
|
||||||
|
$rootScope.items = ['a', 'b', 'c'];
|
||||||
|
$rootScope.items.$$hashkey = 'xxx';
|
||||||
|
$rootScope.items.$root = 'yyy';
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(element.text()).toEqual('a|b|c|');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should repeat over nested arrays', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile(
|
||||||
|
'<ul>' +
|
||||||
|
'<li ng:repeat="subgroup in groups">' +
|
||||||
|
'<div ng:repeat="group in subgroup">{{group}}|</div>X' +
|
||||||
|
'</li>' +
|
||||||
|
'</ul>')($rootScope);
|
||||||
|
$rootScope.groups = [['a', 'b'], ['c','d']];
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(element.text()).toEqual('a|b|Xc|d|X');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should ignore non-array element properties when iterating over an array',
|
||||||
|
inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<ul><li ng:repeat="item in array">{{item}}|</li></ul>')($rootScope);
|
||||||
|
$rootScope.array = ['a', 'b', 'c'];
|
||||||
|
$rootScope.array.foo = '23';
|
||||||
|
$rootScope.array.bar = function() {};
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(element.text()).toBe('a|b|c|');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should iterate over non-existent elements of a sparse array',
|
||||||
|
inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<ul><li ng:repeat="item in array">{{item}}|</li></ul>')($rootScope);
|
||||||
|
$rootScope.array = ['a', 'b'];
|
||||||
|
$rootScope.array[4] = 'c';
|
||||||
|
$rootScope.array[6] = 'd';
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(element.text()).toBe('a|b|||c||d|');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should iterate over all kinds of types', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<ul><li ng:repeat="item in array">{{item}}|</li></ul>')($rootScope);
|
||||||
|
$rootScope.array = ['a', 1, null, undefined, {}];
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(element.text()).toMatch(/a\|1\|\|\|\{\s*\}\|/);
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
describe('stability', function() {
|
||||||
|
var a, b, c, d, lis;
|
||||||
|
|
||||||
|
beforeEach(inject(function($rootScope, $compile) {
|
||||||
|
element = $compile(
|
||||||
|
'<ul>' +
|
||||||
|
'<li ng:repeat="item in items" ng:bind="key + \':\' + val + \':\' + $position + \'|\'"></li>' +
|
||||||
|
'</ul>')($rootScope);
|
||||||
|
a = {};
|
||||||
|
b = {};
|
||||||
|
c = {};
|
||||||
|
d = {};
|
||||||
|
|
||||||
|
$rootScope.items = [a, b, c];
|
||||||
|
$rootScope.$digest();
|
||||||
|
lis = element.find('li');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should preserve the order of elements', inject(function($rootScope) {
|
||||||
|
$rootScope.items = [a, c, d];
|
||||||
|
$rootScope.$digest();
|
||||||
|
var newElements = element.find('li');
|
||||||
|
expect(newElements[0]).toEqual(lis[0]);
|
||||||
|
expect(newElements[1]).toEqual(lis[2]);
|
||||||
|
expect(newElements[2]).not.toEqual(lis[1]);
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should support duplicates', inject(function($rootScope) {
|
||||||
|
$rootScope.items = [a, a, b, c];
|
||||||
|
$rootScope.$digest();
|
||||||
|
var newElements = element.find('li');
|
||||||
|
expect(newElements[0]).toEqual(lis[0]);
|
||||||
|
expect(newElements[1]).not.toEqual(lis[0]);
|
||||||
|
expect(newElements[2]).toEqual(lis[1]);
|
||||||
|
expect(newElements[3]).toEqual(lis[2]);
|
||||||
|
|
||||||
|
lis = newElements;
|
||||||
|
$rootScope.$digest();
|
||||||
|
newElements = element.find('li');
|
||||||
|
expect(newElements[0]).toEqual(lis[0]);
|
||||||
|
expect(newElements[1]).toEqual(lis[1]);
|
||||||
|
expect(newElements[2]).toEqual(lis[2]);
|
||||||
|
expect(newElements[3]).toEqual(lis[3]);
|
||||||
|
|
||||||
|
$rootScope.$digest();
|
||||||
|
newElements = element.find('li');
|
||||||
|
expect(newElements[0]).toEqual(lis[0]);
|
||||||
|
expect(newElements[1]).toEqual(lis[1]);
|
||||||
|
expect(newElements[2]).toEqual(lis[2]);
|
||||||
|
expect(newElements[3]).toEqual(lis[3]);
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should remove last item when one duplicate instance is removed',
|
||||||
|
inject(function($rootScope) {
|
||||||
|
$rootScope.items = [a, a, a];
|
||||||
|
$rootScope.$digest();
|
||||||
|
lis = element.find('li');
|
||||||
|
|
||||||
|
$rootScope.items = [a, a];
|
||||||
|
$rootScope.$digest();
|
||||||
|
var newElements = element.find('li');
|
||||||
|
expect(newElements.length).toEqual(2);
|
||||||
|
expect(newElements[0]).toEqual(lis[0]);
|
||||||
|
expect(newElements[1]).toEqual(lis[1]);
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should reverse items when the collection is reversed',
|
||||||
|
inject(function($rootScope) {
|
||||||
|
$rootScope.items = [a, b, c];
|
||||||
|
$rootScope.$digest();
|
||||||
|
lis = element.find('li');
|
||||||
|
|
||||||
|
$rootScope.items = [c, b, a];
|
||||||
|
$rootScope.$digest();
|
||||||
|
var newElements = element.find('li');
|
||||||
|
expect(newElements.length).toEqual(3);
|
||||||
|
expect(newElements[0]).toEqual(lis[2]);
|
||||||
|
expect(newElements[1]).toEqual(lis[1]);
|
||||||
|
expect(newElements[2]).toEqual(lis[0]);
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
});
|
||||||
43
test/directive/ngShowHideSpec.js
Normal file
43
test/directive/ngShowHideSpec.js
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('ng:show / ng:hide', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
|
||||||
|
afterEach(function() {
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('ng:show', function() {
|
||||||
|
it('should show and hide an element', inject(function($rootScope, $compile) {
|
||||||
|
element = jqLite('<div ng:show="exp"></div>');
|
||||||
|
element = $compile(element)($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(isCssVisible(element)).toEqual(false);
|
||||||
|
$rootScope.exp = true;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(isCssVisible(element)).toEqual(true);
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should make hidden element visible', inject(function($rootScope, $compile) {
|
||||||
|
element = jqLite('<div style="display: none" ng:show="exp"></div>');
|
||||||
|
element = $compile(element)($rootScope);
|
||||||
|
expect(isCssVisible(element)).toBe(false);
|
||||||
|
$rootScope.exp = true;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(isCssVisible(element)).toBe(true);
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('ng:hide', function() {
|
||||||
|
it('should hide an element', inject(function($rootScope, $compile) {
|
||||||
|
element = jqLite('<div ng:hide="exp"></div>');
|
||||||
|
element = $compile(element)($rootScope);
|
||||||
|
expect(isCssVisible(element)).toBe(true);
|
||||||
|
$rootScope.exp = true;
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(isCssVisible(element)).toBe(false);
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
});
|
||||||
88
test/directive/ngStyleSpec.js
Normal file
88
test/directive/ngStyleSpec.js
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('ng:style', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
|
||||||
|
afterEach(function() {
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should set', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div ng:style="{height: \'40px\'}"></div>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.css('height')).toEqual('40px');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should silently ignore undefined style', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<div ng:style="myStyle"></div>')($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.hasClass('ng-exception')).toBeFalsy();
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
describe('preserving styles set before and after compilation', function() {
|
||||||
|
var scope, preCompStyle, preCompVal, postCompStyle, postCompVal, element;
|
||||||
|
|
||||||
|
beforeEach(inject(function($rootScope, $compile) {
|
||||||
|
preCompStyle = 'width';
|
||||||
|
preCompVal = '300px';
|
||||||
|
postCompStyle = 'height';
|
||||||
|
postCompVal = '100px';
|
||||||
|
element = jqLite('<div ng:style="styleObj"></div>');
|
||||||
|
element.css(preCompStyle, preCompVal);
|
||||||
|
jqLite(document.body).append(element);
|
||||||
|
$compile(element)($rootScope);
|
||||||
|
scope = $rootScope;
|
||||||
|
scope.styleObj = {'margin-top': '44px'};
|
||||||
|
scope.$apply();
|
||||||
|
element.css(postCompStyle, postCompVal);
|
||||||
|
}));
|
||||||
|
|
||||||
|
afterEach(function() {
|
||||||
|
element.remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should not mess up stuff after compilation', function() {
|
||||||
|
element.css('margin', '44px');
|
||||||
|
expect(element.css(preCompStyle)).toBe(preCompVal);
|
||||||
|
expect(element.css('margin-top')).toBe('44px');
|
||||||
|
expect(element.css(postCompStyle)).toBe(postCompVal);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should not mess up stuff after $apply with no model changes', function() {
|
||||||
|
element.css('padding-top', '33px');
|
||||||
|
scope.$apply();
|
||||||
|
expect(element.css(preCompStyle)).toBe(preCompVal);
|
||||||
|
expect(element.css('margin-top')).toBe('44px');
|
||||||
|
expect(element.css(postCompStyle)).toBe(postCompVal);
|
||||||
|
expect(element.css('padding-top')).toBe('33px');
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should not mess up stuff after $apply with non-colliding model changes', function() {
|
||||||
|
scope.styleObj = {'padding-top': '99px'};
|
||||||
|
scope.$apply();
|
||||||
|
expect(element.css(preCompStyle)).toBe(preCompVal);
|
||||||
|
expect(element.css('margin-top')).not.toBe('44px');
|
||||||
|
expect(element.css('padding-top')).toBe('99px');
|
||||||
|
expect(element.css(postCompStyle)).toBe(postCompVal);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should overwrite original styles after a colliding model change', function() {
|
||||||
|
scope.styleObj = {'height': '99px', 'width': '88px'};
|
||||||
|
scope.$apply();
|
||||||
|
expect(element.css(preCompStyle)).toBe('88px');
|
||||||
|
expect(element.css(postCompStyle)).toBe('99px');
|
||||||
|
scope.styleObj = {};
|
||||||
|
scope.$apply();
|
||||||
|
expect(element.css(preCompStyle)).not.toBe('88px');
|
||||||
|
expect(element.css(postCompStyle)).not.toBe('99px');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
63
test/directive/ngSwitchSpec.js
Normal file
63
test/directive/ngSwitchSpec.js
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('ng:switch', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
|
||||||
|
afterEach(function(){
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should switch on value change', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile(
|
||||||
|
'<div ng-switch="select">' +
|
||||||
|
'<div ng:switch-when="1">first:{{name}}</div>' +
|
||||||
|
'<div ng:switch-when="2">second:{{name}}</div>' +
|
||||||
|
'<div ng:switch-when="true">true:{{name}}</div>' +
|
||||||
|
'</div>')($rootScope);
|
||||||
|
expect(element.html()).toEqual(
|
||||||
|
'<!-- ngSwitchWhen: 1 --><!-- ngSwitchWhen: 2 --><!-- ngSwitchWhen: true -->');
|
||||||
|
$rootScope.select = 1;
|
||||||
|
$rootScope.$apply();
|
||||||
|
expect(element.text()).toEqual('first:');
|
||||||
|
$rootScope.name="shyam";
|
||||||
|
$rootScope.$apply();
|
||||||
|
expect(element.text()).toEqual('first:shyam');
|
||||||
|
$rootScope.select = 2;
|
||||||
|
$rootScope.$apply();
|
||||||
|
expect(element.text()).toEqual('second:shyam');
|
||||||
|
$rootScope.name = 'misko';
|
||||||
|
$rootScope.$apply();
|
||||||
|
expect(element.text()).toEqual('second:misko');
|
||||||
|
$rootScope.select = true;
|
||||||
|
$rootScope.$apply();
|
||||||
|
expect(element.text()).toEqual('true:misko');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should switch on switch-when-default', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile(
|
||||||
|
'<ng:switch on="select">' +
|
||||||
|
'<div ng:switch-when="1">one</div>' +
|
||||||
|
'<div ng:switch-default>other</div>' +
|
||||||
|
'</ng:switch>')($rootScope);
|
||||||
|
$rootScope.$apply();
|
||||||
|
expect(element.text()).toEqual('other');
|
||||||
|
$rootScope.select = 1;
|
||||||
|
$rootScope.$apply();
|
||||||
|
expect(element.text()).toEqual('one');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should call change on switch', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile(
|
||||||
|
'<ng:switch on="url" change="name=\'works\'">' +
|
||||||
|
'<div ng:switch-when="a">{{name}}</div>' +
|
||||||
|
'</ng:switch>')($rootScope);
|
||||||
|
$rootScope.url = 'a';
|
||||||
|
$rootScope.$apply();
|
||||||
|
expect($rootScope.name).toEqual('works');
|
||||||
|
expect(element.text()).toEqual('works');
|
||||||
|
}));
|
||||||
|
});
|
||||||
413
test/directive/ngViewSpec.js
Normal file
413
test/directive/ngViewSpec.js
Normal file
|
|
@ -0,0 +1,413 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('ng:view', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
beforeEach(module(function() {
|
||||||
|
return function($rootScope, $compile) {
|
||||||
|
element = $compile('<ng:view onload="load()"></ng:view>')($rootScope);
|
||||||
|
};
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
afterEach(function(){
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should do nothing when no routes are defined',
|
||||||
|
inject(function($rootScope, $compile, $location) {
|
||||||
|
$location.path('/unknown');
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should instantiate controller after compiling the content', function() {
|
||||||
|
var log = [], controllerScope,
|
||||||
|
Ctrl = function($scope) {
|
||||||
|
controllerScope = $scope;
|
||||||
|
log.push('ctrl-init');
|
||||||
|
};
|
||||||
|
|
||||||
|
module(function($compileProvider, $routeProvider) {
|
||||||
|
$compileProvider.directive('compileLog', function() {
|
||||||
|
return {
|
||||||
|
compile: function() {
|
||||||
|
log.push('compile');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
$routeProvider.when('/some', {template: '/tpl.html', controller: Ctrl});
|
||||||
|
});
|
||||||
|
|
||||||
|
inject(function($route, $rootScope, $templateCache, $location) {
|
||||||
|
$templateCache.put('/tpl.html', [200, '<div compile-log>partial</div>', {}]);
|
||||||
|
$location.path('/some');
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(controllerScope.$parent).toBe($rootScope);
|
||||||
|
expect(controllerScope).toBe($route.current.scope);
|
||||||
|
expect(log).toEqual(['compile', 'ctrl-init']);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should load content via xhr when route changes', function() {
|
||||||
|
module(function($routeProvider) {
|
||||||
|
$routeProvider.when('/foo', {template: 'myUrl1'});
|
||||||
|
$routeProvider.when('/bar', {template: 'myUrl2'});
|
||||||
|
});
|
||||||
|
|
||||||
|
inject(function($rootScope, $compile, $httpBackend, $location, $route) {
|
||||||
|
expect(element.text()).toEqual('');
|
||||||
|
|
||||||
|
$location.path('/foo');
|
||||||
|
$httpBackend.expect('GET', 'myUrl1').respond('<div>{{1+3}}</div>');
|
||||||
|
$rootScope.$digest();
|
||||||
|
$httpBackend.flush();
|
||||||
|
expect(element.text()).toEqual('4');
|
||||||
|
|
||||||
|
$location.path('/bar');
|
||||||
|
$httpBackend.expect('GET', 'myUrl2').respond('angular is da best');
|
||||||
|
$rootScope.$digest();
|
||||||
|
$httpBackend.flush();
|
||||||
|
expect(element.text()).toEqual('angular is da best');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should remove all content when location changes to an unknown route', function() {
|
||||||
|
module(function($routeProvider) {
|
||||||
|
$routeProvider.when('/foo', {template: 'myUrl1'});
|
||||||
|
});
|
||||||
|
|
||||||
|
inject(function($rootScope, $compile, $location, $httpBackend, $route) {
|
||||||
|
$location.path('/foo');
|
||||||
|
$httpBackend.expect('GET', 'myUrl1').respond('<div>{{1+3}}</div>');
|
||||||
|
$rootScope.$digest();
|
||||||
|
$httpBackend.flush();
|
||||||
|
expect(element.text()).toEqual('4');
|
||||||
|
|
||||||
|
$location.path('/unknown');
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should chain scopes and propagate evals to the child scope', function() {
|
||||||
|
module(function($routeProvider) {
|
||||||
|
$routeProvider.when('/foo', {template: 'myUrl1'});
|
||||||
|
});
|
||||||
|
|
||||||
|
inject(function($rootScope, $compile, $location, $httpBackend, $route) {
|
||||||
|
$rootScope.parentVar = 'parent';
|
||||||
|
|
||||||
|
$location.path('/foo');
|
||||||
|
$httpBackend.expect('GET', 'myUrl1').respond('<div>{{parentVar}}</div>');
|
||||||
|
$rootScope.$digest();
|
||||||
|
$httpBackend.flush();
|
||||||
|
expect(element.text()).toEqual('parent');
|
||||||
|
|
||||||
|
$rootScope.parentVar = 'new parent';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toEqual('new parent');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should be possible to nest ng:view in ng:include', inject(function() {
|
||||||
|
// TODO(vojta): refactor this test
|
||||||
|
dealoc(element);
|
||||||
|
var injector = angular.injector(['ng', 'ngMock', function($routeProvider) {
|
||||||
|
$routeProvider.when('/foo', {controller: angular.noop, template: 'viewPartial.html'});
|
||||||
|
}]);
|
||||||
|
var myApp = injector.get('$rootScope');
|
||||||
|
var $httpBackend = injector.get('$httpBackend');
|
||||||
|
$httpBackend.expect('GET', 'includePartial.html').respond('view: <ng:view></ng:view>');
|
||||||
|
injector.get('$location').path('/foo');
|
||||||
|
|
||||||
|
var $route = injector.get('$route');
|
||||||
|
|
||||||
|
element = injector.get('$compile')(
|
||||||
|
'<div>' +
|
||||||
|
'include: <ng:include src="\'includePartial.html\'"> </ng:include>' +
|
||||||
|
'</div>')(myApp);
|
||||||
|
myApp.$apply();
|
||||||
|
|
||||||
|
$httpBackend.expect('GET', 'viewPartial.html').respond('content');
|
||||||
|
$httpBackend.flush();
|
||||||
|
|
||||||
|
expect(element.text()).toEqual('include: view: content');
|
||||||
|
expect($route.current.template).toEqual('viewPartial.html');
|
||||||
|
dealoc(myApp);
|
||||||
|
dealoc(element);
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should initialize view template after the view controller was initialized even when ' +
|
||||||
|
'templates were cached', function() {
|
||||||
|
//this is a test for a regression that was introduced by making the ng:view cache sync
|
||||||
|
function ParentCtrl($scope) {
|
||||||
|
$scope.log.push('parent');
|
||||||
|
}
|
||||||
|
|
||||||
|
module(function($routeProvider) {
|
||||||
|
$routeProvider.when('/foo', {controller: ParentCtrl, template: 'viewPartial.html'});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
inject(function($rootScope, $compile, $location, $httpBackend, $route) {
|
||||||
|
$rootScope.log = [];
|
||||||
|
|
||||||
|
$rootScope.ChildCtrl = function($scope) {
|
||||||
|
$scope.log.push('child');
|
||||||
|
};
|
||||||
|
|
||||||
|
$location.path('/foo');
|
||||||
|
$httpBackend.expect('GET', 'viewPartial.html').
|
||||||
|
respond('<div ng:init="log.push(\'init\')">' +
|
||||||
|
'<div ng:controller="ChildCtrl"></div>' +
|
||||||
|
'</div>');
|
||||||
|
$rootScope.$apply();
|
||||||
|
$httpBackend.flush();
|
||||||
|
|
||||||
|
expect($rootScope.log).toEqual(['parent', 'init', 'child']);
|
||||||
|
|
||||||
|
$location.path('/');
|
||||||
|
$rootScope.$apply();
|
||||||
|
expect($rootScope.log).toEqual(['parent', 'init', 'child']);
|
||||||
|
|
||||||
|
$rootScope.log = [];
|
||||||
|
$location.path('/foo');
|
||||||
|
$rootScope.$apply();
|
||||||
|
|
||||||
|
expect($rootScope.log).toEqual(['parent', 'init', 'child']);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should discard pending xhr callbacks if a new route is requested before the current ' +
|
||||||
|
'finished loading', function() {
|
||||||
|
// this is a test for a bad race condition that affected feedback
|
||||||
|
|
||||||
|
module(function($routeProvider) {
|
||||||
|
$routeProvider.when('/foo', {template: 'myUrl1'});
|
||||||
|
$routeProvider.when('/bar', {template: 'myUrl2'});
|
||||||
|
});
|
||||||
|
|
||||||
|
inject(function($route, $rootScope, $location, $httpBackend) {
|
||||||
|
expect(element.text()).toEqual('');
|
||||||
|
|
||||||
|
$location.path('/foo');
|
||||||
|
$httpBackend.expect('GET', 'myUrl1').respond('<div>{{1+3}}</div>');
|
||||||
|
$rootScope.$digest();
|
||||||
|
$location.path('/bar');
|
||||||
|
$httpBackend.expect('GET', 'myUrl2').respond('<div>{{1+1}}</div>');
|
||||||
|
$rootScope.$digest();
|
||||||
|
$httpBackend.flush(); // now that we have two requests pending, flush!
|
||||||
|
|
||||||
|
expect(element.text()).toEqual('2');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should clear the content when error during xhr request', function() {
|
||||||
|
module(function($routeProvider) {
|
||||||
|
$routeProvider.when('/foo', {controller: noop, template: 'myUrl1'});
|
||||||
|
});
|
||||||
|
|
||||||
|
inject(function($route, $location, $rootScope, $httpBackend) {
|
||||||
|
$location.path('/foo');
|
||||||
|
$httpBackend.expect('GET', 'myUrl1').respond(404, '');
|
||||||
|
element.text('content');
|
||||||
|
|
||||||
|
$rootScope.$digest();
|
||||||
|
$httpBackend.flush();
|
||||||
|
|
||||||
|
expect(element.text()).toBe('');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should be async even if served from cache', function() {
|
||||||
|
module(function($routeProvider) {
|
||||||
|
$routeProvider.when('/foo', {controller: noop, template: 'myUrl1'});
|
||||||
|
});
|
||||||
|
|
||||||
|
inject(function($route, $rootScope, $location, $templateCache) {
|
||||||
|
$templateCache.put('myUrl1', [200, 'my partial', {}]);
|
||||||
|
$location.path('/foo');
|
||||||
|
|
||||||
|
var called = 0;
|
||||||
|
// we want to assert only during first watch
|
||||||
|
$rootScope.$watch(function() {
|
||||||
|
if (!called++) expect(element.text()).toBe('');
|
||||||
|
});
|
||||||
|
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(element.text()).toBe('my partial');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should fire $contentLoaded event when content compiled and linked', function() {
|
||||||
|
var log = [];
|
||||||
|
var logger = function(name) {
|
||||||
|
return function() {
|
||||||
|
log.push(name);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
var Ctrl = function($scope) {
|
||||||
|
$scope.value = 'bound-value';
|
||||||
|
log.push('init-ctrl');
|
||||||
|
};
|
||||||
|
|
||||||
|
module(function($routeProvider) {
|
||||||
|
$routeProvider.when('/foo', {template: 'tpl.html', controller: Ctrl});
|
||||||
|
});
|
||||||
|
|
||||||
|
inject(function($templateCache, $rootScope, $location) {
|
||||||
|
$rootScope.$on('$beforeRouteChange', logger('$beforeRouteChange'));
|
||||||
|
$rootScope.$on('$afterRouteChange', logger('$afterRouteChange'));
|
||||||
|
$rootScope.$on('$contentLoaded', logger('$contentLoaded'));
|
||||||
|
|
||||||
|
$templateCache.put('tpl.html', [200, '{{value}}', {}]);
|
||||||
|
$location.path('/foo');
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(element.text()).toBe('bound-value');
|
||||||
|
expect(log).toEqual(['$beforeRouteChange', '$afterRouteChange', 'init-ctrl',
|
||||||
|
'$contentLoaded']);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should destroy previous scope', function() {
|
||||||
|
module(function($routeProvider) {
|
||||||
|
$routeProvider.when('/foo', {template: 'tpl.html'});
|
||||||
|
});
|
||||||
|
|
||||||
|
inject(function($templateCache, $rootScope, $location) {
|
||||||
|
$templateCache.put('tpl.html', [200, 'partial', {}]);
|
||||||
|
|
||||||
|
expect($rootScope.$$childHead).toBeNull();
|
||||||
|
expect($rootScope.$$childTail).toBeNull();
|
||||||
|
|
||||||
|
$location.path('/foo');
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(element.text()).toBe('partial');
|
||||||
|
expect($rootScope.$$childHead).not.toBeNull();
|
||||||
|
expect($rootScope.$$childTail).not.toBeNull();
|
||||||
|
|
||||||
|
$location.path('/non/existing/route');
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(element.text()).toBe('');
|
||||||
|
expect($rootScope.$$childHead).toBeNull();
|
||||||
|
expect($rootScope.$$childTail).toBeNull();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should destroy previous scope if multiple route changes occur before server responds',
|
||||||
|
function() {
|
||||||
|
var log = [];
|
||||||
|
var createCtrl = function(name) {
|
||||||
|
return function($scope) {
|
||||||
|
log.push('init-' + name);
|
||||||
|
$scope.$on('$destroy', function() {
|
||||||
|
log.push('destroy-' + name);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
module(function($routeProvider) {
|
||||||
|
$routeProvider.when('/one', {template: 'one.html', controller: createCtrl('ctrl1')});
|
||||||
|
$routeProvider.when('/two', {template: 'two.html', controller: createCtrl('ctrl2')});
|
||||||
|
});
|
||||||
|
|
||||||
|
inject(function($httpBackend, $rootScope, $location) {
|
||||||
|
$httpBackend.whenGET('one.html').respond('content 1');
|
||||||
|
$httpBackend.whenGET('two.html').respond('content 2');
|
||||||
|
|
||||||
|
$location.path('/one');
|
||||||
|
$rootScope.$digest();
|
||||||
|
$location.path('/two');
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
$httpBackend.flush();
|
||||||
|
expect(element.text()).toBe('content 2');
|
||||||
|
expect(log).toEqual(['init-ctrl2']);
|
||||||
|
|
||||||
|
$location.path('/non-existing');
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
expect(element.text()).toBe('');
|
||||||
|
expect(log).toEqual(['init-ctrl2', 'destroy-ctrl2']);
|
||||||
|
|
||||||
|
expect($rootScope.$$childHead).toBeNull();
|
||||||
|
expect($rootScope.$$childTail).toBeNull();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should $destroy scope after update and reload', function() {
|
||||||
|
// this is a regression of bug, where $route doesn't copy scope when only updating
|
||||||
|
|
||||||
|
var log = [];
|
||||||
|
|
||||||
|
function logger(msg) {
|
||||||
|
return function() {
|
||||||
|
log.push(msg);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function createController(name) {
|
||||||
|
return function($scope) {
|
||||||
|
log.push('init-' + name);
|
||||||
|
$scope.$on('$destroy', logger('destroy-' + name));
|
||||||
|
$scope.$on('$routeUpdate', logger('route-update'));
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module(function($routeProvider) {
|
||||||
|
$routeProvider.when('/bar', {template: 'tpl.html', controller: createController('bar')});
|
||||||
|
$routeProvider.when('/foo', {
|
||||||
|
template: 'tpl.html', controller: createController('foo'), reloadOnSearch: false});
|
||||||
|
});
|
||||||
|
|
||||||
|
inject(function($templateCache, $location, $rootScope) {
|
||||||
|
$templateCache.put('tpl.html', [200, 'partial', {}]);
|
||||||
|
|
||||||
|
$location.url('/foo');
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(log).toEqual(['init-foo']);
|
||||||
|
|
||||||
|
$location.search({q: 'some'});
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(log).toEqual(['init-foo', 'route-update']);
|
||||||
|
|
||||||
|
$location.url('/bar');
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(log).toEqual(['init-foo', 'route-update', 'destroy-foo', 'init-bar']);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should evaluate onload expression after linking the content', function() {
|
||||||
|
module(function($routeProvider) {
|
||||||
|
$routeProvider.when('/foo', {template: 'tpl.html'});
|
||||||
|
});
|
||||||
|
|
||||||
|
inject(function($templateCache, $location, $rootScope) {
|
||||||
|
$templateCache.put('tpl.html', [200, '{{1+1}}', {}]);
|
||||||
|
$rootScope.load = jasmine.createSpy('onload');
|
||||||
|
|
||||||
|
$location.url('/foo');
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect($rootScope.load).toHaveBeenCalledOnce();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
});
|
||||||
44
test/directive/scriptSpec.js
Normal file
44
test/directive/scriptSpec.js
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('scriptDirective', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
|
||||||
|
afterEach(function(){
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should populate $templateCache with contents of a ng-template script element', inject(
|
||||||
|
function($compile, $templateCache) {
|
||||||
|
if (msie <=8) return;
|
||||||
|
// in ie8 it is not possible to create a script tag with the right content.
|
||||||
|
// it always comes up as empty. I was trying to set the text of the
|
||||||
|
// script tag, but that did not work either, so I gave up.
|
||||||
|
$compile('<div>foo' +
|
||||||
|
'<script id="/ignore">ignore me</script>' +
|
||||||
|
'<script type="text/ng-template" id="/myTemplate.html"><x>{{y}}</x></script>' +
|
||||||
|
'</div>' );
|
||||||
|
expect($templateCache.get('/myTemplate.html')).toBe('<x>{{y}}</x>');
|
||||||
|
expect($templateCache.get('/ignore')).toBeUndefined();
|
||||||
|
}
|
||||||
|
));
|
||||||
|
|
||||||
|
|
||||||
|
it('should not compile scripts', inject(function($compile, $templateCache, $rootScope) {
|
||||||
|
if (msie <=8) return; // see above
|
||||||
|
|
||||||
|
var doc = jqLite('<div></div>');
|
||||||
|
// jQuery is too smart and removes
|
||||||
|
doc[0].innerHTML = '<script type="text/javascript">some {{binding}}</script>' +
|
||||||
|
'<script type="text/ng-template" id="/some">other {{binding}}</script>';
|
||||||
|
|
||||||
|
$compile(doc)($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
var scripts = doc.find('script');
|
||||||
|
expect(scripts.eq(0).text()).toBe('some {{binding}}');
|
||||||
|
expect(scripts.eq(1).text()).toBe('other {{binding}}');
|
||||||
|
dealoc(doc);
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
@ -806,4 +806,50 @@ describe('select', function() {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
describe('OPTION value', function() {
|
||||||
|
beforeEach(function() {
|
||||||
|
this.addMatchers({
|
||||||
|
toHaveValue: function(expected){
|
||||||
|
this.message = function() {
|
||||||
|
return 'Expected "' + this.actual.html() + '" to have value="' + expected + '".';
|
||||||
|
};
|
||||||
|
|
||||||
|
var value;
|
||||||
|
htmlParser(this.actual.html(), {
|
||||||
|
start:function(tag, attrs){
|
||||||
|
value = attrs.value;
|
||||||
|
},
|
||||||
|
end:noop,
|
||||||
|
chars:noop
|
||||||
|
});
|
||||||
|
return trim(value) == trim(expected);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should populate value attribute on OPTION', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<select ng:model="x"><option>abc</option></select>')($rootScope)
|
||||||
|
expect(element).toHaveValue('abc');
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should ignore value if already exists', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<select ng:model="x"><option value="abc">xyz</option></select>')($rootScope)
|
||||||
|
expect(element).toHaveValue('abc');
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should set value even if newlines present', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<select ng:model="x"><option attr="\ntext\n" \n>\nabc\n</option></select>')($rootScope)
|
||||||
|
expect(element).toHaveValue('\nabc\n');
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should set value even if self closing HTML', inject(function($rootScope, $compile) {
|
||||||
|
// IE removes the \n from option, which makes this test pointless
|
||||||
|
if (msie) return;
|
||||||
|
element = $compile('<select ng:model="x"><option>\n</option></select>')($rootScope)
|
||||||
|
expect(element).toHaveValue('\n');
|
||||||
|
}));
|
||||||
|
});
|
||||||
});
|
});
|
||||||
31
test/directive/styleSpec.js
Normal file
31
test/directive/styleSpec.js
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('style', function() {
|
||||||
|
var element;
|
||||||
|
|
||||||
|
|
||||||
|
afterEach(function() {
|
||||||
|
dealoc(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should not compile style element', inject(function($compile, $rootScope) {
|
||||||
|
element = jqLite('<style type="text/css">should {{notBound}}</style>');
|
||||||
|
$compile(element)($rootScope);
|
||||||
|
$rootScope.$digest();
|
||||||
|
|
||||||
|
// read innerHTML and trim to pass on IE8
|
||||||
|
expect(trim(element[0].innerHTML)).toBe('should {{notBound}}');
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should compile content of element with style attr', inject(function($compile, $rootScope) {
|
||||||
|
element = jqLite('<div style="some">{{bind}}</div>');
|
||||||
|
$compile(element)($rootScope);
|
||||||
|
$rootScope.$apply(function() {
|
||||||
|
$rootScope.bind = 'value';
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(element.text()).toBe('value');
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
@ -1,599 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
describe("directive", function() {
|
|
||||||
var element;
|
|
||||||
|
|
||||||
beforeEach(function() {
|
|
||||||
element = null;
|
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(function() {
|
|
||||||
dealoc(element);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
var $filterProvider, element;
|
|
||||||
|
|
||||||
beforeEach(module(['$filterProvider', function(provider){
|
|
||||||
$filterProvider = provider;
|
|
||||||
}]));
|
|
||||||
|
|
||||||
afterEach(function() {
|
|
||||||
dealoc(element);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("should ng:init", inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div ng:init="a=123"></div>')($rootScope);
|
|
||||||
expect($rootScope.a).toEqual(123);
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe('ng:bind', function() {
|
|
||||||
it('should set text', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div ng:bind="a"></div>')($rootScope);
|
|
||||||
expect(element.text()).toEqual('');
|
|
||||||
$rootScope.a = 'misko';
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.hasClass('ng-binding')).toEqual(true);
|
|
||||||
expect(element.text()).toEqual('misko');
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should set text to blank if undefined', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div ng:bind="a"></div>')($rootScope);
|
|
||||||
$rootScope.a = 'misko';
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.text()).toEqual('misko');
|
|
||||||
$rootScope.a = undefined;
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.text()).toEqual('');
|
|
||||||
$rootScope.a = null;
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.text()).toEqual('');
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should set html', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div ng:bind-html="html"></div>')($rootScope);
|
|
||||||
$rootScope.html = '<div unknown>hello</div>';
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(lowercase(element.html())).toEqual('<div>hello</div>');
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should set unsafe html', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div ng:bind-html-unsafe="html"></div>')($rootScope);
|
|
||||||
$rootScope.html = '<div onclick="">hello</div>';
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(lowercase(element.html())).toEqual('<div onclick="">hello</div>');
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should suppress rendering of falsy values', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div>{{ null }}{{ undefined }}{{ "" }}-{{ 0 }}{{ false }}</div>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.text()).toEqual('-0false');
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should render object as JSON ignore $$', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div>{{ {key:"value", $$key:"hide"} }}</div>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(fromJson(element.text())).toEqual({key:'value'});
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('ng:bind-template', function() {
|
|
||||||
it('should ng:bind-template', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div ng:bind-template="Hello {{name}}!"></div>')($rootScope);
|
|
||||||
$rootScope.name = 'Misko';
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.hasClass('ng-binding')).toEqual(true);
|
|
||||||
expect(element.text()).toEqual('Hello Misko!');
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should render object as JSON ignore $$', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<pre>{{ {key:"value", $$key:"hide"} }}</pre>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(fromJson(element.text())).toEqual({key:'value'});
|
|
||||||
}));
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('ng:bind-attr', function() {
|
|
||||||
it('should bind attributes', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div ng:bind-attr="{src:\'http://localhost/mysrc\', alt:\'myalt\'}"/>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.attr('src')).toEqual('http://localhost/mysrc');
|
|
||||||
expect(element.attr('alt')).toEqual('myalt');
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should not pretty print JSON in attributes', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<img alt="{{ {a:1} }}"/>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.attr('alt')).toEqual('{"a":1}');
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should remove special attributes on false', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<input ng:bind-attr="{disabled:\'{{disabled}}\', readonly:\'{{readonly}}\', checked:\'{{checked}}\'}"/>')($rootScope);
|
|
||||||
var input = element[0];
|
|
||||||
expect(input.disabled).toEqual(false);
|
|
||||||
expect(input.readOnly).toEqual(false);
|
|
||||||
expect(input.checked).toEqual(false);
|
|
||||||
|
|
||||||
$rootScope.disabled = true;
|
|
||||||
$rootScope.readonly = true;
|
|
||||||
$rootScope.checked = true;
|
|
||||||
$rootScope.$digest();
|
|
||||||
|
|
||||||
expect(input.disabled).toEqual(true);
|
|
||||||
expect(input.readOnly).toEqual(true);
|
|
||||||
expect(input.checked).toEqual(true);
|
|
||||||
}));
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('ng:click', function() {
|
|
||||||
it('should get called on a click', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div ng:click="clicked = true"></div>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect($rootScope.clicked).toBeFalsy();
|
|
||||||
|
|
||||||
browserTrigger(element, 'click');
|
|
||||||
expect($rootScope.clicked).toEqual(true);
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should pass event object', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div ng:click="event = $event"></div>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
|
|
||||||
browserTrigger(element, 'click');
|
|
||||||
expect($rootScope.event).toBeDefined();
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
describe('ng:submit', function() {
|
|
||||||
it('should get called on form submit', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<form action="" ng:submit="submitted = true">' +
|
|
||||||
'<input type="submit"/>' +
|
|
||||||
'</form>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect($rootScope.submitted).not.toBeDefined();
|
|
||||||
|
|
||||||
browserTrigger(element.children()[0]);
|
|
||||||
expect($rootScope.submitted).toEqual(true);
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('ng:class', function() {
|
|
||||||
it('should add new and remove old classes dynamically', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div class="existing" ng:class="dynClass"></div>')($rootScope);
|
|
||||||
$rootScope.dynClass = 'A';
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.hasClass('existing')).toBe(true);
|
|
||||||
expect(element.hasClass('A')).toBe(true);
|
|
||||||
|
|
||||||
$rootScope.dynClass = 'B';
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.hasClass('existing')).toBe(true);
|
|
||||||
expect(element.hasClass('A')).toBe(false);
|
|
||||||
expect(element.hasClass('B')).toBe(true);
|
|
||||||
|
|
||||||
delete $rootScope.dynClass;
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.hasClass('existing')).toBe(true);
|
|
||||||
expect(element.hasClass('A')).toBe(false);
|
|
||||||
expect(element.hasClass('B')).toBe(false);
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should support adding multiple classes via an array', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div class="existing" ng:class="[\'A\', \'B\']"></div>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.hasClass('existing')).toBeTruthy();
|
|
||||||
expect(element.hasClass('A')).toBeTruthy();
|
|
||||||
expect(element.hasClass('B')).toBeTruthy();
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should support adding multiple classes conditionally via a map of class names to boolean' +
|
|
||||||
'expressions', inject(function($rootScope, $compile) {
|
|
||||||
var element = $compile(
|
|
||||||
'<div class="existing" ' +
|
|
||||||
'ng:class="{A: conditionA, B: conditionB(), AnotB: conditionA&&!conditionB}">' +
|
|
||||||
'</div>')($rootScope);
|
|
||||||
$rootScope.conditionA = true;
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.hasClass('existing')).toBeTruthy();
|
|
||||||
expect(element.hasClass('A')).toBeTruthy();
|
|
||||||
expect(element.hasClass('B')).toBeFalsy();
|
|
||||||
expect(element.hasClass('AnotB')).toBeTruthy();
|
|
||||||
|
|
||||||
$rootScope.conditionB = function() { return true };
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.hasClass('existing')).toBeTruthy();
|
|
||||||
expect(element.hasClass('A')).toBeTruthy();
|
|
||||||
expect(element.hasClass('B')).toBeTruthy();
|
|
||||||
expect(element.hasClass('AnotB')).toBeFalsy();
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should support adding multiple classes via a space delimited string', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div class="existing" ng:class="\'A B\'"></div>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.hasClass('existing')).toBeTruthy();
|
|
||||||
expect(element.hasClass('A')).toBeTruthy();
|
|
||||||
expect(element.hasClass('B')).toBeTruthy();
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should preserve class added post compilation with pre-existing classes', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div class="existing" ng:class="dynClass"></div>')($rootScope);
|
|
||||||
$rootScope.dynClass = 'A';
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.hasClass('existing')).toBe(true);
|
|
||||||
|
|
||||||
// add extra class, change model and eval
|
|
||||||
element.addClass('newClass');
|
|
||||||
$rootScope.dynClass = 'B';
|
|
||||||
$rootScope.$digest();
|
|
||||||
|
|
||||||
expect(element.hasClass('existing')).toBe(true);
|
|
||||||
expect(element.hasClass('B')).toBe(true);
|
|
||||||
expect(element.hasClass('newClass')).toBe(true);
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should preserve class added post compilation without pre-existing classes"', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div ng:class="dynClass"></div>')($rootScope);
|
|
||||||
$rootScope.dynClass = 'A';
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.hasClass('A')).toBe(true);
|
|
||||||
|
|
||||||
// add extra class, change model and eval
|
|
||||||
element.addClass('newClass');
|
|
||||||
$rootScope.dynClass = 'B';
|
|
||||||
$rootScope.$digest();
|
|
||||||
|
|
||||||
expect(element.hasClass('B')).toBe(true);
|
|
||||||
expect(element.hasClass('newClass')).toBe(true);
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should preserve other classes with similar name"', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div class="ui-panel ui-selected" ng:class="dynCls"></div>')($rootScope);
|
|
||||||
$rootScope.dynCls = 'panel';
|
|
||||||
$rootScope.$digest();
|
|
||||||
$rootScope.dynCls = 'foo';
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element[0].className).toBe('ui-panel ui-selected ng-scope foo');
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should not add duplicate classes', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div class="panel bar" ng:class="dynCls"></div>')($rootScope);
|
|
||||||
$rootScope.dynCls = 'panel';
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element[0].className).toBe('panel bar ng-scope');
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should remove classes even if it was specified via class attribute', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div class="panel bar" ng:class="dynCls"></div>')($rootScope);
|
|
||||||
$rootScope.dynCls = 'panel';
|
|
||||||
$rootScope.$digest();
|
|
||||||
$rootScope.dynCls = 'window';
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element[0].className).toBe('bar ng-scope window');
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should remove classes even if they were added by another code', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div ng:class="dynCls"></div>')($rootScope);
|
|
||||||
$rootScope.dynCls = 'foo';
|
|
||||||
$rootScope.$digest();
|
|
||||||
element.addClass('foo');
|
|
||||||
$rootScope.dynCls = '';
|
|
||||||
$rootScope.$digest();
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should convert undefined and null values to an empty string', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div ng:class="dynCls"></div>')($rootScope);
|
|
||||||
$rootScope.dynCls = [undefined, null];
|
|
||||||
$rootScope.$digest();
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should ng:class odd/even', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<ul><li ng:repeat="i in [0,1]" class="existing" ng:class-odd="\'odd\'" ng:class-even="\'even\'"></li><ul>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
var e1 = jqLite(element[0].childNodes[1]);
|
|
||||||
var e2 = jqLite(element[0].childNodes[2]);
|
|
||||||
expect(e1.hasClass('existing')).toBeTruthy();
|
|
||||||
expect(e1.hasClass('odd')).toBeTruthy();
|
|
||||||
expect(e2.hasClass('existing')).toBeTruthy();
|
|
||||||
expect(e2.hasClass('even')).toBeTruthy();
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should allow both ng:class and ng:class-odd/even on the same element', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<ul>' +
|
|
||||||
'<li ng:repeat="i in [0,1]" ng:class="\'plainClass\'" ' +
|
|
||||||
'ng:class-odd="\'odd\'" ng:class-even="\'even\'"></li>' +
|
|
||||||
'<ul>')($rootScope);
|
|
||||||
$rootScope.$apply();
|
|
||||||
var e1 = jqLite(element[0].childNodes[1]);
|
|
||||||
var e2 = jqLite(element[0].childNodes[2]);
|
|
||||||
|
|
||||||
expect(e1.hasClass('plainClass')).toBeTruthy();
|
|
||||||
expect(e1.hasClass('odd')).toBeTruthy();
|
|
||||||
expect(e1.hasClass('even')).toBeFalsy();
|
|
||||||
expect(e2.hasClass('plainClass')).toBeTruthy();
|
|
||||||
expect(e2.hasClass('even')).toBeTruthy();
|
|
||||||
expect(e2.hasClass('odd')).toBeFalsy();
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should allow both ng:class and ng:class-odd/even with multiple classes', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<ul>' +
|
|
||||||
'<li ng:repeat="i in [0,1]" ng:class="[\'A\', \'B\']" ' +
|
|
||||||
'ng:class-odd="[\'C\', \'D\']" ng:class-even="[\'E\', \'F\']"></li>' +
|
|
||||||
'<ul>')($rootScope);
|
|
||||||
$rootScope.$apply();
|
|
||||||
var e1 = jqLite(element[0].childNodes[1]);
|
|
||||||
var e2 = jqLite(element[0].childNodes[2]);
|
|
||||||
|
|
||||||
expect(e1.hasClass('A')).toBeTruthy();
|
|
||||||
expect(e1.hasClass('B')).toBeTruthy();
|
|
||||||
expect(e1.hasClass('C')).toBeTruthy();
|
|
||||||
expect(e1.hasClass('D')).toBeTruthy();
|
|
||||||
expect(e1.hasClass('E')).toBeFalsy();
|
|
||||||
expect(e1.hasClass('F')).toBeFalsy();
|
|
||||||
|
|
||||||
expect(e2.hasClass('A')).toBeTruthy();
|
|
||||||
expect(e2.hasClass('B')).toBeTruthy();
|
|
||||||
expect(e2.hasClass('E')).toBeTruthy();
|
|
||||||
expect(e2.hasClass('F')).toBeTruthy();
|
|
||||||
expect(e2.hasClass('C')).toBeFalsy();
|
|
||||||
expect(e2.hasClass('D')).toBeFalsy();
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('ng:style', function() {
|
|
||||||
|
|
||||||
it('should set', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div ng:style="{height: \'40px\'}"></div>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.css('height')).toEqual('40px');
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should silently ignore undefined style', inject(function($rootScope, $compile) {
|
|
||||||
element = $compile('<div ng:style="myStyle"></div>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.hasClass('ng-exception')).toBeFalsy();
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
describe('preserving styles set before and after compilation', function() {
|
|
||||||
var scope, preCompStyle, preCompVal, postCompStyle, postCompVal, element;
|
|
||||||
|
|
||||||
beforeEach(inject(function($rootScope, $compile) {
|
|
||||||
preCompStyle = 'width';
|
|
||||||
preCompVal = '300px';
|
|
||||||
postCompStyle = 'height';
|
|
||||||
postCompVal = '100px';
|
|
||||||
element = jqLite('<div ng:style="styleObj"></div>');
|
|
||||||
element.css(preCompStyle, preCompVal);
|
|
||||||
jqLite(document.body).append(element);
|
|
||||||
$compile(element)($rootScope);
|
|
||||||
scope = $rootScope;
|
|
||||||
scope.styleObj = {'margin-top': '44px'};
|
|
||||||
scope.$apply();
|
|
||||||
element.css(postCompStyle, postCompVal);
|
|
||||||
}));
|
|
||||||
|
|
||||||
afterEach(function() {
|
|
||||||
element.remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
it('should not mess up stuff after compilation', function() {
|
|
||||||
element.css('margin', '44px');
|
|
||||||
expect(element.css(preCompStyle)).toBe(preCompVal);
|
|
||||||
expect(element.css('margin-top')).toBe('44px');
|
|
||||||
expect(element.css(postCompStyle)).toBe(postCompVal);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
it('should not mess up stuff after $apply with no model changes', function() {
|
|
||||||
element.css('padding-top', '33px');
|
|
||||||
scope.$apply();
|
|
||||||
expect(element.css(preCompStyle)).toBe(preCompVal);
|
|
||||||
expect(element.css('margin-top')).toBe('44px');
|
|
||||||
expect(element.css(postCompStyle)).toBe(postCompVal);
|
|
||||||
expect(element.css('padding-top')).toBe('33px');
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
it('should not mess up stuff after $apply with non-colliding model changes', function() {
|
|
||||||
scope.styleObj = {'padding-top': '99px'};
|
|
||||||
scope.$apply();
|
|
||||||
expect(element.css(preCompStyle)).toBe(preCompVal);
|
|
||||||
expect(element.css('margin-top')).not.toBe('44px');
|
|
||||||
expect(element.css('padding-top')).toBe('99px');
|
|
||||||
expect(element.css(postCompStyle)).toBe(postCompVal);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
it('should overwrite original styles after a colliding model change', function() {
|
|
||||||
scope.styleObj = {'height': '99px', 'width': '88px'};
|
|
||||||
scope.$apply();
|
|
||||||
expect(element.css(preCompStyle)).toBe('88px');
|
|
||||||
expect(element.css(postCompStyle)).toBe('99px');
|
|
||||||
scope.styleObj = {};
|
|
||||||
scope.$apply();
|
|
||||||
expect(element.css(preCompStyle)).not.toBe('88px');
|
|
||||||
expect(element.css(postCompStyle)).not.toBe('99px');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
describe('ng:show', function() {
|
|
||||||
it('should show and hide an element', inject(function($rootScope, $compile) {
|
|
||||||
element = jqLite('<div ng:show="exp"></div>');
|
|
||||||
element = $compile(element)($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(isCssVisible(element)).toEqual(false);
|
|
||||||
$rootScope.exp = true;
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(isCssVisible(element)).toEqual(true);
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should make hidden element visible', inject(function($rootScope, $compile) {
|
|
||||||
element = jqLite('<div style="display: none" ng:show="exp"></div>');
|
|
||||||
element = $compile(element)($rootScope);
|
|
||||||
expect(isCssVisible(element)).toBe(false);
|
|
||||||
$rootScope.exp = true;
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(isCssVisible(element)).toBe(true);
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('ng:hide', function() {
|
|
||||||
it('should hide an element', inject(function($rootScope, $compile) {
|
|
||||||
element = jqLite('<div ng:hide="exp"></div>');
|
|
||||||
element = $compile(element)($rootScope);
|
|
||||||
expect(isCssVisible(element)).toBe(true);
|
|
||||||
$rootScope.exp = true;
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(isCssVisible(element)).toBe(false);
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('ng:controller', function() {
|
|
||||||
var element;
|
|
||||||
|
|
||||||
beforeEach(inject(function($window) {
|
|
||||||
$window.Greeter = function($scope) {
|
|
||||||
// private stuff (not exported to scope)
|
|
||||||
this.prefix = 'Hello ';
|
|
||||||
|
|
||||||
// public stuff (exported to scope)
|
|
||||||
var ctrl = this;
|
|
||||||
$scope.name = 'Misko';
|
|
||||||
$scope.greet = function(name) {
|
|
||||||
return ctrl.prefix + name + ctrl.suffix;
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.protoGreet = bind(this, this.protoGreet);
|
|
||||||
};
|
|
||||||
$window.Greeter.prototype = {
|
|
||||||
suffix: '!',
|
|
||||||
protoGreet: function(name) {
|
|
||||||
return this.prefix + name + this.suffix;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
$window.Child = function($scope) {
|
|
||||||
$scope.name = 'Adam';
|
|
||||||
};
|
|
||||||
}));
|
|
||||||
|
|
||||||
afterEach(function() {
|
|
||||||
dealoc(element);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
it('should instantiate controller and bind methods', inject(function($compile, $rootScope) {
|
|
||||||
element = $compile('<div ng:controller="Greeter">{{greet(name)}}</div>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.text()).toBe('Hello Misko!');
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should allow nested controllers', inject(function($compile, $rootScope) {
|
|
||||||
element = $compile('<div ng:controller="Greeter"><div ng:controller="Child">{{greet(name)}}</div></div>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.text()).toBe('Hello Adam!');
|
|
||||||
dealoc(element);
|
|
||||||
|
|
||||||
element = $compile('<div ng:controller="Greeter"><div ng:controller="Child">{{protoGreet(name)}}</div></div>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.text()).toBe('Hello Adam!');
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should instantiate controller defined on scope', inject(function($compile, $rootScope) {
|
|
||||||
$rootScope.Greeter = function($scope) {
|
|
||||||
$scope.name = 'Vojta';
|
|
||||||
};
|
|
||||||
|
|
||||||
element = $compile('<div ng:controller="Greeter">{{name}}</div>')($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
expect(element.text()).toBe('Vojta');
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('ng:cloak', function() {
|
|
||||||
|
|
||||||
it('should get removed when an element is compiled', inject(function($rootScope, $compile) {
|
|
||||||
element = jqLite('<div ng:cloak></div>');
|
|
||||||
expect(element.attr('ng:cloak')).toBe('');
|
|
||||||
$compile(element);
|
|
||||||
expect(element.attr('ng:cloak')).toBeUndefined();
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should remove ng-cloak class from a compiled element with attribute', inject(function($rootScope, $compile) {
|
|
||||||
element = jqLite('<div ng:cloak class="foo ng-cloak bar"></div>');
|
|
||||||
|
|
||||||
expect(element.hasClass('foo')).toBe(true);
|
|
||||||
expect(element.hasClass('ng-cloak')).toBe(true);
|
|
||||||
expect(element.hasClass('bar')).toBe(true);
|
|
||||||
|
|
||||||
$compile(element);
|
|
||||||
|
|
||||||
expect(element.hasClass('foo')).toBe(true);
|
|
||||||
expect(element.hasClass('ng-cloak')).toBe(false);
|
|
||||||
expect(element.hasClass('bar')).toBe(true);
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should remove ng-cloak class from a compiled element', inject(function($rootScope, $compile) {
|
|
||||||
element = jqLite('<div class="foo ng-cloak bar"></div>');
|
|
||||||
|
|
||||||
expect(element.hasClass('foo')).toBe(true);
|
|
||||||
expect(element.hasClass('ng-cloak')).toBe(true);
|
|
||||||
expect(element.hasClass('bar')).toBe(true);
|
|
||||||
|
|
||||||
$compile(element);
|
|
||||||
|
|
||||||
expect(element.hasClass('foo')).toBe(true);
|
|
||||||
expect(element.hasClass('ng-cloak')).toBe(false);
|
|
||||||
expect(element.hasClass('bar')).toBe(true);
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
describe('style', function() {
|
|
||||||
|
|
||||||
it('should not compile style element', inject(function($compile, $rootScope) {
|
|
||||||
element = jqLite('<style type="text/css">should {{notBound}}</style>');
|
|
||||||
$compile(element)($rootScope);
|
|
||||||
$rootScope.$digest();
|
|
||||||
|
|
||||||
// read innerHTML and trim to pass on IE8
|
|
||||||
expect(trim(element[0].innerHTML)).toBe('should {{notBound}}');
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
it('should compile content of element with style attr', inject(function($compile, $rootScope) {
|
|
||||||
element = jqLite('<div style="some">{{bind}}</div>');
|
|
||||||
$compile(element)($rootScope);
|
|
||||||
$rootScope.$apply(function() {
|
|
||||||
$rootScope.bind = 'value';
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(element.text()).toBe('value');
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1115,7 +1115,23 @@ describe('$compile', function() {
|
||||||
expect(observeSpy.callCount).toBe(2);
|
expect(observeSpy.callCount).toBe(2);
|
||||||
expect($exceptionHandler.errors).toEqual(['ERROR', 'ERROR']);
|
expect($exceptionHandler.errors).toEqual(['ERROR', 'ERROR']);
|
||||||
});
|
});
|
||||||
})
|
});
|
||||||
|
|
||||||
|
|
||||||
|
it('should translate {{}} in terminal nodes', inject(function($rootScope, $compile) {
|
||||||
|
element = $compile('<select ng:model="x"><option value="">Greet {{name}}!</option></select>')($rootScope)
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(sortedHtml(element).replace(' selected="true"', '')).
|
||||||
|
toEqual('<select ng:model="x">' +
|
||||||
|
'<option>Greet !</option>' +
|
||||||
|
'</select>');
|
||||||
|
$rootScope.name = 'Misko';
|
||||||
|
$rootScope.$digest();
|
||||||
|
expect(sortedHtml(element).replace(' selected="true"', '')).
|
||||||
|
toEqual('<select ng:model="x">' +
|
||||||
|
'<option>Greet Misko!</option>' +
|
||||||
|
'</select>');
|
||||||
|
}));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
1223
test/widgetsSpec.js
1223
test/widgetsSpec.js
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue