angular.directive('ng:bind', function(expression, compiledElement) {
var compiler = this;
return function(linkElement) {
var currentScope = this;
currentScope.$watch(expression, function(value) {
linkElement.text(value);
});
};
});
*
*
* # Directive vs. Attribute Widget
* Both [attribute widgets](#!angular.widget) and directives can compile a DOM element
* attribute. So why have two different ways to do the same thing? The answer is that order
* matters, but we have no control over the order in which attributes are read. To solve this
* we apply attribute widget before the directive.
*
* For example, consider this piece of HTML, which uses the directives `ng:repeat`, `ng:init`,
* and `ng:bind`:
*
* <my:watch exp="name"/>
*
*
* You can implement `my:watch` like this:
*
* angular.widget('my:watch', function(compileElement) {
* var compiler = this;
* var exp = compileElement.attr('exp');
* return function(linkElement) {
* var currentScope = this;
* currentScope.$watch(exp, function(value){
* alert(value);
* }};
* };
* });
*
*
* # Attribute Widget
* Let's implement the same widget, but this time as an attribute
* that can be added to any existing DOM element.
*
* <div my-watch="name">text</div>
*
* You can implement `my:watch` attribute like this:
*
* angular.widget('@my:watch', function(expression, compileElement) {
* var compiler = this;
* return function(linkElement) {
* var currentScope = this;
* currentScope.$watch(expression, function(value){
* alert(value);
* });
* };
* });
*
*
* @example
*
*
* function reverse(text) {
* var reversed = [];
* for (var i = 0; i < text.length; i++) {
* reversed.unshift(text.charAt(i));
* }
* return reversed.join('');
* }
*
* angular.formatter('reverse', {
* parse: function(value){
* return reverse(value||'').toUpperCase();
* },
* format: function(value){
* return reverse(value||'').toLowerCase();
* }
* });
*
*
* @example
*
*
* Formatted:
*
* {{data}}
*
*
* @scenario
* it('should store reverse', function(){
* expect(element('.doc-example input:first').val()).toEqual('angular');
* expect(element('.doc-example input:last').val()).toEqual('RALUGNA');
*
* this.addFutureAction('change to XYZ', function($window, $document, done){
* $document.elements('.doc-example input:last').val('XYZ').trigger('change');
* done();
* });
* expect(element('.doc-example input:first').val()).toEqual('zyx');
* });
*/
angularFormatter = extensionMap(angular, 'formatter'),
/**
* @workInProgress
* @ngdoc overview
* @name angular.service
*
* @description
* # Overview
* Services are substituable objects, which are wired together using dependency injection.
* Each service could have dependencies (other services), which are passed in constructor.
* Because JS is dynamicaly typed language, dependency injection can not use static types
* to satisfy these dependencies, so each service must explicitely define its dependencies.
* This is done by `$inject` property.
*
* For now, life time of all services is the same as the life time of page.
*
*
* # Built-in services
* The Angular framework provides a standard set of services for common operations.
* You can write your own services and rewrite these standard services as well.
* Like other core angular variables, the built-in services always start with $.
*
* * `angular.service.$browser`
* * `angular.service.$window`
* * `angular.service.$document`
* * `angular.service.$location`
* * `angular.service.$log`
* * `angular.service.$exceptionHandler`
* * `angular.service.$hover`
* * `angular.service.$invalidWidgets`
* * `angular.service.$route`
* * `angular.service.$xhr`
* * `angular.service.$xhr.error`
* * `angular.service.$xhr.bulk`
* * `angular.service.$xhr.cache`
* * `angular.service.$resource`
* * `angular.service.$cookies`
* * `angular.service.$cookieStore`
*
* # Writing your own custom services
* Angular provides only set of basic services, so you will probably need to write your custom
* service very soon. To do so, you need to write a factory function and register this function
* to angular's dependency injector. This factory function must return an object - your service
* (it is not called with new operator).
*
* **angular.service** has three parameters:
*
* - `{string} name` - Name of the service
* - `{function()} factory` - Factory function (called just once by DI)
* - `{Object} config` - Hash of configuration (`$inject`, `$creation`)
*
* If your service requires - depends on other services, you need to specify them
* in config hash - property $inject. This property is an array of strings (service names).
* These dependencies will be passed as parameters to the factory function by DI.
* This approach is very useful when testing, as you can inject mocks/stubs/dummies.
*
* Here is an example of very simple service. This service requires $window service (it's
* passed as a parameter to factory function) and it's just a function.
*
* This service simple stores all notifications and after third one, it displays all of them by
* window alert.
*
angular.service('notify', function(win) {
var msgs = [];
return function(msg) {
msgs.push(msg);
if (msgs.length == 3) {
win.alert(msgs.join("\n"));
msgs = [];
}
};
}, {$inject: ['$window']});
*
*
* And here is a unit test for this service. We use Jasmine spy (mock) instead of real browser's alert.
*
* var mock, notify;
*
* beforeEach(function() {
* mock = {alert: jasmine.createSpy()};
* notify = angular.service('notify')(mock);
* });
*
* it('should not alert first two notifications', function() {
* notify('one');
* notify('two');
* expect(mock.alert).not.toHaveBeenCalled();
* });
*
* it('should alert all after third notification', function() {
* notify('one');
* notify('two');
* notify('three');
* expect(mock.alert).toHaveBeenCalledWith("one\ntwo\nthree");
* });
*
* it('should clear messages after alert', function() {
* notify('one');
* notify('two');
* notify('third');
* notify('more');
* notify('two');
* notify('third');
* expect(mock.alert.callCount).toEqual(2);
* expect(mock.alert.mostRecentCall.args).toEqual(["more\ntwo\nthird"]);
* });
*
*
* # Injecting services into controllers
* Using services in a controllers is very similar to using service in other service.
* Again, we will use dependency injection.
*
* JavaScript is dynamic language, so DI is not able to figure out which services to inject by
* static types (like in static typed languages). Therefore you must specify the service name
* by the `$inject` property - it's an array that contains strings with names of services to be
* injected. The name must match the id that service has been registered as with angular.
* The order of the services in the array matters, because this order will be used when calling
* the factory function with injected parameters. The names of parameters in factory function
* don't matter, but by convention they match the service ids.
*
* function myController($loc, $log) {
* this.firstMethod = function() {
* // use $location service
* $loc.setHash();
* };
* this.secondMethod = function() {
* // use $log service
* $log.info('...');
* };
* }
* // which services to inject ?
* myController.$inject = ['$location', '$log'];
*
*
* @example
*
*
* Let's try this simple notify service, injected into the controller...
* * *
var values = {name: 'misko', gender: 'male'};
var log = [];
angular.foreach(values, function(value, key){
this.push(key + ': ' + value);
}, log);
expect(log).toEqual(['name: misko', 'gender:male']);
*
* @param {Object|Array} obj Object to iterate over.
* @param {function()} iterator Iterator function.
* @param {Object} context Object to become context (`this`) for the iterator function.
* @returns {Objet|Array} Reference to `obj`.
*/
function foreach(obj, iterator, context) {
var key;
if (obj) {
if (isFunction(obj)){
for (key in obj) {
if (key != 'prototype' && key != $length && key != $name && obj.hasOwnProperty(key)) {
iterator.call(context, obj[key], key);
}
}
} else if (obj.forEach) {
obj.forEach(iterator, context);
} else if (isObject(obj) && isNumber(obj.length)) {
for (key = 0; key < obj.length; key++)
iterator.call(context, obj[key], key);
} else {
for (key in obj)
iterator.call(context, obj[key], key);
}
}
return obj;
}
function foreachSorted(obj, iterator, context) {
var keys = [];
for (var key in obj) keys.push(key);
keys.sort();
for ( var i = 0; i < keys.length; i++) {
iterator.call(context, obj[keys[i]], keys[i]);
}
return keys;
}
function formatError(arg) {
if (arg instanceof Error) {
if (arg.stack) {
arg = arg.stack;
} else if (arg.sourceURL) {
arg = arg.message + '\n' + arg.sourceURL + ':' + arg.line;
}
}
return arg;
}
/**
* @workInProgress
* @ngdoc function
* @name angular.extend
* @function
*
* @description
* Extends the destination object `dst` by copying all of the properties from the `src` objects to
* `dst`. You can specify multiple `src` objects.
*
* @param {Object} dst The destination object.
* @param {...Object} src The source object(s).
*/
function extend(dst) {
foreach(arguments, function(obj){
if (obj !== dst) {
foreach(obj, function(value, key){
dst[key] = value;
});
}
});
return dst;
}
function inherit(parent, extra) {
return extend(new (extend(function(){}, {prototype:parent}))(), extra);
}
/**
* @workInProgress
* @ngdoc function
* @name angular.noop
* @function
*
* @description
* Empty function that performs no operation whatsoever. This function is useful when writing code
* in the functional style.
function foo(callback) {
var result = calculateResult();
(callback || angular.noop)(result);
}
*/
function noop() {}
/**
* @workInProgress
* @ngdoc function
* @name angular.identity
* @function
*
* @description
* A function that does nothing except for returning its first argument. This function is useful
* when writing code in the functional style.
*
function transformer(transformationFn, value) {
return (transformationFn || identity)(value);
};
*/
function identity($) {return $;}
function valueFn(value) {return function(){ return value; };}
function extensionMap(angular, name, transform) {
var extPoint;
return angular[name] || (extPoint = angular[name] = function (name, fn, prop){
name = (transform || identity)(name);
if (isDefined(fn)) {
if (isDefined(extPoint[name])) {
foreach(extPoint[name], function(property, key) {
if (key.charAt(0) == '$' && isUndefined(fn[key]))
fn[key] = property;
});
}
extPoint[name] = extend(fn, prop || {});
}
return extPoint[name];
});
}
function jqLiteWrap(element) {
// for some reasons the parentNode of an orphan looks like _null but its typeof is object.
if (element) {
if (isString(element)) {
var div = document.createElement('div');
div.innerHTML = element;
element = new JQLite(div.childNodes);
} else if (!(element instanceof JQLite) && isElement(element)) {
element = new JQLite(element);
}
}
return element;
}
/**
* @workInProgress
* @ngdoc function
* @name angular.isUndefined
* @function
*
* @description
* Checks if a reference is undefined.
*
* @param {*} value Reference to check.
* @returns {boolean} True if `value` is undefined.
*/
function isUndefined(value){ return typeof value == $undefined; }
/**
* @workInProgress
* @ngdoc function
* @name angular.isDefined
* @function
*
* @description
* Checks if a reference is defined.
*
* @param {*} value Reference to check.
* @returns {boolean} True if `value` is defined.
*/
function isDefined(value){ return typeof value != $undefined; }
/**
* @workInProgress
* @ngdoc function
* @name angular.isObject
* @function
*
* @description
* Checks if a reference is an `Object`. Unlike in JavaScript `null`s are not considered to be
* objects.
*
* @param {*} value Reference to check.
* @returns {boolean} True if `value` is an `Object` but not `null`.
*/
function isObject(value){ return value!=_null && typeof value == $object;}
/**
* @workInProgress
* @ngdoc function
* @name angular.isString
* @function
*
* @description
* Checks if a reference is a `String`.
*
* @param {*} value Reference to check.
* @returns {boolean} True if `value` is a `String`.
*/
function isString(value){ return typeof value == $string;}
/**
* @workInProgress
* @ngdoc function
* @name angular.isNumber
* @function
*
* @description
* Checks if a reference is a `Number`.
*
* @param {*} value Reference to check.
* @returns {boolean} True if `value` is a `Number`.
*/
function isNumber(value){ return typeof value == $number;}
/**
* @workInProgress
* @ngdoc function
* @name angular.isDate
* @function
*
* @description
* Checks if a reference is defined.
*
* @param {*} value Reference to check.
* @returns {boolean} True if `value` is a `Date`.
*/
function isDate(value){ return value instanceof Date; }
/**
* @workInProgress
* @ngdoc function
* @name angular.isArray
* @function
*
* @description
* Checks if a reference is an `Array`.
*
* @param {*} value Reference to check.
* @returns {boolean} True if `value` is an `Array`.
*/
function isArray(value) { return value instanceof Array; }
/**
* @workInProgress
* @ngdoc function
* @name angular.isFunction
* @function
*
* @description
* Checks if a reference is a `Function`.
*
* @param {*} value Reference to check.
* @returns {boolean} True if `value` is a `Function`.
*/
function isFunction(value){ return typeof value == $function;}
function isBoolean(value) { return typeof value == $boolean;}
function isTextNode(node) { return nodeName(node) == '#text'; }
function trim(value) { return isString(value) ? value.replace(/^\s*/, '').replace(/\s*$/, '') : value; }
function isElement(node) {
return node && (node.nodeName || node instanceof JQLite || (jQuery && node instanceof jQuery));
}
/**
* HTML class which is the only class which can be used in ng:bind to inline HTML for security reasons.
* @constructor
* @param html raw (unsafe) html
* @param {string=} option if set to 'usafe' then get method will return raw (unsafe/unsanitized) html
*/
function HTML(html, option) {
this.html = html;
this.get = lowercase(option) == 'unsafe' ?
valueFn(html) :
function htmlSanitize() {
var buf = [];
htmlParser(html, htmlSanitizeWriter(buf));
return buf.join('');
};
}
if (msie) {
nodeName = function(element) {
element = element.nodeName ? element : element[0];
return (element.scopeName && element.scopeName != 'HTML' ) ? uppercase(element.scopeName + ':' + element.nodeName) : element.nodeName;
};
} else {
nodeName = function(element) {
return element.nodeName ? element.nodeName : element[0].nodeName;
};
}
function quickClone(element) {
return jqLite(element[0].cloneNode(true));
}
function isVisible(element) {
var rect = element[0].getBoundingClientRect(),
width = (rect.width || (rect.right||0 - rect.left||0)),
height = (rect.height || (rect.bottom||0 - rect.top||0));
return width>0 && height>0;
}
function map(obj, iterator, context) {
var results = [];
foreach(obj, function(value, index, list) {
results.push(iterator.call(context, value, index, list));
});
return results;
}
/**
* @workInProgress
* @ngdoc function
* @name angular.Object.size
* @function
*
* @description
* Determines the number of elements in an array or number of properties of an object.
*
* Note: this function is used to augment the Object type in angular expressions. See
* {@link angular.Object} for more info.
*
* @param {Object|Array} obj Object or array to inspect.
* @returns {number} The size of `obj` or `0` if `obj` is not an object or array.
*
* @example
* Number of items in array: {{ [1,2].$size() }}master={{master}}
form={{form}}
*/
function copy(source, destination){
if (!destination) {
destination = source;
if (source) {
if (isArray(source)) {
destination = copy(source, []);
} else if (isDate(source)) {
destination = new Date(source.getTime());
} else if (isObject(source)) {
destination = copy(source, {});
}
}
} else {
if (isArray(source)) {
while(destination.length) {
destination.pop();
}
for ( var i = 0; i < source.length; i++) {
destination.push(copy(source[i]));
}
} else {
foreach(destination, function(value, key){
delete destination[key];
});
for ( var key in source) {
destination[key] = copy(source[key]);
}
}
}
return destination;
}
/**
* @workInProgress
* @ngdoc function
* @name angular.Object.equals
* @function
*
* @description
* Determines if two objects or value are equivalent.
*
* To be equivalent, they must pass `==` comparison or be of the same type and have all their
* properties pass `==` comparison.
*
* Supports values types, arrays and objects.
*
* For objects `function` properties and properties that start with `$` are not considered during
* comparisons.
*
* Note: this function is used to augment the Object type in angular expressions. See
* {@link angular.Object} for more info.
*
* @param {*} o1 Object or value to compare.
* @param {*} o2 Object or value to compare.
* @returns {boolean} True if arguments are equal.
*
* @example
Salutation: master={{master}}
form={{form}}
*/
function equals(o1, o2) {
if (o1 == o2) return true;
var t1 = typeof o1, t2 = typeof o2, length, key, keySet;
if (t1 == t2 && t1 == 'object') {
if (o1 instanceof Array) {
if ((length = o1.length) == o2.length) {
for(key=0; key
var scope1 = angular.compile(window.document);
scope1.$init();
var scope2 = angular.compile('click me');
scope2.$init();
*
* @param {string|DOMElement} element Element to compile.
* @param {Object=} parentScope Scope to become the parent scope of the newly compiled scope.
* @returns {Object} Compiled scope object.
*/
function compile(element, parentScope) {
var compiler = new Compiler(angularTextMarkup, angularAttrMarkup, angularDirective, angularWidget),
$element = jqLite(element);
return compiler.compile($element)($element, parentScope);
}
/////////////////////////////////////////////////
/**
* Parses an escaped url query string into key-value pairs.
* @returns Object.<(string|boolean)>
*/
function parseKeyValue(/**string*/keyValue) {
var obj = {}, key_value, key;
foreach((keyValue || "").split('&'), function(keyValue){
if (keyValue) {
key_value = keyValue.split('=');
key = unescape(key_value[0]);
obj[key] = isDefined(key_value[1]) ? unescape(key_value[1]) : true;
}
});
return obj;
}
function toKeyValue(obj) {
var parts = [];
foreach(obj, function(value, key) {
parts.push(escape(key) + (value === true ? '' : '=' + escape(value)));
});
return parts.length ? parts.join('&') : '';
}
/**
* @workInProgress
* @ngdoc directive
* @name angular.directive.ng:autobind
* @element script
*
* @TODO ng:autobind is not a directive!! it should be documented as bootstrap parameter in a
* separate bootstrap section.
* @TODO rename to ng:autobind to ng:autoboot
*
* @description
* This section explains how to bootstrap your application with angular using either the angular
* javascript file.
*
*
* ## The angular distribution
* Note that there are two versions of the angular javascript file that you can use:
*
* * `angular.js` - the development version - this file is unobfuscated, uncompressed, and thus
* human-readable and useful when developing your angular applications.
* * `angular.min.js` - the production version - this is a minified and obfuscated version of
* `angular.js`. You want to use this version when you want to load a smaller but functionally
* equivalent version of the code in your application. We use the Closure compiler to create this
* file.
*
*
* ## Auto-bootstrap with `ng:autobind`
* The simplest way to get an
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<head>
<script type="text/javascript" src="http://code.angularjs.org/angular-0.9.3.min.js"
ng:autobind></script>
</head>
<body>
Hello {{'world'}}!
</body>
</html>
*
*
* The `ng:autobind` attribute tells
<!doctype html>
<html>
<head>
<script type="text/javascript"
src="http://code.angularjs.org/angular-0.9.3.min.js#autobind"></script>
</head>
<body>
<div xmlns:ng="http://angularjs.org">
Hello {{'world'}}!
</div>
</body>
</html>
*
*
* In this case it's the `#autobind` URL fragment that tells angular to auto-bootstrap.
*
*
* ## Filename Restrictions for Auto-bootstrap
* In order for us to find the auto-bootstrap script attribute or URL fragment, the value of the
* `script` `src` attribute that loads angular script must match one of these naming
* conventions:
*
* - `angular.js`
* - `angular-min.js`
* - `angular-x.x.x.js`
* - `angular-x.x.x.min.js`
* - `angular-x.x.x-xxxxxxxx.js` (dev snapshot)
* - `angular-x.x.x-xxxxxxxx.min.js` (dev snapshot)
* - `angular-bootstrap.js` (used for development of angular)
*
* Optionally, any of the filename format above can be prepended with relative or absolute URL that
* ends with `/`.
*
*
* ## Manual Bootstrap
* Using auto-bootstrap is a handy way to start using
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<head>
<script type="text/javascript" src="http://code.angularjs.org/angular-0.9.3.min.js"
ng:autobind></script>
<script type="text/javascript">
(function(window, previousOnLoad){
window.onload = function(){
try { (previousOnLoad||angular.noop)(); } catch(e) {}
angular.compile(window.document).$init();
};
})(window, window.onload);
</script>
</head>
<body>
Hello {{'World'}}!
</body>
</html>
*
*
* This is the sequence that your code should follow if you're bootstrapping angular on your own:
*
* * After the page is loaded, find the root of the HTML template, which is typically the root of
* the document.
* * Run the HTML compiler, which converts the templates into an executable, bi-directionally bound
* application.
*
*
* ##XML Namespace
* *IMPORTANT:* When using * <html xmlns:ng="http://angularjs.org"> ** * * ## Create your own namespace * If you want to define your own widgets, you must create your own namespace and use that namespace * to form the fully qualified widget name. For example, you could map the alias `my` to your domain * and create a widget called my:widget. To create your own namespace, simply add another xmlsn tag * to your page, create an alias, and set it to your unique domain: * *
* <html xmlns:ng="http://angularjs.org" xmlns:my="http://mydomain.com"> ** * * ## Global Object * The