- * AngularJS strongly relies on contextual escaping for the security of bindings: disabling or
- * modifying this might cause cross site scripting (XSS) vulnerabilities. For libraries owners,
- * changes to this service will also influence users, so be extra careful and document your changes.
- *
- *
- * Typically, you would configure or override the {@link ng.$sceDelegate $sceDelegate} instead of
- * the `$sce` service to customize the way Strict Contextual Escaping works in AngularJS. This is
- * because, while the `$sce` provides numerous shorthand methods, etc., you really only need to
- * override 3 core functions (`trustAs`, `getTrusted` and `valueOf`) to replace the way things
- * work because `$sce` delegates to `$sceDelegate` for these operations.
- *
- * Refer {@link ng.$sceDelegateProvider $sceDelegateProvider} to configure this service.
- *
- * The default instance of `$sceDelegate` should work out of the box with little pain. While you
- * can override it completely to change the behavior of `$sce`, the common case would
- * involve configuring the {@link ng.$sceDelegateProvider $sceDelegateProvider} instead by setting
- * your own whitelists and blacklists for trusting URLs used for loading AngularJS resources such as
- * templates. Refer {@link ng.$sceDelegateProvider#resourceUrlWhitelist
- * $sceDelegateProvider.resourceUrlWhitelist} and {@link
- * ng.$sceDelegateProvider#resourceUrlBlacklist $sceDelegateProvider.resourceUrlBlacklist}
- */
-
-/**
- * @ngdoc provider
- * @name $sceDelegateProvider
- * @this
- *
- * @description
- *
- * The `$sceDelegateProvider` provider allows developers to configure the {@link ng.$sceDelegate
- * $sceDelegate service}, used as a delegate for {@link ng.$sce Strict Contextual Escaping (SCE)}.
- *
- * The `$sceDelegateProvider` allows one to get/set the whitelists and blacklists used to ensure
- * that the URLs used for sourcing AngularJS templates and other script-running URLs are safe (all
- * places that use the `$sce.RESOURCE_URL` context). See
- * {@link ng.$sceDelegateProvider#resourceUrlWhitelist $sceDelegateProvider.resourceUrlWhitelist}
- * and
- * {@link ng.$sceDelegateProvider#resourceUrlBlacklist $sceDelegateProvider.resourceUrlBlacklist},
- *
- * For the general details about this service in Angular, read the main page for {@link ng.$sce
- * Strict Contextual Escaping (SCE)}.
- *
- * **Example**: Consider the following case.
- * **Note:** the default whitelist of 'self' is not recommended if your app shares its origin
- * with other apps! It is a good idea to limit it to only your application's directory.
+ * For an overview of this service and the functionnality it provides in AngularJS, see the main
+ * page for {@link ng.$sce SCE}. The current page is targeted for developers who need to alter how
+ * SCE works in their application, which shouldn't be needed in most cases.
+ *
+ *
+ * AngularJS strongly relies on contextual escaping for the security of bindings: disabling or
+ * modifying this might cause cross site scripting (XSS) vulnerabilities. For libraries owners,
+ * changes to this service will also influence users, so be extra careful and document your changes.
*
+ *
+ * Typically, you would configure or override the {@link ng.$sceDelegate $sceDelegate} instead of
+ * the `$sce` service to customize the way Strict Contextual Escaping works in AngularJS. This is
+ * because, while the `$sce` provides numerous shorthand methods, etc., you really only need to
+ * override 3 core functions (`trustAs`, `getTrusted` and `valueOf`) to replace the way things
+ * work because `$sce` delegates to `$sceDelegate` for these operations.
+ *
+ * Refer {@link ng.$sceDelegateProvider $sceDelegateProvider} to configure this service.
+ *
+ * The default instance of `$sceDelegate` should work out of the box with little pain. While you
+ * can override it completely to change the behavior of `$sce`, the common case would
+ * involve configuring the {@link ng.$sceDelegateProvider $sceDelegateProvider} instead by setting
+ * your own whitelists and blacklists for trusting URLs used for loading AngularJS resources such as
+ * templates. Refer {@link ng.$sceDelegateProvider#resourceUrlWhitelist
+ * $sceDelegateProvider.resourceUrlWhitelist} and {@link
+ * ng.$sceDelegateProvider#resourceUrlBlacklist $sceDelegateProvider.resourceUrlBlacklist}
*/
- this.resourceUrlWhitelist = function(value) {
- if (arguments.length) {
- resourceUrlWhitelist = adjustMatchers(value);
- }
- return resourceUrlWhitelist;
- };
/**
- * @ngdoc method
- * @name $sceDelegateProvider#resourceUrlBlacklist
- * @kind function
+ * @ngdoc provider
+ * @name $sceDelegateProvider
+ * @this
+ *
+ * @description
*
- * @param {Array=} blacklist When provided, replaces the resourceUrlBlacklist with the value
- * provided. This must be an array or null. A snapshot of this array is used so further
- * changes to the array are ignored.
- * Follow {@link ng.$sce#resourceUrlPatternItem this link} for a description of the items
- * allowed in this array.
- * The typical usage for the blacklist is to **block
- * [open redirects](http://cwe.mitre.org/data/definitions/601.html)** served by your domain as
- * these would otherwise be trusted but actually return content from the redirected domain.
- *
- * Finally, **the blacklist overrides the whitelist** and has the final say.
+ * The `$sceDelegateProvider` provider allows developers to configure the {@link ng.$sceDelegate
+ * $sceDelegate service}, used as a delegate for {@link ng.$sce Strict Contextual Escaping (SCE)}.
*
- * @return {Array} The currently set blacklist array.
+ * The `$sceDelegateProvider` allows one to get/set the whitelists and blacklists used to ensure
+ * that the URLs used for sourcing AngularJS templates and other script-running URLs are safe (all
+ * places that use the `$sce.RESOURCE_URL` context). See
+ * {@link ng.$sceDelegateProvider#resourceUrlWhitelist $sceDelegateProvider.resourceUrlWhitelist}
+ * and
+ * {@link ng.$sceDelegateProvider#resourceUrlBlacklist $sceDelegateProvider.resourceUrlBlacklist},
*
- * @description
- * Sets/Gets the blacklist of trusted resource URLs.
+ * For the general details about this service in Angular, read the main page for {@link ng.$sce
+ * Strict Contextual Escaping (SCE)}.
*
- * The **default value** when no whitelist has been explicitly set is the empty array (i.e. there
- * is no blacklist.)
+ * **Example**: Consider the following case.
+ *
+ * - your app is hosted at url `http://myapp.example.com/`
+ * - but some of your templates are hosted on other domains you control such as
+ * `http://srv01.assets.example.com/`, `http://srv02.assets.example.com/`, etc.
+ * - and you have an open redirect at `http://myapp.example.com/clickThru?...`.
+ *
+ * Here is what a secure configuration for this scenario might look like:
+ *
+ * ```
+ * angular.module('myApp', []).config(function($sceDelegateProvider) {
+ * $sceDelegateProvider.resourceUrlWhitelist([
+ * // Allow same origin resource loads.
+ * 'self',
+ * // Allow loading from our assets domain. Notice the difference between * and **.
+ * 'http://srv*.assets.example.com/**'
+ * ]);
+ *
+ * // The blacklist overrides the whitelist so the open redirect here is blocked.
+ * $sceDelegateProvider.resourceUrlBlacklist([
+ * 'http://myapp.example.com/clickThru**'
+ * ]);
+ * });
+ * ```
+ * Note that an empty whitelist will block every resource URL from being loaded, and will require
+ * you to manually mark each one as trusted with `$sce.trustAsResourceUrl`. However, templates
+ * requested by {@link ng.$templateRequest $templateRequest} that are present in
+ * {@link ng.$templateCache $templateCache} will not go through this check. If you have a mechanism
+ * to populate your templates in that cache at config time, then it is a good idea to remove 'self'
+ * from that whitelist. This helps to mitigate the security impact of certain types of issues, like
+ * for instance attacker-controlled `ng-includes`.
*/
- this.resourceUrlBlacklist = function(value) {
- if (arguments.length) {
- resourceUrlBlacklist = adjustMatchers(value);
- }
- return resourceUrlBlacklist;
- };
+ function $SceDelegateProvider() {
+ this.SCE_CONTEXTS = SCE_CONTEXTS;
- this.$get = ['$injector', function($injector) {
+ // Resource URLs can also be trusted by policy.
+ var resourceUrlWhitelist = ['self'],
+ resourceUrlBlacklist = [];
- var htmlSanitizer = function htmlSanitizer(html) {
- throw $sceMinErr('unsafe', 'Attempting to use an unsafe value in a safe context.');
+ /**
+ * @ngdoc method
+ * @name $sceDelegateProvider#resourceUrlWhitelist
+ * @kind function
+ *
+ * @param {Array=} whitelist When provided, replaces the resourceUrlWhitelist with the value
+ * provided. This must be an array or null. A snapshot of this array is used so further
+ * changes to the array are ignored.
+ * Follow {@link ng.$sce#resourceUrlPatternItem this link} for a description of the items
+ * allowed in this array.
+ *
+ * @return {Array} The currently set whitelist array.
+ *
+ * @description
+ * Sets/Gets the whitelist of trusted resource URLs.
+ *
+ * The **default value** when no whitelist has been explicitly set is `['self']` allowing only
+ * same origin resource requests.
+ *
+ *
+ * **Note:** the default whitelist of 'self' is not recommended if your app shares its origin
+ * with other apps! It is a good idea to limit it to only your application's directory.
+ *
+ */
+ this.resourceUrlWhitelist = function (value) {
+ if (arguments.length) {
+ resourceUrlWhitelist = adjustMatchers(value);
+ }
+ return resourceUrlWhitelist;
};
- if ($injector.has('$sanitize')) {
- htmlSanitizer = $injector.get('$sanitize');
- }
+ /**
+ * @ngdoc method
+ * @name $sceDelegateProvider#resourceUrlBlacklist
+ * @kind function
+ *
+ * @param {Array=} blacklist When provided, replaces the resourceUrlBlacklist with the value
+ * provided. This must be an array or null. A snapshot of this array is used so further
+ * changes to the array are ignored.
+ * Follow {@link ng.$sce#resourceUrlPatternItem this link} for a description of the items
+ * allowed in this array.
+ * The typical usage for the blacklist is to **block
+ * [open redirects](http://cwe.mitre.org/data/definitions/601.html)** served by your domain as
+ * these would otherwise be trusted but actually return content from the redirected domain.
+ *
+ * Finally, **the blacklist overrides the whitelist** and has the final say.
+ *
+ * @return {Array} The currently set blacklist array.
+ *
+ * @description
+ * Sets/Gets the blacklist of trusted resource URLs.
+ *
+ * The **default value** when no whitelist has been explicitly set is the empty array (i.e. there
+ * is no blacklist.)
+ */
+
+ this.resourceUrlBlacklist = function (value) {
+ if (arguments.length) {
+ resourceUrlBlacklist = adjustMatchers(value);
+ }
+ return resourceUrlBlacklist;
+ };
+ this.$get = ['$injector', function ($injector) {
- function matchUrl(matcher, parsedUrl) {
- if (matcher === 'self') {
- return urlIsSameOrigin(parsedUrl);
- } else {
- // definitely a regex. See adjustMatchers()
- return !!matcher.exec(parsedUrl.href);
+ var htmlSanitizer = function htmlSanitizer(html) {
+ throw $sceMinErr('unsafe', 'Attempting to use an unsafe value in a safe context.');
+ };
+
+ if ($injector.has('$sanitize')) {
+ htmlSanitizer = $injector.get('$sanitize');
}
- }
- function isResourceUrlAllowedByPolicy(url) {
- var parsedUrl = urlResolve(url.toString());
- var i, n, allowed = false;
- // Ensure that at least one item from the whitelist allows this url.
- for (i = 0, n = resourceUrlWhitelist.length; i < n; i++) {
- if (matchUrl(resourceUrlWhitelist[i], parsedUrl)) {
- allowed = true;
- break;
+ function matchUrl(matcher, parsedUrl) {
+ if (matcher === 'self') {
+ return urlIsSameOrigin(parsedUrl);
+ } else {
+ // definitely a regex. See adjustMatchers()
+ return !!matcher.exec(parsedUrl.href);
}
}
- if (allowed) {
- // Ensure that no item from the blacklist blocked this url.
- for (i = 0, n = resourceUrlBlacklist.length; i < n; i++) {
- if (matchUrl(resourceUrlBlacklist[i], parsedUrl)) {
+
+ function isResourceUrlAllowedByPolicy(url) {
+ var parsedUrl = urlResolve(url.toString());
+ var i,
+ n,
allowed = false;
+ // Ensure that at least one item from the whitelist allows this url.
+ for (i = 0, n = resourceUrlWhitelist.length; i < n; i++) {
+ if (matchUrl(resourceUrlWhitelist[i], parsedUrl)) {
+ allowed = true;
break;
}
}
+ if (allowed) {
+ // Ensure that no item from the blacklist blocked this url.
+ for (i = 0, n = resourceUrlBlacklist.length; i < n; i++) {
+ if (matchUrl(resourceUrlBlacklist[i], parsedUrl)) {
+ allowed = false;
+ break;
+ }
+ }
+ }
+ return allowed;
}
- return allowed;
- }
- function generateHolderType(Base) {
- var holderType = function TrustedValueHolderType(trustedValue) {
- this.$$unwrapTrustedValue = function() {
- return trustedValue;
+ function generateHolderType(Base) {
+ var holderType = function TrustedValueHolderType(trustedValue) {
+ this.$$unwrapTrustedValue = function () {
+ return trustedValue;
+ };
};
- };
- if (Base) {
- holderType.prototype = new Base();
+ if (Base) {
+ holderType.prototype = new Base();
+ }
+ holderType.prototype.valueOf = function sceValueOf() {
+ return this.$$unwrapTrustedValue();
+ };
+ holderType.prototype.toString = function sceToString() {
+ return this.$$unwrapTrustedValue().toString();
+ };
+ return holderType;
}
- holderType.prototype.valueOf = function sceValueOf() {
- return this.$$unwrapTrustedValue();
- };
- holderType.prototype.toString = function sceToString() {
- return this.$$unwrapTrustedValue().toString();
- };
- return holderType;
- }
- var trustedValueHolderBase = generateHolderType(),
- byType = {};
+ var trustedValueHolderBase = generateHolderType(),
+ byType = {};
- byType[SCE_CONTEXTS.HTML] = generateHolderType(trustedValueHolderBase);
- byType[SCE_CONTEXTS.CSS] = generateHolderType(trustedValueHolderBase);
- byType[SCE_CONTEXTS.URL] = generateHolderType(trustedValueHolderBase);
- byType[SCE_CONTEXTS.JS] = generateHolderType(trustedValueHolderBase);
- byType[SCE_CONTEXTS.RESOURCE_URL] = generateHolderType(byType[SCE_CONTEXTS.URL]);
+ byType[SCE_CONTEXTS.HTML] = generateHolderType(trustedValueHolderBase);
+ byType[SCE_CONTEXTS.CSS] = generateHolderType(trustedValueHolderBase);
+ byType[SCE_CONTEXTS.URL] = generateHolderType(trustedValueHolderBase);
+ byType[SCE_CONTEXTS.JS] = generateHolderType(trustedValueHolderBase);
+ byType[SCE_CONTEXTS.RESOURCE_URL] = generateHolderType(byType[SCE_CONTEXTS.URL]);
- /**
- * @ngdoc method
- * @name $sceDelegate#trustAs
- *
- * @description
- * Returns a trusted representation of the parameter for the specified context. This trusted
- * object will later on be used as-is, without any security check, by bindings or directives
- * that require this security context.
- * For instance, marking a string as trusted for the `$sce.HTML` context will entirely bypass
- * the potential `$sanitize` call in corresponding `$sce.HTML` bindings or directives, such as
- * `ng-bind-html`. Note that in most cases you won't need to call this function: if you have the
- * sanitizer loaded, passing the value itself will render all the HTML that does not pose a
- * security risk.
- *
- * See {@link ng.$sceDelegate#getTrusted getTrusted} for the function that will consume those
- * trusted values, and {@link ng.$sce $sce} for general documentation about strict contextual
- * escaping.
- *
- * @param {string} type The context in which this value is safe for use, e.g. `$sce.URL`,
- * `$sce.RESOURCE_URL`, `$sce.HTML`, `$sce.JS` or `$sce.CSS`.
- *
- * @param {*} value The value that should be considered trusted.
- * @return {*} A trusted representation of value, that can be used in the given context.
- */
- function trustAs(type, trustedValue) {
- var Constructor = (byType.hasOwnProperty(type) ? byType[type] : null);
- if (!Constructor) {
- throw $sceMinErr('icontext',
- 'Attempted to trust a value in invalid context. Context: {0}; Value: {1}',
- type, trustedValue);
- }
- if (trustedValue === null || isUndefined(trustedValue) || trustedValue === '') {
- return trustedValue;
- }
- // All the current contexts in SCE_CONTEXTS happen to be strings. In order to avoid trusting
- // mutable objects, we ensure here that the value passed in is actually a string.
- if (typeof trustedValue !== 'string') {
- throw $sceMinErr('itype',
- 'Attempted to trust a non-string value in a content requiring a string: Context: {0}',
- type);
+ /**
+ * @ngdoc method
+ * @name $sceDelegate#trustAs
+ *
+ * @description
+ * Returns a trusted representation of the parameter for the specified context. This trusted
+ * object will later on be used as-is, without any security check, by bindings or directives
+ * that require this security context.
+ * For instance, marking a string as trusted for the `$sce.HTML` context will entirely bypass
+ * the potential `$sanitize` call in corresponding `$sce.HTML` bindings or directives, such as
+ * `ng-bind-html`. Note that in most cases you won't need to call this function: if you have the
+ * sanitizer loaded, passing the value itself will render all the HTML that does not pose a
+ * security risk.
+ *
+ * See {@link ng.$sceDelegate#getTrusted getTrusted} for the function that will consume those
+ * trusted values, and {@link ng.$sce $sce} for general documentation about strict contextual
+ * escaping.
+ *
+ * @param {string} type The context in which this value is safe for use, e.g. `$sce.URL`,
+ * `$sce.RESOURCE_URL`, `$sce.HTML`, `$sce.JS` or `$sce.CSS`.
+ *
+ * @param {*} value The value that should be considered trusted.
+ * @return {*} A trusted representation of value, that can be used in the given context.
+ */
+ function trustAs(type, trustedValue) {
+ var Constructor = byType.hasOwnProperty(type) ? byType[type] : null;
+ if (!Constructor) {
+ throw $sceMinErr('icontext', 'Attempted to trust a value in invalid context. Context: {0}; Value: {1}', type, trustedValue);
+ }
+ if (trustedValue === null || isUndefined(trustedValue) || trustedValue === '') {
+ return trustedValue;
+ }
+ // All the current contexts in SCE_CONTEXTS happen to be strings. In order to avoid trusting
+ // mutable objects, we ensure here that the value passed in is actually a string.
+ if (typeof trustedValue !== 'string') {
+ throw $sceMinErr('itype', 'Attempted to trust a non-string value in a content requiring a string: Context: {0}', type);
+ }
+ return new Constructor(trustedValue);
}
- return new Constructor(trustedValue);
- }
- /**
- * @ngdoc method
- * @name $sceDelegate#valueOf
- *
- * @description
- * If the passed parameter had been returned by a prior call to {@link ng.$sceDelegate#trustAs
- * `$sceDelegate.trustAs`}, returns the value that had been passed to {@link
- * ng.$sceDelegate#trustAs `$sceDelegate.trustAs`}.
- *
- * If the passed parameter is not a value that had been returned by {@link
- * ng.$sceDelegate#trustAs `$sceDelegate.trustAs`}, it must be returned as-is.
- *
- * @param {*} value The result of a prior {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs`}
- * call or anything else.
- * @return {*} The `value` that was originally provided to {@link ng.$sceDelegate#trustAs
- * `$sceDelegate.trustAs`} if `value` is the result of such a call. Otherwise, returns
- * `value` unchanged.
- */
- function valueOf(maybeTrusted) {
- if (maybeTrusted instanceof trustedValueHolderBase) {
- return maybeTrusted.$$unwrapTrustedValue();
- } else {
- return maybeTrusted;
+ /**
+ * @ngdoc method
+ * @name $sceDelegate#valueOf
+ *
+ * @description
+ * If the passed parameter had been returned by a prior call to {@link ng.$sceDelegate#trustAs
+ * `$sceDelegate.trustAs`}, returns the value that had been passed to {@link
+ * ng.$sceDelegate#trustAs `$sceDelegate.trustAs`}.
+ *
+ * If the passed parameter is not a value that had been returned by {@link
+ * ng.$sceDelegate#trustAs `$sceDelegate.trustAs`}, it must be returned as-is.
+ *
+ * @param {*} value The result of a prior {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs`}
+ * call or anything else.
+ * @return {*} The `value` that was originally provided to {@link ng.$sceDelegate#trustAs
+ * `$sceDelegate.trustAs`} if `value` is the result of such a call. Otherwise, returns
+ * `value` unchanged.
+ */
+ function valueOf(maybeTrusted) {
+ if (maybeTrusted instanceof trustedValueHolderBase) {
+ return maybeTrusted.$$unwrapTrustedValue();
+ } else {
+ return maybeTrusted;
+ }
}
- }
- /**
- * @ngdoc method
- * @name $sceDelegate#getTrusted
- *
- * @description
- * Takes any input, and either returns a value that's safe to use in the specified context, or
- * throws an exception.
- *
- * In practice, there are several cases. When given a string, this function runs checks
- * and sanitization to make it safe without prior assumptions. When given the result of a {@link
- * ng.$sceDelegate#trustAs `$sceDelegate.trustAs`} call, it returns the originally supplied
- * value if that value's context is valid for this call's context. Finally, this function can
- * also throw when there is no way to turn `maybeTrusted` in a safe value (e.g., no sanitization
- * is available or possible.)
- *
- * @param {string} type The context in which this value is to be used (such as `$sce.HTML`).
- * @param {*} maybeTrusted The result of a prior {@link ng.$sceDelegate#trustAs
- * `$sceDelegate.trustAs`} call, or anything else (which will not be considered trusted.)
- * @return {*} A version of the value that's safe to use in the given context, or throws an
- * exception if this is impossible.
- */
- function getTrusted(type, maybeTrusted) {
- if (maybeTrusted === null || isUndefined(maybeTrusted) || maybeTrusted === '') {
- return maybeTrusted;
- }
- var constructor = (byType.hasOwnProperty(type) ? byType[type] : null);
- // If maybeTrusted is a trusted class instance or subclass instance, then unwrap and return
- // as-is.
- if (constructor && maybeTrusted instanceof constructor) {
- return maybeTrusted.$$unwrapTrustedValue();
- }
- // Otherwise, if we get here, then we may either make it safe, or throw an exception. This
- // depends on the context: some are sanitizatible (HTML), some use whitelists (RESOURCE_URL),
- // some are impossible to do (JS). This step isn't implemented for CSS and URL, as AngularJS
- // has no corresponding sinks.
- if (type === SCE_CONTEXTS.RESOURCE_URL) {
- // RESOURCE_URL uses a whitelist.
- if (isResourceUrlAllowedByPolicy(maybeTrusted)) {
+ /**
+ * @ngdoc method
+ * @name $sceDelegate#getTrusted
+ *
+ * @description
+ * Takes any input, and either returns a value that's safe to use in the specified context, or
+ * throws an exception.
+ *
+ * In practice, there are several cases. When given a string, this function runs checks
+ * and sanitization to make it safe without prior assumptions. When given the result of a {@link
+ * ng.$sceDelegate#trustAs `$sceDelegate.trustAs`} call, it returns the originally supplied
+ * value if that value's context is valid for this call's context. Finally, this function can
+ * also throw when there is no way to turn `maybeTrusted` in a safe value (e.g., no sanitization
+ * is available or possible.)
+ *
+ * @param {string} type The context in which this value is to be used (such as `$sce.HTML`).
+ * @param {*} maybeTrusted The result of a prior {@link ng.$sceDelegate#trustAs
+ * `$sceDelegate.trustAs`} call, or anything else (which will not be considered trusted.)
+ * @return {*} A version of the value that's safe to use in the given context, or throws an
+ * exception if this is impossible.
+ */
+ function getTrusted(type, maybeTrusted) {
+ if (maybeTrusted === null || isUndefined(maybeTrusted) || maybeTrusted === '') {
return maybeTrusted;
- } else {
- throw $sceMinErr('insecurl',
- 'Blocked loading resource from url not allowed by $sceDelegate policy. URL: {0}',
- maybeTrusted.toString());
}
- } else if (type === SCE_CONTEXTS.HTML) {
- // htmlSanitizer throws its own error when no sanitizer is available.
- return htmlSanitizer(maybeTrusted);
+ var constructor = byType.hasOwnProperty(type) ? byType[type] : null;
+ // If maybeTrusted is a trusted class instance or subclass instance, then unwrap and return
+ // as-is.
+ if (constructor && maybeTrusted instanceof constructor) {
+ return maybeTrusted.$$unwrapTrustedValue();
+ }
+ // Otherwise, if we get here, then we may either make it safe, or throw an exception. This
+ // depends on the context: some are sanitizatible (HTML), some use whitelists (RESOURCE_URL),
+ // some are impossible to do (JS). This step isn't implemented for CSS and URL, as AngularJS
+ // has no corresponding sinks.
+ if (type === SCE_CONTEXTS.RESOURCE_URL) {
+ // RESOURCE_URL uses a whitelist.
+ if (isResourceUrlAllowedByPolicy(maybeTrusted)) {
+ return maybeTrusted;
+ } else {
+ throw $sceMinErr('insecurl', 'Blocked loading resource from url not allowed by $sceDelegate policy. URL: {0}', maybeTrusted.toString());
+ }
+ } else if (type === SCE_CONTEXTS.HTML) {
+ // htmlSanitizer throws its own error when no sanitizer is available.
+ return htmlSanitizer(maybeTrusted);
+ }
+ // Default error when the $sce service has no way to make the input safe.
+ throw $sceMinErr('unsafe', 'Attempting to use an unsafe value in a safe context.');
}
- // Default error when the $sce service has no way to make the input safe.
- throw $sceMinErr('unsafe', 'Attempting to use an unsafe value in a safe context.');
- }
-
- return { trustAs: trustAs,
- getTrusted: getTrusted,
- valueOf: valueOf };
- }];
-}
-
-
-/**
- * @ngdoc provider
- * @name $sceProvider
- * @this
- *
- * @description
- *
- * The $sceProvider provider allows developers to configure the {@link ng.$sce $sce} service.
- * - enable/disable Strict Contextual Escaping (SCE) in a module
- * - override the default implementation with a custom delegate
- *
- * Read more about {@link ng.$sce Strict Contextual Escaping (SCE)}.
- */
-
-/**
- * @ngdoc service
- * @name $sce
- * @kind function
- *
- * @description
- *
- * `$sce` is a service that provides Strict Contextual Escaping services to AngularJS.
- *
- * ## Strict Contextual Escaping
- *
- * Strict Contextual Escaping (SCE) is a mode in which AngularJS constrains bindings to only render
- * trusted values. Its goal is to assist in writing code in a way that (a) is secure by default, and
- * (b) makes auditing for security vulnerabilities such as XSS, clickjacking, etc. a lot easier.
- *
- * ### Overview
- *
- * To systematically block XSS security bugs, AngularJS treats all values as untrusted by default in
- * HTML or sensitive URL bindings. When binding untrusted values, AngularJS will automatically
- * run security checks on them (sanitizations, whitelists, depending on context), or throw when it
- * cannot guarantee the security of the result. That behavior depends strongly on contexts: HTML
- * can be sanitized, but template URLs cannot, for instance.
- *
- * To illustrate this, consider the `ng-bind-html` directive. It renders its value directly as HTML:
- * we call that the *context*. When given an untrusted input, AngularJS will attempt to sanitize it
- * before rendering if a sanitizer is available, and throw otherwise. To bypass sanitization and
- * render the input as-is, you will need to mark it as trusted for that context before attempting
- * to bind it.
- *
- * As of version 1.2, AngularJS ships with SCE enabled by default.
- *
- * ### In practice
- *
- * Here's an example of a binding in a privileged context:
- *
- * ```
- *
- *
- * ```
- *
- * Notice that `ng-bind-html` is bound to `userHtml` controlled by the user. With SCE
- * disabled, this application allows the user to render arbitrary HTML into the DIV, which would
- * be an XSS security bug. In a more realistic example, one may be rendering user comments, blog
- * articles, etc. via bindings. (HTML is just one example of a context where rendering user
- * controlled input creates security vulnerabilities.)
- *
- * For the case of HTML, you might use a library, either on the client side, or on the server side,
- * to sanitize unsafe HTML before binding to the value and rendering it in the document.
- *
- * How would you ensure that every place that used these types of bindings was bound to a value that
- * was sanitized by your library (or returned as safe for rendering by your server?) How can you
- * ensure that you didn't accidentally delete the line that sanitized the value, or renamed some
- * properties/fields and forgot to update the binding to the sanitized value?
- *
- * To be secure by default, AngularJS makes sure bindings go through that sanitization, or
- * any similar validation process, unless there's a good reason to trust the given value in this
- * context. That trust is formalized with a function call. This means that as a developer, you
- * can assume all untrusted bindings are safe. Then, to audit your code for binding security issues,
- * you just need to ensure the values you mark as trusted indeed are safe - because they were
- * received from your server, sanitized by your library, etc. You can organize your codebase to
- * help with this - perhaps allowing only the files in a specific directory to do this.
- * Ensuring that the internal API exposed by that code doesn't markup arbitrary values as safe then
- * becomes a more manageable task.
- *
- * In the case of AngularJS' SCE service, one uses {@link ng.$sce#trustAs $sce.trustAs}
- * (and shorthand methods such as {@link ng.$sce#trustAsHtml $sce.trustAsHtml}, etc.) to
- * build the trusted versions of your values.
- *
- * ### How does it work?
- *
- * In privileged contexts, directives and code will bind to the result of {@link ng.$sce#getTrusted
- * $sce.getTrusted(context, value)} rather than to the value directly. Think of this function as
- * a way to enforce the required security context in your data sink. Directives use {@link
- * ng.$sce#parseAs $sce.parseAs} rather than `$parse` to watch attribute bindings, which performs
- * the {@link ng.$sce#getTrusted $sce.getTrusted} behind the scenes on non-constant literals. Also,
- * when binding without directives, AngularJS will understand the context of your bindings
- * automatically.
- *
- * As an example, {@link ng.directive:ngBindHtml ngBindHtml} uses {@link
- * ng.$sce#parseAsHtml $sce.parseAsHtml(binding expression)}. Here's the actual code (slightly
- * simplified):
- *
- * ```
- * var ngBindHtmlDirective = ['$sce', function($sce) {
- * return function(scope, element, attr) {
- * scope.$watch($sce.parseAsHtml(attr.ngBindHtml), function(value) {
- * element.html(value || '');
- * });
- * };
- * }];
- * ```
- *
- * ### Impact on loading templates
- *
- * This applies both to the {@link ng.directive:ngInclude `ng-include`} directive as well as
- * `templateUrl`'s specified by {@link guide/directive directives}.
- *
- * By default, Angular only loads templates from the same domain and protocol as the application
- * document. This is done by calling {@link ng.$sce#getTrustedResourceUrl
- * $sce.getTrustedResourceUrl} on the template URL. To load templates from other domains and/or
- * protocols, you may either {@link ng.$sceDelegateProvider#resourceUrlWhitelist whitelist
- * them} or {@link ng.$sce#trustAsResourceUrl wrap it} into a trusted value.
- *
- * *Please note*:
- * The browser's
- * [Same Origin Policy](https://code.google.com/p/browsersec/wiki/Part2#Same-origin_policy_for_XMLHttpRequest)
- * and [Cross-Origin Resource Sharing (CORS)](http://www.w3.org/TR/cors/)
- * policy apply in addition to this and may further restrict whether the template is successfully
- * loaded. This means that without the right CORS policy, loading templates from a different domain
- * won't work on all browsers. Also, loading templates from `file://` URL does not work on some
- * browsers.
- *
- * ### This feels like too much overhead
- *
- * It's important to remember that SCE only applies to interpolation expressions.
- *
- * If your expressions are constant literals, they're automatically trusted and you don't need to
- * call `$sce.trustAs` on them (e.g.
- * `
`) just works. The `$sceDelegate` will
- * also use the `$sanitize` service if it is available when binding untrusted values to
- * `$sce.HTML` context. AngularJS provides an implementation in `angular-sanitize.js`, and if you
- * wish to use it, you will also need to depend on the {@link ngSanitize `ngSanitize`} module in
- * your application.
- *
- * The included {@link ng.$sceDelegate $sceDelegate} comes with sane defaults to allow you to load
- * templates in `ng-include` from your application's domain without having to even know about SCE.
- * It blocks loading templates from other domains or loading templates over http from an https
- * served document. You can change these by setting your own custom {@link
- * ng.$sceDelegateProvider#resourceUrlWhitelist whitelists} and {@link
- * ng.$sceDelegateProvider#resourceUrlBlacklist blacklists} for matching such URLs.
- *
- * This significantly reduces the overhead. It is far easier to pay the small overhead and have an
- * application that's secure and can be audited to verify that with much more ease than bolting
- * security onto an application later.
- *
- *
- * ### What trusted context types are supported?
- *
- * | Context | Notes |
- * |---------------------|----------------|
- * | `$sce.HTML` | For HTML that's safe to source into the application. The {@link ng.directive:ngBindHtml ngBindHtml} directive uses this context for bindings. If an unsafe value is encountered, and the {@link ngSanitize.$sanitize $sanitize} service is available (implemented by the {@link ngSanitize ngSanitize} module) this will sanitize the value instead of throwing an error. |
- * | `$sce.CSS` | For CSS that's safe to source into the application. Currently, no bindings require this context. Feel free to use it in your own directives. |
- * | `$sce.URL` | For URLs that are safe to follow as links. Currently unused (`
Note that `$sce.RESOURCE_URL` makes a stronger statement about the URL than `$sce.URL` does (it's not just the URL that matters, but also what is at the end of it), and therefore contexts requiring values trusted for `$sce.RESOURCE_URL` can be used anywhere that values trusted for `$sce.URL` are required. |
- * | `$sce.JS` | For JavaScript that is safe to execute in your application's context. Currently, no bindings require this context. Feel free to use it in your own directives. |
- *
- *
- * Be aware that `a[href]` and `img[src]` automatically sanitize their URLs and do not pass them
- * through {@link ng.$sce#getTrusted $sce.getTrusted}. There's no CSS-, URL-, or JS-context bindings
- * in AngularJS currently, so their corresponding `$sce.trustAs` functions aren't useful yet. This
- * might evolve.
- *
- * ### Format of items in {@link ng.$sceDelegateProvider#resourceUrlWhitelist resourceUrlWhitelist}/{@link ng.$sceDelegateProvider#resourceUrlBlacklist Blacklist}
- *
- * Each element in these arrays must be one of the following:
- *
- * - **'self'**
- * - The special **string**, `'self'`, can be used to match against all URLs of the **same
- * domain** as the application document using the **same protocol**.
- * - **String** (except the special value `'self'`)
- * - The string is matched against the full *normalized / absolute URL* of the resource
- * being tested (substring matches are not good enough.)
- * - There are exactly **two wildcard sequences** - `*` and `**`. All other characters
- * match themselves.
- * - `*`: matches zero or more occurrences of any character other than one of the following 6
- * characters: '`:`', '`/`', '`.`', '`?`', '`&`' and '`;`'. It's a useful wildcard for use
- * in a whitelist.
- * - `**`: matches zero or more occurrences of *any* character. As such, it's not
- * appropriate for use in a scheme, domain, etc. as it would match too much. (e.g.
- * http://**.example.com/ would match http://evil.com/?ignore=.example.com/ and that might
- * not have been the intention.) Its usage at the very end of the path is ok. (e.g.
- * http://foo.example.com/templates/**).
- * - **RegExp** (*see caveat below*)
- * - *Caveat*: While regular expressions are powerful and offer great flexibility, their syntax
- * (and all the inevitable escaping) makes them *harder to maintain*. It's easy to
- * accidentally introduce a bug when one updates a complex expression (imho, all regexes should
- * have good test coverage). For instance, the use of `.` in the regex is correct only in a
- * small number of cases. A `.` character in the regex used when matching the scheme or a
- * subdomain could be matched against a `:` or literal `.` that was likely not intended. It
- * is highly recommended to use the string patterns and only fall back to regular expressions
- * as a last resort.
- * - The regular expression must be an instance of RegExp (i.e. not a string.) It is
- * matched against the **entire** *normalized / absolute URL* of the resource being tested
- * (even when the RegExp did not have the `^` and `$` codes.) In addition, any flags
- * present on the RegExp (such as multiline, global, ignoreCase) are ignored.
- * - If you are generating your JavaScript from some other templating engine (not
- * recommended, e.g. in issue [#4006](https://github.com/angular/angular.js/issues/4006)),
- * remember to escape your regular expression (and be aware that you might need more than
- * one level of escaping depending on your templating engine and the way you interpolated
- * the value.) Do make use of your platform's escaping mechanism as it might be good
- * enough before coding your own. E.g. Ruby has
- * [Regexp.escape(str)](http://www.ruby-doc.org/core-2.0.0/Regexp.html#method-c-escape)
- * and Python has [re.escape](http://docs.python.org/library/re.html#re.escape).
- * Javascript lacks a similar built in function for escaping. Take a look at Google
- * Closure library's [goog.string.regExpEscape(s)](
- * http://docs.closure-library.googlecode.com/git/closure_goog_string_string.js.source.html#line962).
- *
- * Refer {@link ng.$sceDelegateProvider $sceDelegateProvider} for an example.
- *
- * ### Show me an example using SCE.
- *
- *
- *
- *
- *
- *
User comments
- * By default, HTML that isn't explicitly trusted (e.g. Alice's comment) is sanitized when
- * $sanitize is available. If $sanitize isn't available, this results in an error instead of an
- * exploit.
- *
- *
- * {{userComment.name}}:
- *
- *
- *
- *
- *
- *
- *
- *
- * ## Can I disable SCE completely?
- *
- * Yes, you can. However, this is strongly discouraged. SCE gives you a lot of security benefits
- * for little coding overhead. It will be much harder to take an SCE disabled application and
- * either secure it on your own or enable SCE at a later stage. It might make sense to disable SCE
- * for cases where you have a lot of existing code that was written before SCE was introduced and
- * you're migrating them a module at a time. Also do note that this is an app-wide setting, so if
- * you are writing a library, you will cause security bugs applications using it.
- *
- * That said, here's how you can completely disable SCE:
- *
- * ```
- * angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
- * // Completely disable SCE. For demonstration purposes only!
- * // Do not use in new projects or libraries.
- * $sceProvider.enabled(false);
- * });
- * ```
- *
- */
-function $SceProvider() {
- var enabled = true;
+ return { trustAs: trustAs,
+ getTrusted: getTrusted,
+ valueOf: valueOf };
+ }];
+ }
/**
- * @ngdoc method
- * @name $sceProvider#enabled
- * @kind function
- *
- * @param {boolean=} value If provided, then enables/disables SCE application-wide.
- * @return {boolean} True if SCE is enabled, false otherwise.
+ * @ngdoc provider
+ * @name $sceProvider
+ * @this
*
* @description
- * Enables/disables SCE and returns the current value.
+ *
+ * The $sceProvider provider allows developers to configure the {@link ng.$sce $sce} service.
+ * - enable/disable Strict Contextual Escaping (SCE) in a module
+ * - override the default implementation with a custom delegate
+ *
+ * Read more about {@link ng.$sce Strict Contextual Escaping (SCE)}.
*/
- this.enabled = function(value) {
- if (arguments.length) {
- enabled = !!value;
- }
- return enabled;
- };
-
- /* Design notes on the default implementation for SCE.
+ /**
+ * @ngdoc service
+ * @name $sce
+ * @kind function
*
- * The API contract for the SCE delegate
- * -------------------------------------
- * The SCE delegate object must provide the following 3 methods:
+ * @description
*
- * - trustAs(contextEnum, value)
- * This method is used to tell the SCE service that the provided value is OK to use in the
- * contexts specified by contextEnum. It must return an object that will be accepted by
- * getTrusted() for a compatible contextEnum and return this value.
+ * `$sce` is a service that provides Strict Contextual Escaping services to AngularJS.
*
- * - valueOf(value)
- * For values that were not produced by trustAs(), return them as is. For values that were
- * produced by trustAs(), return the corresponding input value to trustAs. Basically, if
- * trustAs is wrapping the given values into some type, this operation unwraps it when given
- * such a value.
+ * ## Strict Contextual Escaping
*
- * - getTrusted(contextEnum, value)
- * This function should return the a value that is safe to use in the context specified by
- * contextEnum or throw and exception otherwise.
+ * Strict Contextual Escaping (SCE) is a mode in which AngularJS constrains bindings to only render
+ * trusted values. Its goal is to assist in writing code in a way that (a) is secure by default, and
+ * (b) makes auditing for security vulnerabilities such as XSS, clickjacking, etc. a lot easier.
*
- * NOTE: This contract deliberately does NOT state that values returned by trustAs() must be
- * opaque or wrapped in some holder object. That happens to be an implementation detail. For
- * instance, an implementation could maintain a registry of all trusted objects by context. In
- * such a case, trustAs() would return the same object that was passed in. getTrusted() would
- * return the same object passed in if it was found in the registry under a compatible context or
- * throw an exception otherwise. An implementation might only wrap values some of the time based
- * on some criteria. getTrusted() might return a value and not throw an exception for special
- * constants or objects even if not wrapped. All such implementations fulfill this contract.
+ * ### Overview
*
+ * To systematically block XSS security bugs, AngularJS treats all values as untrusted by default in
+ * HTML or sensitive URL bindings. When binding untrusted values, AngularJS will automatically
+ * run security checks on them (sanitizations, whitelists, depending on context), or throw when it
+ * cannot guarantee the security of the result. That behavior depends strongly on contexts: HTML
+ * can be sanitized, but template URLs cannot, for instance.
*
- * A note on the inheritance model for SCE contexts
- * ------------------------------------------------
- * I've used inheritance and made RESOURCE_URL wrapped types a subtype of URL wrapped types. This
- * is purely an implementation details.
+ * To illustrate this, consider the `ng-bind-html` directive. It renders its value directly as HTML:
+ * we call that the *context*. When given an untrusted input, AngularJS will attempt to sanitize it
+ * before rendering if a sanitizer is available, and throw otherwise. To bypass sanitization and
+ * render the input as-is, you will need to mark it as trusted for that context before attempting
+ * to bind it.
*
- * The contract is simply this:
+ * As of version 1.2, AngularJS ships with SCE enabled by default.
*
- * getTrusted($sce.RESOURCE_URL, value) succeeding implies that getTrusted($sce.URL, value)
- * will also succeed.
+ * ### In practice
*
- * Inheritance happens to capture this in a natural way. In some future, we may not use
- * inheritance anymore. That is OK because no code outside of sce.js and sceSpecs.js would need to
- * be aware of this detail.
- */
-
- this.$get = ['$parse', '$sceDelegate', function(
- $parse, $sceDelegate) {
- // Support: IE 9-11 only
- // Prereq: Ensure that we're not running in IE<11 quirks mode. In that mode, IE < 11 allow
- // the "expression(javascript expression)" syntax which is insecure.
- if (enabled && msie < 8) {
- throw $sceMinErr('iequirks',
- 'Strict Contextual Escaping does not support Internet Explorer version < 11 in quirks ' +
- 'mode. You can fix this by adding the text to the top of your HTML ' +
- 'document. See http://docs.angularjs.org/api/ng.$sce for more information.');
- }
-
- var sce = shallowCopy(SCE_CONTEXTS);
-
- /**
- * @ngdoc method
- * @name $sce#isEnabled
- * @kind function
- *
- * @return {Boolean} True if SCE is enabled, false otherwise. If you want to set the value, you
- * have to do it at module config time on {@link ng.$sceProvider $sceProvider}.
- *
- * @description
- * Returns a boolean indicating if SCE is enabled.
- */
- sce.isEnabled = function() {
- return enabled;
- };
- sce.trustAs = $sceDelegate.trustAs;
- sce.getTrusted = $sceDelegate.getTrusted;
- sce.valueOf = $sceDelegate.valueOf;
+ * Here's an example of a binding in a privileged context:
+ *
+ * ```
+ *
+ *
+ * ```
+ *
+ * Notice that `ng-bind-html` is bound to `userHtml` controlled by the user. With SCE
+ * disabled, this application allows the user to render arbitrary HTML into the DIV, which would
+ * be an XSS security bug. In a more realistic example, one may be rendering user comments, blog
+ * articles, etc. via bindings. (HTML is just one example of a context where rendering user
+ * controlled input creates security vulnerabilities.)
+ *
+ * For the case of HTML, you might use a library, either on the client side, or on the server side,
+ * to sanitize unsafe HTML before binding to the value and rendering it in the document.
+ *
+ * How would you ensure that every place that used these types of bindings was bound to a value that
+ * was sanitized by your library (or returned as safe for rendering by your server?) How can you
+ * ensure that you didn't accidentally delete the line that sanitized the value, or renamed some
+ * properties/fields and forgot to update the binding to the sanitized value?
+ *
+ * To be secure by default, AngularJS makes sure bindings go through that sanitization, or
+ * any similar validation process, unless there's a good reason to trust the given value in this
+ * context. That trust is formalized with a function call. This means that as a developer, you
+ * can assume all untrusted bindings are safe. Then, to audit your code for binding security issues,
+ * you just need to ensure the values you mark as trusted indeed are safe - because they were
+ * received from your server, sanitized by your library, etc. You can organize your codebase to
+ * help with this - perhaps allowing only the files in a specific directory to do this.
+ * Ensuring that the internal API exposed by that code doesn't markup arbitrary values as safe then
+ * becomes a more manageable task.
+ *
+ * In the case of AngularJS' SCE service, one uses {@link ng.$sce#trustAs $sce.trustAs}
+ * (and shorthand methods such as {@link ng.$sce#trustAsHtml $sce.trustAsHtml}, etc.) to
+ * build the trusted versions of your values.
+ *
+ * ### How does it work?
+ *
+ * In privileged contexts, directives and code will bind to the result of {@link ng.$sce#getTrusted
+ * $sce.getTrusted(context, value)} rather than to the value directly. Think of this function as
+ * a way to enforce the required security context in your data sink. Directives use {@link
+ * ng.$sce#parseAs $sce.parseAs} rather than `$parse` to watch attribute bindings, which performs
+ * the {@link ng.$sce#getTrusted $sce.getTrusted} behind the scenes on non-constant literals. Also,
+ * when binding without directives, AngularJS will understand the context of your bindings
+ * automatically.
+ *
+ * As an example, {@link ng.directive:ngBindHtml ngBindHtml} uses {@link
+ * ng.$sce#parseAsHtml $sce.parseAsHtml(binding expression)}. Here's the actual code (slightly
+ * simplified):
+ *
+ * ```
+ * var ngBindHtmlDirective = ['$sce', function($sce) {
+ * return function(scope, element, attr) {
+ * scope.$watch($sce.parseAsHtml(attr.ngBindHtml), function(value) {
+ * element.html(value || '');
+ * });
+ * };
+ * }];
+ * ```
+ *
+ * ### Impact on loading templates
+ *
+ * This applies both to the {@link ng.directive:ngInclude `ng-include`} directive as well as
+ * `templateUrl`'s specified by {@link guide/directive directives}.
+ *
+ * By default, Angular only loads templates from the same domain and protocol as the application
+ * document. This is done by calling {@link ng.$sce#getTrustedResourceUrl
+ * $sce.getTrustedResourceUrl} on the template URL. To load templates from other domains and/or
+ * protocols, you may either {@link ng.$sceDelegateProvider#resourceUrlWhitelist whitelist
+ * them} or {@link ng.$sce#trustAsResourceUrl wrap it} into a trusted value.
+ *
+ * *Please note*:
+ * The browser's
+ * [Same Origin Policy](https://code.google.com/p/browsersec/wiki/Part2#Same-origin_policy_for_XMLHttpRequest)
+ * and [Cross-Origin Resource Sharing (CORS)](http://www.w3.org/TR/cors/)
+ * policy apply in addition to this and may further restrict whether the template is successfully
+ * loaded. This means that without the right CORS policy, loading templates from a different domain
+ * won't work on all browsers. Also, loading templates from `file://` URL does not work on some
+ * browsers.
+ *
+ * ### This feels like too much overhead
+ *
+ * It's important to remember that SCE only applies to interpolation expressions.
+ *
+ * If your expressions are constant literals, they're automatically trusted and you don't need to
+ * call `$sce.trustAs` on them (e.g.
+ * `
`) just works. The `$sceDelegate` will
+ * also use the `$sanitize` service if it is available when binding untrusted values to
+ * `$sce.HTML` context. AngularJS provides an implementation in `angular-sanitize.js`, and if you
+ * wish to use it, you will also need to depend on the {@link ngSanitize `ngSanitize`} module in
+ * your application.
+ *
+ * The included {@link ng.$sceDelegate $sceDelegate} comes with sane defaults to allow you to load
+ * templates in `ng-include` from your application's domain without having to even know about SCE.
+ * It blocks loading templates from other domains or loading templates over http from an https
+ * served document. You can change these by setting your own custom {@link
+ * ng.$sceDelegateProvider#resourceUrlWhitelist whitelists} and {@link
+ * ng.$sceDelegateProvider#resourceUrlBlacklist blacklists} for matching such URLs.
+ *
+ * This significantly reduces the overhead. It is far easier to pay the small overhead and have an
+ * application that's secure and can be audited to verify that with much more ease than bolting
+ * security onto an application later.
+ *
+ *
+ * ### What trusted context types are supported?
+ *
+ * | Context | Notes |
+ * |---------------------|----------------|
+ * | `$sce.HTML` | For HTML that's safe to source into the application. The {@link ng.directive:ngBindHtml ngBindHtml} directive uses this context for bindings. If an unsafe value is encountered, and the {@link ngSanitize.$sanitize $sanitize} service is available (implemented by the {@link ngSanitize ngSanitize} module) this will sanitize the value instead of throwing an error. |
+ * | `$sce.CSS` | For CSS that's safe to source into the application. Currently, no bindings require this context. Feel free to use it in your own directives. |
+ * | `$sce.URL` | For URLs that are safe to follow as links. Currently unused (`
Note that `$sce.RESOURCE_URL` makes a stronger statement about the URL than `$sce.URL` does (it's not just the URL that matters, but also what is at the end of it), and therefore contexts requiring values trusted for `$sce.RESOURCE_URL` can be used anywhere that values trusted for `$sce.URL` are required. |
+ * | `$sce.JS` | For JavaScript that is safe to execute in your application's context. Currently, no bindings require this context. Feel free to use it in your own directives. |
+ *
+ *
+ * Be aware that `a[href]` and `img[src]` automatically sanitize their URLs and do not pass them
+ * through {@link ng.$sce#getTrusted $sce.getTrusted}. There's no CSS-, URL-, or JS-context bindings
+ * in AngularJS currently, so their corresponding `$sce.trustAs` functions aren't useful yet. This
+ * might evolve.
+ *
+ * ### Format of items in {@link ng.$sceDelegateProvider#resourceUrlWhitelist resourceUrlWhitelist}/{@link ng.$sceDelegateProvider#resourceUrlBlacklist Blacklist}
+ *
+ * Each element in these arrays must be one of the following:
+ *
+ * - **'self'**
+ * - The special **string**, `'self'`, can be used to match against all URLs of the **same
+ * domain** as the application document using the **same protocol**.
+ * - **String** (except the special value `'self'`)
+ * - The string is matched against the full *normalized / absolute URL* of the resource
+ * being tested (substring matches are not good enough.)
+ * - There are exactly **two wildcard sequences** - `*` and `**`. All other characters
+ * match themselves.
+ * - `*`: matches zero or more occurrences of any character other than one of the following 6
+ * characters: '`:`', '`/`', '`.`', '`?`', '`&`' and '`;`'. It's a useful wildcard for use
+ * in a whitelist.
+ * - `**`: matches zero or more occurrences of *any* character. As such, it's not
+ * appropriate for use in a scheme, domain, etc. as it would match too much. (e.g.
+ * http://**.example.com/ would match http://evil.com/?ignore=.example.com/ and that might
+ * not have been the intention.) Its usage at the very end of the path is ok. (e.g.
+ * http://foo.example.com/templates/**).
+ * - **RegExp** (*see caveat below*)
+ * - *Caveat*: While regular expressions are powerful and offer great flexibility, their syntax
+ * (and all the inevitable escaping) makes them *harder to maintain*. It's easy to
+ * accidentally introduce a bug when one updates a complex expression (imho, all regexes should
+ * have good test coverage). For instance, the use of `.` in the regex is correct only in a
+ * small number of cases. A `.` character in the regex used when matching the scheme or a
+ * subdomain could be matched against a `:` or literal `.` that was likely not intended. It
+ * is highly recommended to use the string patterns and only fall back to regular expressions
+ * as a last resort.
+ * - The regular expression must be an instance of RegExp (i.e. not a string.) It is
+ * matched against the **entire** *normalized / absolute URL* of the resource being tested
+ * (even when the RegExp did not have the `^` and `$` codes.) In addition, any flags
+ * present on the RegExp (such as multiline, global, ignoreCase) are ignored.
+ * - If you are generating your JavaScript from some other templating engine (not
+ * recommended, e.g. in issue [#4006](https://github.com/angular/angular.js/issues/4006)),
+ * remember to escape your regular expression (and be aware that you might need more than
+ * one level of escaping depending on your templating engine and the way you interpolated
+ * the value.) Do make use of your platform's escaping mechanism as it might be good
+ * enough before coding your own. E.g. Ruby has
+ * [Regexp.escape(str)](http://www.ruby-doc.org/core-2.0.0/Regexp.html#method-c-escape)
+ * and Python has [re.escape](http://docs.python.org/library/re.html#re.escape).
+ * Javascript lacks a similar built in function for escaping. Take a look at Google
+ * Closure library's [goog.string.regExpEscape(s)](
+ * http://docs.closure-library.googlecode.com/git/closure_goog_string_string.js.source.html#line962).
+ *
+ * Refer {@link ng.$sceDelegateProvider $sceDelegateProvider} for an example.
+ *
+ * ### Show me an example using SCE.
+ *
+ *
+ *
+ *
+ *
+ *
User comments
+ * By default, HTML that isn't explicitly trusted (e.g. Alice's comment) is sanitized when
+ * $sanitize is available. If $sanitize isn't available, this results in an error instead of an
+ * exploit.
+ *
+ *
+ * {{userComment.name}}:
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * ## Can I disable SCE completely?
+ *
+ * Yes, you can. However, this is strongly discouraged. SCE gives you a lot of security benefits
+ * for little coding overhead. It will be much harder to take an SCE disabled application and
+ * either secure it on your own or enable SCE at a later stage. It might make sense to disable SCE
+ * for cases where you have a lot of existing code that was written before SCE was introduced and
+ * you're migrating them a module at a time. Also do note that this is an app-wide setting, so if
+ * you are writing a library, you will cause security bugs applications using it.
+ *
+ * That said, here's how you can completely disable SCE:
+ *
+ * ```
+ * angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
+ * // Completely disable SCE. For demonstration purposes only!
+ * // Do not use in new projects or libraries.
+ * $sceProvider.enabled(false);
+ * });
+ * ```
+ *
+ */
- if (!enabled) {
- sce.trustAs = sce.getTrusted = function(type, value) { return value; };
- sce.valueOf = identity;
- }
+ function $SceProvider() {
+ var enabled = true;
/**
* @ngdoc method
- * @name $sce#parseAs
+ * @name $sceProvider#enabled
+ * @kind function
+ *
+ * @param {boolean=} value If provided, then enables/disables SCE application-wide.
+ * @return {boolean} True if SCE is enabled, false otherwise.
*
* @description
- * Converts Angular {@link guide/expression expression} into a function. This is like {@link
- * ng.$parse $parse} and is identical when the expression is a literal constant. Otherwise, it
- * wraps the expression in a call to {@link ng.$sce#getTrusted $sce.getTrusted(*type*,
- * *result*)}
- *
- * @param {string} type The SCE context in which this result will be used.
- * @param {string} expression String expression to compile.
- * @return {function(context, locals)} A function which represents the compiled expression:
- *
- * * `context` – `{object}` – an object against which any expressions embedded in the
- * strings are evaluated against (typically a scope object).
- * * `locals` – `{object=}` – local variables context object, useful for overriding values
- * in `context`.
+ * Enables/disables SCE and returns the current value.
*/
- sce.parseAs = function sceParseAs(type, expr) {
- var parsed = $parse(expr);
- if (parsed.literal && parsed.constant) {
- return parsed;
- } else {
- return $parse(expr, function(value) {
- return sce.getTrusted(type, value);
- });
+ this.enabled = function (value) {
+ if (arguments.length) {
+ enabled = !!value;
}
+ return enabled;
};
- /**
- * @ngdoc method
- * @name $sce#trustAs
- *
- * @description
- * Delegates to {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs`}. As such, returns a
- * wrapped object that represents your value, and the trust you have in its safety for the given
- * context. AngularJS can then use that value as-is in bindings of the specified secure context.
- * This is used in bindings for `ng-bind-html`, `ng-include`, and most `src` attribute
- * interpolations. See {@link ng.$sce $sce} for strict contextual escaping.
- *
- * @param {string} type The context in which this value is safe for use, e.g. `$sce.URL`,
- * `$sce.RESOURCE_URL`, `$sce.HTML`, `$sce.JS` or `$sce.CSS`.
- *
- * @param {*} value The value that that should be considered trusted.
- * @return {*} A wrapped version of value that can be used as a trusted variant of your `value`
- * in the context you specified.
- */
-
- /**
- * @ngdoc method
- * @name $sce#trustAsHtml
+ /* Design notes on the default implementation for SCE.
*
- * @description
- * Shorthand method. `$sce.trustAsHtml(value)` →
- * {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs($sce.HTML, value)`}
+ * The API contract for the SCE delegate
+ * -------------------------------------
+ * The SCE delegate object must provide the following 3 methods:
*
- * @param {*} value The value to mark as trusted for `$sce.HTML` context.
- * @return {*} A wrapped version of value that can be used as a trusted variant of your `value`
- * in `$sce.HTML` context (like `ng-bind-html`).
- */
-
- /**
- * @ngdoc method
- * @name $sce#trustAsCss
+ * - trustAs(contextEnum, value)
+ * This method is used to tell the SCE service that the provided value is OK to use in the
+ * contexts specified by contextEnum. It must return an object that will be accepted by
+ * getTrusted() for a compatible contextEnum and return this value.
*
- * @description
- * Shorthand method. `$sce.trustAsCss(value)` →
- * {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs($sce.CSS, value)`}
+ * - valueOf(value)
+ * For values that were not produced by trustAs(), return them as is. For values that were
+ * produced by trustAs(), return the corresponding input value to trustAs. Basically, if
+ * trustAs is wrapping the given values into some type, this operation unwraps it when given
+ * such a value.
*
- * @param {*} value The value to mark as trusted for `$sce.CSS` context.
- * @return {*} A wrapped version of value that can be used as a trusted variant
- * of your `value` in `$sce.CSS` context. This context is currently unused, so there are
- * almost no reasons to use this function so far.
- */
-
- /**
- * @ngdoc method
- * @name $sce#trustAsUrl
+ * - getTrusted(contextEnum, value)
+ * This function should return the a value that is safe to use in the context specified by
+ * contextEnum or throw and exception otherwise.
*
- * @description
- * Shorthand method. `$sce.trustAsUrl(value)` →
- * {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs($sce.URL, value)`}
+ * NOTE: This contract deliberately does NOT state that values returned by trustAs() must be
+ * opaque or wrapped in some holder object. That happens to be an implementation detail. For
+ * instance, an implementation could maintain a registry of all trusted objects by context. In
+ * such a case, trustAs() would return the same object that was passed in. getTrusted() would
+ * return the same object passed in if it was found in the registry under a compatible context or
+ * throw an exception otherwise. An implementation might only wrap values some of the time based
+ * on some criteria. getTrusted() might return a value and not throw an exception for special
+ * constants or objects even if not wrapped. All such implementations fulfill this contract.
*
- * @param {*} value The value to mark as trusted for `$sce.URL` context.
- * @return {*} A wrapped version of value that can be used as a trusted variant of your `value`
- * in `$sce.URL` context. That context is currently unused, so there are almost no reasons
- * to use this function so far.
- */
-
- /**
- * @ngdoc method
- * @name $sce#trustAsResourceUrl
*
- * @description
- * Shorthand method. `$sce.trustAsResourceUrl(value)` →
- * {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs($sce.RESOURCE_URL, value)`}
+ * A note on the inheritance model for SCE contexts
+ * ------------------------------------------------
+ * I've used inheritance and made RESOURCE_URL wrapped types a subtype of URL wrapped types. This
+ * is purely an implementation details.
*
- * @param {*} value The value to mark as trusted for `$sce.RESOURCE_URL` context.
- * @return {*} A wrapped version of value that can be used as a trusted variant of your `value`
- * in `$sce.RESOURCE_URL` context (template URLs in `ng-include`, most `src` attribute
- * bindings, ...)
- */
-
- /**
- * @ngdoc method
- * @name $sce#trustAsJs
+ * The contract is simply this:
*
- * @description
- * Shorthand method. `$sce.trustAsJs(value)` →
- * {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs($sce.JS, value)`}
+ * getTrusted($sce.RESOURCE_URL, value) succeeding implies that getTrusted($sce.URL, value)
+ * will also succeed.
*
- * @param {*} value The value to mark as trusted for `$sce.JS` context.
- * @return {*} A wrapped version of value that can be used as a trusted variant of your `value`
- * in `$sce.JS` context. That context is currently unused, so there are almost no reasons to
- * use this function so far.
+ * Inheritance happens to capture this in a natural way. In some future, we may not use
+ * inheritance anymore. That is OK because no code outside of sce.js and sceSpecs.js would need to
+ * be aware of this detail.
*/
- /**
- * @ngdoc method
- * @name $sce#getTrusted
- *
- * @description
- * Delegates to {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted`}. As such,
- * takes any input, and either returns a value that's safe to use in the specified context,
- * or throws an exception. This function is aware of trusted values created by the `trustAs`
- * function and its shorthands, and when contexts are appropriate, returns the unwrapped value
- * as-is. Finally, this function can also throw when there is no way to turn `maybeTrusted` in a
- * safe value (e.g., no sanitization is available or possible.)
- *
- * @param {string} type The context in which this value is to be used.
- * @param {*} maybeTrusted The result of a prior {@link ng.$sce#trustAs
- * `$sce.trustAs`} call, or anything else (which will not be considered trusted.)
- * @return {*} A version of the value that's safe to use in the given context, or throws an
- * exception if this is impossible.
- */
+ this.$get = ['$parse', '$sceDelegate', function ($parse, $sceDelegate) {
+ // Support: IE 9-11 only
+ // Prereq: Ensure that we're not running in IE<11 quirks mode. In that mode, IE < 11 allow
+ // the "expression(javascript expression)" syntax which is insecure.
+ if (enabled && msie < 8) {
+ throw $sceMinErr('iequirks', 'Strict Contextual Escaping does not support Internet Explorer version < 11 in quirks ' + 'mode. You can fix this by adding the text to the top of your HTML ' + 'document. See http://docs.angularjs.org/api/ng.$sce for more information.');
+ }
- /**
- * @ngdoc method
- * @name $sce#getTrustedHtml
- *
- * @description
- * Shorthand method. `$sce.getTrustedHtml(value)` →
- * {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted($sce.HTML, value)`}
- *
- * @param {*} value The value to pass to `$sce.getTrusted`.
- * @return {*} The return value of `$sce.getTrusted($sce.HTML, value)`
- */
+ var sce = shallowCopy(SCE_CONTEXTS);
- /**
- * @ngdoc method
- * @name $sce#getTrustedCss
- *
- * @description
- * Shorthand method. `$sce.getTrustedCss(value)` →
- * {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted($sce.CSS, value)`}
- *
- * @param {*} value The value to pass to `$sce.getTrusted`.
- * @return {*} The return value of `$sce.getTrusted($sce.CSS, value)`
- */
+ /**
+ * @ngdoc method
+ * @name $sce#isEnabled
+ * @kind function
+ *
+ * @return {Boolean} True if SCE is enabled, false otherwise. If you want to set the value, you
+ * have to do it at module config time on {@link ng.$sceProvider $sceProvider}.
+ *
+ * @description
+ * Returns a boolean indicating if SCE is enabled.
+ */
+ sce.isEnabled = function () {
+ return enabled;
+ };
+ sce.trustAs = $sceDelegate.trustAs;
+ sce.getTrusted = $sceDelegate.getTrusted;
+ sce.valueOf = $sceDelegate.valueOf;
- /**
- * @ngdoc method
- * @name $sce#getTrustedUrl
- *
- * @description
- * Shorthand method. `$sce.getTrustedUrl(value)` →
- * {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted($sce.URL, value)`}
- *
- * @param {*} value The value to pass to `$sce.getTrusted`.
- * @return {*} The return value of `$sce.getTrusted($sce.URL, value)`
- */
+ if (!enabled) {
+ sce.trustAs = sce.getTrusted = function (type, value) {
+ return value;
+ };
+ sce.valueOf = identity;
+ }
- /**
- * @ngdoc method
- * @name $sce#getTrustedResourceUrl
- *
- * @description
- * Shorthand method. `$sce.getTrustedResourceUrl(value)` →
- * {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted($sce.RESOURCE_URL, value)`}
- *
- * @param {*} value The value to pass to `$sceDelegate.getTrusted`.
- * @return {*} The return value of `$sce.getTrusted($sce.RESOURCE_URL, value)`
- */
+ /**
+ * @ngdoc method
+ * @name $sce#parseAs
+ *
+ * @description
+ * Converts Angular {@link guide/expression expression} into a function. This is like {@link
+ * ng.$parse $parse} and is identical when the expression is a literal constant. Otherwise, it
+ * wraps the expression in a call to {@link ng.$sce#getTrusted $sce.getTrusted(*type*,
+ * *result*)}
+ *
+ * @param {string} type The SCE context in which this result will be used.
+ * @param {string} expression String expression to compile.
+ * @return {function(context, locals)} A function which represents the compiled expression:
+ *
+ * * `context` – `{object}` – an object against which any expressions embedded in the
+ * strings are evaluated against (typically a scope object).
+ * * `locals` – `{object=}` – local variables context object, useful for overriding values
+ * in `context`.
+ */
+ sce.parseAs = function sceParseAs(type, expr) {
+ var parsed = $parse(expr);
+ if (parsed.literal && parsed.constant) {
+ return parsed;
+ } else {
+ return $parse(expr, function (value) {
+ return sce.getTrusted(type, value);
+ });
+ }
+ };
- /**
- * @ngdoc method
- * @name $sce#getTrustedJs
- *
- * @description
- * Shorthand method. `$sce.getTrustedJs(value)` →
- * {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted($sce.JS, value)`}
- *
- * @param {*} value The value to pass to `$sce.getTrusted`.
- * @return {*} The return value of `$sce.getTrusted($sce.JS, value)`
- */
+ /**
+ * @ngdoc method
+ * @name $sce#trustAs
+ *
+ * @description
+ * Delegates to {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs`}. As such, returns a
+ * wrapped object that represents your value, and the trust you have in its safety for the given
+ * context. AngularJS can then use that value as-is in bindings of the specified secure context.
+ * This is used in bindings for `ng-bind-html`, `ng-include`, and most `src` attribute
+ * interpolations. See {@link ng.$sce $sce} for strict contextual escaping.
+ *
+ * @param {string} type The context in which this value is safe for use, e.g. `$sce.URL`,
+ * `$sce.RESOURCE_URL`, `$sce.HTML`, `$sce.JS` or `$sce.CSS`.
+ *
+ * @param {*} value The value that that should be considered trusted.
+ * @return {*} A wrapped version of value that can be used as a trusted variant of your `value`
+ * in the context you specified.
+ */
- /**
- * @ngdoc method
- * @name $sce#parseAsHtml
- *
- * @description
- * Shorthand method. `$sce.parseAsHtml(expression string)` →
- * {@link ng.$sce#parseAs `$sce.parseAs($sce.HTML, value)`}
- *
- * @param {string} expression String expression to compile.
- * @return {function(context, locals)} A function which represents the compiled expression:
- *
- * * `context` – `{object}` – an object against which any expressions embedded in the
- * strings are evaluated against (typically a scope object).
- * * `locals` – `{object=}` – local variables context object, useful for overriding values
- * in `context`.
- */
+ /**
+ * @ngdoc method
+ * @name $sce#trustAsHtml
+ *
+ * @description
+ * Shorthand method. `$sce.trustAsHtml(value)` →
+ * {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs($sce.HTML, value)`}
+ *
+ * @param {*} value The value to mark as trusted for `$sce.HTML` context.
+ * @return {*} A wrapped version of value that can be used as a trusted variant of your `value`
+ * in `$sce.HTML` context (like `ng-bind-html`).
+ */
- /**
- * @ngdoc method
- * @name $sce#parseAsCss
- *
- * @description
- * Shorthand method. `$sce.parseAsCss(value)` →
- * {@link ng.$sce#parseAs `$sce.parseAs($sce.CSS, value)`}
- *
- * @param {string} expression String expression to compile.
- * @return {function(context, locals)} A function which represents the compiled expression:
- *
- * * `context` – `{object}` – an object against which any expressions embedded in the
- * strings are evaluated against (typically a scope object).
- * * `locals` – `{object=}` – local variables context object, useful for overriding values
- * in `context`.
- */
+ /**
+ * @ngdoc method
+ * @name $sce#trustAsCss
+ *
+ * @description
+ * Shorthand method. `$sce.trustAsCss(value)` →
+ * {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs($sce.CSS, value)`}
+ *
+ * @param {*} value The value to mark as trusted for `$sce.CSS` context.
+ * @return {*} A wrapped version of value that can be used as a trusted variant
+ * of your `value` in `$sce.CSS` context. This context is currently unused, so there are
+ * almost no reasons to use this function so far.
+ */
- /**
- * @ngdoc method
- * @name $sce#parseAsUrl
- *
- * @description
- * Shorthand method. `$sce.parseAsUrl(value)` →
- * {@link ng.$sce#parseAs `$sce.parseAs($sce.URL, value)`}
- *
- * @param {string} expression String expression to compile.
- * @return {function(context, locals)} A function which represents the compiled expression:
- *
- * * `context` – `{object}` – an object against which any expressions embedded in the
- * strings are evaluated against (typically a scope object).
- * * `locals` – `{object=}` – local variables context object, useful for overriding values
- * in `context`.
- */
+ /**
+ * @ngdoc method
+ * @name $sce#trustAsUrl
+ *
+ * @description
+ * Shorthand method. `$sce.trustAsUrl(value)` →
+ * {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs($sce.URL, value)`}
+ *
+ * @param {*} value The value to mark as trusted for `$sce.URL` context.
+ * @return {*} A wrapped version of value that can be used as a trusted variant of your `value`
+ * in `$sce.URL` context. That context is currently unused, so there are almost no reasons
+ * to use this function so far.
+ */
- /**
- * @ngdoc method
- * @name $sce#parseAsResourceUrl
- *
- * @description
- * Shorthand method. `$sce.parseAsResourceUrl(value)` →
- * {@link ng.$sce#parseAs `$sce.parseAs($sce.RESOURCE_URL, value)`}
- *
- * @param {string} expression String expression to compile.
- * @return {function(context, locals)} A function which represents the compiled expression:
- *
- * * `context` – `{object}` – an object against which any expressions embedded in the
- * strings are evaluated against (typically a scope object).
- * * `locals` – `{object=}` – local variables context object, useful for overriding values
- * in `context`.
- */
+ /**
+ * @ngdoc method
+ * @name $sce#trustAsResourceUrl
+ *
+ * @description
+ * Shorthand method. `$sce.trustAsResourceUrl(value)` →
+ * {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs($sce.RESOURCE_URL, value)`}
+ *
+ * @param {*} value The value to mark as trusted for `$sce.RESOURCE_URL` context.
+ * @return {*} A wrapped version of value that can be used as a trusted variant of your `value`
+ * in `$sce.RESOURCE_URL` context (template URLs in `ng-include`, most `src` attribute
+ * bindings, ...)
+ */
- /**
- * @ngdoc method
- * @name $sce#parseAsJs
- *
- * @description
- * Shorthand method. `$sce.parseAsJs(value)` →
- * {@link ng.$sce#parseAs `$sce.parseAs($sce.JS, value)`}
- *
- * @param {string} expression String expression to compile.
- * @return {function(context, locals)} A function which represents the compiled expression:
- *
- * * `context` – `{object}` – an object against which any expressions embedded in the
- * strings are evaluated against (typically a scope object).
- * * `locals` – `{object=}` – local variables context object, useful for overriding values
- * in `context`.
- */
+ /**
+ * @ngdoc method
+ * @name $sce#trustAsJs
+ *
+ * @description
+ * Shorthand method. `$sce.trustAsJs(value)` →
+ * {@link ng.$sceDelegate#trustAs `$sceDelegate.trustAs($sce.JS, value)`}
+ *
+ * @param {*} value The value to mark as trusted for `$sce.JS` context.
+ * @return {*} A wrapped version of value that can be used as a trusted variant of your `value`
+ * in `$sce.JS` context. That context is currently unused, so there are almost no reasons to
+ * use this function so far.
+ */
- // Shorthand delegations.
- var parse = sce.parseAs,
- getTrusted = sce.getTrusted,
- trustAs = sce.trustAs;
+ /**
+ * @ngdoc method
+ * @name $sce#getTrusted
+ *
+ * @description
+ * Delegates to {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted`}. As such,
+ * takes any input, and either returns a value that's safe to use in the specified context,
+ * or throws an exception. This function is aware of trusted values created by the `trustAs`
+ * function and its shorthands, and when contexts are appropriate, returns the unwrapped value
+ * as-is. Finally, this function can also throw when there is no way to turn `maybeTrusted` in a
+ * safe value (e.g., no sanitization is available or possible.)
+ *
+ * @param {string} type The context in which this value is to be used.
+ * @param {*} maybeTrusted The result of a prior {@link ng.$sce#trustAs
+ * `$sce.trustAs`} call, or anything else (which will not be considered trusted.)
+ * @return {*} A version of the value that's safe to use in the given context, or throws an
+ * exception if this is impossible.
+ */
- forEach(SCE_CONTEXTS, function(enumValue, name) {
- var lName = lowercase(name);
- sce[snakeToCamel('parse_as_' + lName)] = function(expr) {
- return parse(enumValue, expr);
- };
- sce[snakeToCamel('get_trusted_' + lName)] = function(value) {
- return getTrusted(enumValue, value);
- };
- sce[snakeToCamel('trust_as_' + lName)] = function(value) {
- return trustAs(enumValue, value);
- };
- });
+ /**
+ * @ngdoc method
+ * @name $sce#getTrustedHtml
+ *
+ * @description
+ * Shorthand method. `$sce.getTrustedHtml(value)` →
+ * {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted($sce.HTML, value)`}
+ *
+ * @param {*} value The value to pass to `$sce.getTrusted`.
+ * @return {*} The return value of `$sce.getTrusted($sce.HTML, value)`
+ */
- return sce;
- }];
-}
+ /**
+ * @ngdoc method
+ * @name $sce#getTrustedCss
+ *
+ * @description
+ * Shorthand method. `$sce.getTrustedCss(value)` →
+ * {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted($sce.CSS, value)`}
+ *
+ * @param {*} value The value to pass to `$sce.getTrusted`.
+ * @return {*} The return value of `$sce.getTrusted($sce.CSS, value)`
+ */
-/* exported $SnifferProvider */
+ /**
+ * @ngdoc method
+ * @name $sce#getTrustedUrl
+ *
+ * @description
+ * Shorthand method. `$sce.getTrustedUrl(value)` →
+ * {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted($sce.URL, value)`}
+ *
+ * @param {*} value The value to pass to `$sce.getTrusted`.
+ * @return {*} The return value of `$sce.getTrusted($sce.URL, value)`
+ */
-/**
- * !!! This is an undocumented "private" service !!!
- *
- * @name $sniffer
- * @requires $window
- * @requires $document
- * @this
- *
- * @property {boolean} history Does the browser support html5 history api ?
- * @property {boolean} transitions Does the browser support CSS transition events ?
- * @property {boolean} animations Does the browser support CSS animation events ?
- *
- * @description
- * This is very simple implementation of testing browser's features.
- */
-function $SnifferProvider() {
- this.$get = ['$window', '$document', function($window, $document) {
- var eventSupport = {},
- // Chrome Packaged Apps are not allowed to access `history.pushState`.
- // If not sandboxed, they can be detected by the presence of `chrome.app.runtime`
- // (see https://developer.chrome.com/apps/api_index). If sandboxed, they can be detected by
- // the presence of an extension runtime ID and the absence of other Chrome runtime APIs
- // (see https://developer.chrome.com/apps/manifest/sandbox).
- // (NW.js apps have access to Chrome APIs, but do support `history`.)
- isNw = $window.nw && $window.nw.process,
- isChromePackagedApp =
- !isNw &&
- $window.chrome &&
- ($window.chrome.app && $window.chrome.app.runtime ||
- !$window.chrome.app && $window.chrome.runtime && $window.chrome.runtime.id),
- hasHistoryPushState = !isChromePackagedApp && $window.history && $window.history.pushState,
- android =
- toInt((/android (\d+)/.exec(lowercase(($window.navigator || {}).userAgent)) || [])[1]),
- boxee = /Boxee/i.test(($window.navigator || {}).userAgent),
- document = $document[0] || {},
- bodyStyle = document.body && document.body.style,
- transitions = false,
- animations = false;
-
- if (bodyStyle) {
- // Support: Android <5, Blackberry Browser 10, default Chrome in Android 4.4.x
- // Mentioned browsers need a -webkit- prefix for transitions & animations.
- transitions = !!('transition' in bodyStyle || 'webkitTransition' in bodyStyle);
- animations = !!('animation' in bodyStyle || 'webkitAnimation' in bodyStyle);
- }
+ /**
+ * @ngdoc method
+ * @name $sce#getTrustedResourceUrl
+ *
+ * @description
+ * Shorthand method. `$sce.getTrustedResourceUrl(value)` →
+ * {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted($sce.RESOURCE_URL, value)`}
+ *
+ * @param {*} value The value to pass to `$sceDelegate.getTrusted`.
+ * @return {*} The return value of `$sce.getTrusted($sce.RESOURCE_URL, value)`
+ */
+ /**
+ * @ngdoc method
+ * @name $sce#getTrustedJs
+ *
+ * @description
+ * Shorthand method. `$sce.getTrustedJs(value)` →
+ * {@link ng.$sceDelegate#getTrusted `$sceDelegate.getTrusted($sce.JS, value)`}
+ *
+ * @param {*} value The value to pass to `$sce.getTrusted`.
+ * @return {*} The return value of `$sce.getTrusted($sce.JS, value)`
+ */
- return {
- // Android has history.pushState, but it does not update location correctly
- // so let's not use the history API at all.
- // http://code.google.com/p/android/issues/detail?id=17471
- // https://github.com/angular/angular.js/issues/904
-
- // older webkit browser (533.9) on Boxee box has exactly the same problem as Android has
- // so let's not use the history API also
- // We are purposefully using `!(android < 4)` to cover the case when `android` is undefined
- history: !!(hasHistoryPushState && !(android < 4) && !boxee),
- hasEvent: function(event) {
- // Support: IE 9-11 only
- // IE9 implements 'input' event it's so fubared that we rather pretend that it doesn't have
- // it. In particular the event is not fired when backspace or delete key are pressed or
- // when cut operation is performed.
- // IE10+ implements 'input' event but it erroneously fires under various situations,
- // e.g. when placeholder changes, or a form is focused.
- if (event === 'input' && msie) return false;
+ /**
+ * @ngdoc method
+ * @name $sce#parseAsHtml
+ *
+ * @description
+ * Shorthand method. `$sce.parseAsHtml(expression string)` →
+ * {@link ng.$sce#parseAs `$sce.parseAs($sce.HTML, value)`}
+ *
+ * @param {string} expression String expression to compile.
+ * @return {function(context, locals)} A function which represents the compiled expression:
+ *
+ * * `context` – `{object}` – an object against which any expressions embedded in the
+ * strings are evaluated against (typically a scope object).
+ * * `locals` – `{object=}` – local variables context object, useful for overriding values
+ * in `context`.
+ */
- if (isUndefined(eventSupport[event])) {
- var divElm = document.createElement('div');
- eventSupport[event] = 'on' + event in divElm;
- }
+ /**
+ * @ngdoc method
+ * @name $sce#parseAsCss
+ *
+ * @description
+ * Shorthand method. `$sce.parseAsCss(value)` →
+ * {@link ng.$sce#parseAs `$sce.parseAs($sce.CSS, value)`}
+ *
+ * @param {string} expression String expression to compile.
+ * @return {function(context, locals)} A function which represents the compiled expression:
+ *
+ * * `context` – `{object}` – an object against which any expressions embedded in the
+ * strings are evaluated against (typically a scope object).
+ * * `locals` – `{object=}` – local variables context object, useful for overriding values
+ * in `context`.
+ */
- return eventSupport[event];
- },
- csp: csp(),
- transitions: transitions,
- animations: animations,
- android: android
- };
- }];
-}
+ /**
+ * @ngdoc method
+ * @name $sce#parseAsUrl
+ *
+ * @description
+ * Shorthand method. `$sce.parseAsUrl(value)` →
+ * {@link ng.$sce#parseAs `$sce.parseAs($sce.URL, value)`}
+ *
+ * @param {string} expression String expression to compile.
+ * @return {function(context, locals)} A function which represents the compiled expression:
+ *
+ * * `context` – `{object}` – an object against which any expressions embedded in the
+ * strings are evaluated against (typically a scope object).
+ * * `locals` – `{object=}` – local variables context object, useful for overriding values
+ * in `context`.
+ */
+
+ /**
+ * @ngdoc method
+ * @name $sce#parseAsResourceUrl
+ *
+ * @description
+ * Shorthand method. `$sce.parseAsResourceUrl(value)` →
+ * {@link ng.$sce#parseAs `$sce.parseAs($sce.RESOURCE_URL, value)`}
+ *
+ * @param {string} expression String expression to compile.
+ * @return {function(context, locals)} A function which represents the compiled expression:
+ *
+ * * `context` – `{object}` – an object against which any expressions embedded in the
+ * strings are evaluated against (typically a scope object).
+ * * `locals` – `{object=}` – local variables context object, useful for overriding values
+ * in `context`.
+ */
+
+ /**
+ * @ngdoc method
+ * @name $sce#parseAsJs
+ *
+ * @description
+ * Shorthand method. `$sce.parseAsJs(value)` →
+ * {@link ng.$sce#parseAs `$sce.parseAs($sce.JS, value)`}
+ *
+ * @param {string} expression String expression to compile.
+ * @return {function(context, locals)} A function which represents the compiled expression:
+ *
+ * * `context` – `{object}` – an object against which any expressions embedded in the
+ * strings are evaluated against (typically a scope object).
+ * * `locals` – `{object=}` – local variables context object, useful for overriding values
+ * in `context`.
+ */
-var $templateRequestMinErr = minErr('$compile');
+ // Shorthand delegations.
+ var parse = sce.parseAs,
+ getTrusted = sce.getTrusted,
+ trustAs = sce.trustAs;
-/**
- * @ngdoc provider
- * @name $templateRequestProvider
- * @this
- *
- * @description
- * Used to configure the options passed to the {@link $http} service when making a template request.
- *
- * For example, it can be used for specifying the "Accept" header that is sent to the server, when
- * requesting a template.
- */
-function $TemplateRequestProvider() {
+ forEach(SCE_CONTEXTS, function (enumValue, name) {
+ var lName = lowercase(name);
+ sce[snakeToCamel('parse_as_' + lName)] = function (expr) {
+ return parse(enumValue, expr);
+ };
+ sce[snakeToCamel('get_trusted_' + lName)] = function (value) {
+ return getTrusted(enumValue, value);
+ };
+ sce[snakeToCamel('trust_as_' + lName)] = function (value) {
+ return trustAs(enumValue, value);
+ };
+ });
+
+ return sce;
+ }];
+ }
- var httpOptions;
+ /* exported $SnifferProvider */
/**
- * @ngdoc method
- * @name $templateRequestProvider#httpOptions
- * @description
- * The options to be passed to the {@link $http} service when making the request.
- * You can use this to override options such as the "Accept" header for template requests.
+ * !!! This is an undocumented "private" service !!!
+ *
+ * @name $sniffer
+ * @requires $window
+ * @requires $document
+ * @this
*
- * The {@link $templateRequest} will set the `cache` and the `transformResponse` properties of the
- * options if not overridden here.
+ * @property {boolean} history Does the browser support html5 history api ?
+ * @property {boolean} transitions Does the browser support CSS transition events ?
+ * @property {boolean} animations Does the browser support CSS animation events ?
*
- * @param {string=} value new value for the {@link $http} options.
- * @returns {string|self} Returns the {@link $http} options when used as getter and self if used as setter.
+ * @description
+ * This is very simple implementation of testing browser's features.
*/
- this.httpOptions = function(val) {
- if (val) {
- httpOptions = val;
- return this;
- }
- return httpOptions;
- };
+ function $SnifferProvider() {
+ this.$get = ['$window', '$document', function ($window, $document) {
+ var eventSupport = {},
+
+ // Chrome Packaged Apps are not allowed to access `history.pushState`.
+ // If not sandboxed, they can be detected by the presence of `chrome.app.runtime`
+ // (see https://developer.chrome.com/apps/api_index). If sandboxed, they can be detected by
+ // the presence of an extension runtime ID and the absence of other Chrome runtime APIs
+ // (see https://developer.chrome.com/apps/manifest/sandbox).
+ // (NW.js apps have access to Chrome APIs, but do support `history`.)
+ isNw = $window.nw && $window.nw.process,
+ isChromePackagedApp = !isNw && $window.chrome && ($window.chrome.app && $window.chrome.app.runtime || !$window.chrome.app && $window.chrome.runtime && $window.chrome.runtime.id),
+ hasHistoryPushState = !isChromePackagedApp && $window.history && $window.history.pushState,
+ android = toInt((/android (\d+)/.exec(lowercase(($window.navigator || {}).userAgent)) || [])[1]),
+ boxee = /Boxee/i.test(($window.navigator || {}).userAgent),
+ document = $document[0] || {},
+ bodyStyle = document.body && document.body.style,
+ transitions = false,
+ animations = false;
+
+ if (bodyStyle) {
+ // Support: Android <5, Blackberry Browser 10, default Chrome in Android 4.4.x
+ // Mentioned browsers need a -webkit- prefix for transitions & animations.
+ transitions = !!('transition' in bodyStyle || 'webkitTransition' in bodyStyle);
+ animations = !!('animation' in bodyStyle || 'webkitAnimation' in bodyStyle);
+ }
+
+ return {
+ // Android has history.pushState, but it does not update location correctly
+ // so let's not use the history API at all.
+ // http://code.google.com/p/android/issues/detail?id=17471
+ // https://github.com/angular/angular.js/issues/904
+
+ // older webkit browser (533.9) on Boxee box has exactly the same problem as Android has
+ // so let's not use the history API also
+ // We are purposefully using `!(android < 4)` to cover the case when `android` is undefined
+ history: !!(hasHistoryPushState && !(android < 4) && !boxee),
+ hasEvent: function hasEvent(event) {
+ // Support: IE 9-11 only
+ // IE9 implements 'input' event it's so fubared that we rather pretend that it doesn't have
+ // it. In particular the event is not fired when backspace or delete key are pressed or
+ // when cut operation is performed.
+ // IE10+ implements 'input' event but it erroneously fires under various situations,
+ // e.g. when placeholder changes, or a form is focused.
+ if (event === 'input' && msie) return false;
+
+ if (isUndefined(eventSupport[event])) {
+ var divElm = document.createElement('div');
+ eventSupport[event] = 'on' + event in divElm;
+ }
+
+ return eventSupport[event];
+ },
+ csp: csp(),
+ transitions: transitions,
+ animations: animations,
+ android: android
+ };
+ }];
+ }
+
+ var $templateRequestMinErr = minErr('$compile');
/**
- * @ngdoc service
- * @name $templateRequest
+ * @ngdoc provider
+ * @name $templateRequestProvider
+ * @this
*
* @description
- * The `$templateRequest` service runs security checks then downloads the provided template using
- * `$http` and, upon success, stores the contents inside of `$templateCache`. If the HTTP request
- * fails or the response data of the HTTP request is empty, a `$compile` error will be thrown (the
- * exception can be thwarted by setting the 2nd parameter of the function to true). Note that the
- * contents of `$templateCache` are trusted, so the call to `$sce.getTrustedUrl(tpl)` is omitted
- * when `tpl` is of type string and `$templateCache` has the matching entry.
- *
- * If you want to pass custom options to the `$http` service, such as setting the Accept header you
- * can configure this via {@link $templateRequestProvider#httpOptions}.
- *
- * `$templateRequest` is used internally by {@link $compile}, {@link ngRoute.$route}, and directives such
- * as {@link ngInclude} to download and cache templates.
+ * Used to configure the options passed to the {@link $http} service when making a template request.
*
- * 3rd party modules should use `$templateRequest` if their services or directives are loading
- * templates.
- *
- * @param {string|TrustedResourceUrl} tpl The HTTP request template URL
- * @param {boolean=} ignoreRequestError Whether or not to ignore the exception when the request fails or the template is empty
- *
- * @return {Promise} a promise for the HTTP response data of the given URL.
- *
- * @property {number} totalPendingRequests total amount of pending template requests being downloaded.
+ * For example, it can be used for specifying the "Accept" header that is sent to the server, when
+ * requesting a template.
*/
- this.$get = ['$exceptionHandler', '$templateCache', '$http', '$q', '$sce',
- function($exceptionHandler, $templateCache, $http, $q, $sce) {
+ function $TemplateRequestProvider() {
+
+ var httpOptions;
+
+ /**
+ * @ngdoc method
+ * @name $templateRequestProvider#httpOptions
+ * @description
+ * The options to be passed to the {@link $http} service when making the request.
+ * You can use this to override options such as the "Accept" header for template requests.
+ *
+ * The {@link $templateRequest} will set the `cache` and the `transformResponse` properties of the
+ * options if not overridden here.
+ *
+ * @param {string=} value new value for the {@link $http} options.
+ * @returns {string|self} Returns the {@link $http} options when used as getter and self if used as setter.
+ */
+ this.httpOptions = function (val) {
+ if (val) {
+ httpOptions = val;
+ return this;
+ }
+ return httpOptions;
+ };
+
+ /**
+ * @ngdoc service
+ * @name $templateRequest
+ *
+ * @description
+ * The `$templateRequest` service runs security checks then downloads the provided template using
+ * `$http` and, upon success, stores the contents inside of `$templateCache`. If the HTTP request
+ * fails or the response data of the HTTP request is empty, a `$compile` error will be thrown (the
+ * exception can be thwarted by setting the 2nd parameter of the function to true). Note that the
+ * contents of `$templateCache` are trusted, so the call to `$sce.getTrustedUrl(tpl)` is omitted
+ * when `tpl` is of type string and `$templateCache` has the matching entry.
+ *
+ * If you want to pass custom options to the `$http` service, such as setting the Accept header you
+ * can configure this via {@link $templateRequestProvider#httpOptions}.
+ *
+ * `$templateRequest` is used internally by {@link $compile}, {@link ngRoute.$route}, and directives such
+ * as {@link ngInclude} to download and cache templates.
+ *
+ * 3rd party modules should use `$templateRequest` if their services or directives are loading
+ * templates.
+ *
+ * @param {string|TrustedResourceUrl} tpl The HTTP request template URL
+ * @param {boolean=} ignoreRequestError Whether or not to ignore the exception when the request fails or the template is empty
+ *
+ * @return {Promise} a promise for the HTTP response data of the given URL.
+ *
+ * @property {number} totalPendingRequests total amount of pending template requests being downloaded.
+ */
+ this.$get = ['$exceptionHandler', '$templateCache', '$http', '$q', '$sce', function ($exceptionHandler, $templateCache, $http, $q, $sce) {
function handleRequestFn(tpl, ignoreRequestError) {
handleRequestFn.totalPendingRequests++;
@@ -55200,7 +54722,7 @@ function $TemplateRequestProvider() {
var transformResponse = $http.defaults && $http.defaults.transformResponse;
if (isArray(transformResponse)) {
- transformResponse = transformResponse.filter(function(transformer) {
+ transformResponse = transformResponse.filter(function (transformer) {
return transformer !== defaultHttpResponseTransform;
});
} else if (transformResponse === defaultHttpResponseTransform) {
@@ -55208,22 +54730,18 @@ function $TemplateRequestProvider() {
}
return $http.get(tpl, extend({
- cache: $templateCache,
- transformResponse: transformResponse
- }, httpOptions))
- .finally(function() {
- handleRequestFn.totalPendingRequests--;
- })
- .then(function(response) {
- $templateCache.put(tpl, response.data);
- return response.data;
- }, handleError);
+ cache: $templateCache,
+ transformResponse: transformResponse
+ }, httpOptions)).finally(function () {
+ handleRequestFn.totalPendingRequests--;
+ }).then(function (response) {
+ $templateCache.put(tpl, response.data);
+ return response.data;
+ }, handleError);
function handleError(resp) {
if (!ignoreRequestError) {
- resp = $templateRequestMinErr('tpload',
- 'Failed to load template: {0} (HTTP status: {1} {2})',
- tpl, resp.status, resp.statusText);
+ resp = $templateRequestMinErr('tpload', 'Failed to load template: {0} (HTTP status: {1} {2})', tpl, resp.status, resp.statusText);
$exceptionHandler(resp);
}
@@ -55235,1084 +54753,1071 @@ function $TemplateRequestProvider() {
handleRequestFn.totalPendingRequests = 0;
return handleRequestFn;
- }
- ];
-}
+ }];
+ }
-/** @this */
-function $$TestabilityProvider() {
- this.$get = ['$rootScope', '$browser', '$location',
- function($rootScope, $browser, $location) {
+ /** @this */
+ function $$TestabilityProvider() {
+ this.$get = ['$rootScope', '$browser', '$location', function ($rootScope, $browser, $location) {
- /**
- * @name $testability
- *
- * @description
- * The private $$testability service provides a collection of methods for use when debugging
- * or by automated test and debugging tools.
- */
- var testability = {};
+ /**
+ * @name $testability
+ *
+ * @description
+ * The private $$testability service provides a collection of methods for use when debugging
+ * or by automated test and debugging tools.
+ */
+ var testability = {};
- /**
- * @name $$testability#findBindings
- *
- * @description
- * Returns an array of elements that are bound (via ng-bind or {{}})
- * to expressions matching the input.
- *
- * @param {Element} element The element root to search from.
- * @param {string} expression The binding expression to match.
- * @param {boolean} opt_exactMatch If true, only returns exact matches
- * for the expression. Filters and whitespace are ignored.
- */
- testability.findBindings = function(element, expression, opt_exactMatch) {
- var bindings = element.getElementsByClassName('ng-binding');
- var matches = [];
- forEach(bindings, function(binding) {
- var dataBinding = angular.element(binding).data('$binding');
- if (dataBinding) {
- forEach(dataBinding, function(bindingName) {
- if (opt_exactMatch) {
- var matcher = new RegExp('(^|\\s)' + escapeForRegexp(expression) + '(\\s|\\||$)');
- if (matcher.test(bindingName)) {
- matches.push(binding);
- }
- } else {
- if (bindingName.indexOf(expression) !== -1) {
- matches.push(binding);
+ /**
+ * @name $$testability#findBindings
+ *
+ * @description
+ * Returns an array of elements that are bound (via ng-bind or {{}})
+ * to expressions matching the input.
+ *
+ * @param {Element} element The element root to search from.
+ * @param {string} expression The binding expression to match.
+ * @param {boolean} opt_exactMatch If true, only returns exact matches
+ * for the expression. Filters and whitespace are ignored.
+ */
+ testability.findBindings = function (element, expression, opt_exactMatch) {
+ var bindings = element.getElementsByClassName('ng-binding');
+ var matches = [];
+ forEach(bindings, function (binding) {
+ var dataBinding = angular.element(binding).data('$binding');
+ if (dataBinding) {
+ forEach(dataBinding, function (bindingName) {
+ if (opt_exactMatch) {
+ var matcher = new RegExp('(^|\\s)' + escapeForRegexp(expression) + '(\\s|\\||$)');
+ if (matcher.test(bindingName)) {
+ matches.push(binding);
+ }
+ } else {
+ if (bindingName.indexOf(expression) !== -1) {
+ matches.push(binding);
+ }
}
- }
- });
- }
- });
- return matches;
- };
+ });
+ }
+ });
+ return matches;
+ };
- /**
- * @name $$testability#findModels
- *
- * @description
- * Returns an array of elements that are two-way found via ng-model to
- * expressions matching the input.
- *
- * @param {Element} element The element root to search from.
- * @param {string} expression The model expression to match.
- * @param {boolean} opt_exactMatch If true, only returns exact matches
- * for the expression.
- */
- testability.findModels = function(element, expression, opt_exactMatch) {
- var prefixes = ['ng-', 'data-ng-', 'ng\\:'];
- for (var p = 0; p < prefixes.length; ++p) {
- var attributeEquals = opt_exactMatch ? '=' : '*=';
- var selector = '[' + prefixes[p] + 'model' + attributeEquals + '"' + expression + '"]';
- var elements = element.querySelectorAll(selector);
- if (elements.length) {
- return elements;
+ /**
+ * @name $$testability#findModels
+ *
+ * @description
+ * Returns an array of elements that are two-way found via ng-model to
+ * expressions matching the input.
+ *
+ * @param {Element} element The element root to search from.
+ * @param {string} expression The model expression to match.
+ * @param {boolean} opt_exactMatch If true, only returns exact matches
+ * for the expression.
+ */
+ testability.findModels = function (element, expression, opt_exactMatch) {
+ var prefixes = ['ng-', 'data-ng-', 'ng\\:'];
+ for (var p = 0; p < prefixes.length; ++p) {
+ var attributeEquals = opt_exactMatch ? '=' : '*=';
+ var selector = '[' + prefixes[p] + 'model' + attributeEquals + '"' + expression + '"]';
+ var elements = element.querySelectorAll(selector);
+ if (elements.length) {
+ return elements;
+ }
}
- }
- };
-
- /**
- * @name $$testability#getLocation
- *
- * @description
- * Shortcut for getting the location in a browser agnostic way. Returns
- * the path, search, and hash. (e.g. /path?a=b#hash)
- */
- testability.getLocation = function() {
- return $location.url();
- };
-
- /**
- * @name $$testability#setLocation
- *
- * @description
- * Shortcut for navigating to a location without doing a full page reload.
- *
- * @param {string} url The location url (path, search and hash,
- * e.g. /path?a=b#hash) to go to.
- */
- testability.setLocation = function(url) {
- if (url !== $location.url()) {
- $location.url(url);
- $rootScope.$digest();
- }
- };
-
- /**
- * @name $$testability#whenStable
- *
- * @description
- * Calls the callback when $timeout and $http requests are completed.
- *
- * @param {function} callback
- */
- testability.whenStable = function(callback) {
- $browser.notifyWhenNoOutstandingRequests(callback);
- };
+ };
- return testability;
- }];
-}
+ /**
+ * @name $$testability#getLocation
+ *
+ * @description
+ * Shortcut for getting the location in a browser agnostic way. Returns
+ * the path, search, and hash. (e.g. /path?a=b#hash)
+ */
+ testability.getLocation = function () {
+ return $location.url();
+ };
-/** @this */
-function $TimeoutProvider() {
- this.$get = ['$rootScope', '$browser', '$q', '$$q', '$exceptionHandler',
- function($rootScope, $browser, $q, $$q, $exceptionHandler) {
+ /**
+ * @name $$testability#setLocation
+ *
+ * @description
+ * Shortcut for navigating to a location without doing a full page reload.
+ *
+ * @param {string} url The location url (path, search and hash,
+ * e.g. /path?a=b#hash) to go to.
+ */
+ testability.setLocation = function (url) {
+ if (url !== $location.url()) {
+ $location.url(url);
+ $rootScope.$digest();
+ }
+ };
- var deferreds = {};
+ /**
+ * @name $$testability#whenStable
+ *
+ * @description
+ * Calls the callback when $timeout and $http requests are completed.
+ *
+ * @param {function} callback
+ */
+ testability.whenStable = function (callback) {
+ $browser.notifyWhenNoOutstandingRequests(callback);
+ };
+ return testability;
+ }];
+ }
- /**
- * @ngdoc service
- * @name $timeout
- *
- * @description
- * Angular's wrapper for `window.setTimeout`. The `fn` function is wrapped into a try/catch
- * block and delegates any exceptions to
- * {@link ng.$exceptionHandler $exceptionHandler} service.
- *
- * The return value of calling `$timeout` is a promise, which will be resolved when
- * the delay has passed and the timeout function, if provided, is executed.
- *
- * To cancel a timeout request, call `$timeout.cancel(promise)`.
- *
- * In tests you can use {@link ngMock.$timeout `$timeout.flush()`} to
- * synchronously flush the queue of deferred functions.
- *
- * If you only want a promise that will be resolved after some specified delay
- * then you can call `$timeout` without the `fn` function.
- *
- * @param {function()=} fn A function, whose execution should be delayed.
- * @param {number=} [delay=0] Delay in milliseconds.
- * @param {boolean=} [invokeApply=true] If set to `false` skips model dirty checking, otherwise
- * will invoke `fn` within the {@link ng.$rootScope.Scope#$apply $apply} block.
- * @param {...*=} Pass additional parameters to the executed function.
- * @returns {Promise} Promise that will be resolved when the timeout is reached. The promise
- * will be resolved with the return value of the `fn` function.
- *
- */
- function timeout(fn, delay, invokeApply) {
- if (!isFunction(fn)) {
- invokeApply = delay;
- delay = fn;
- fn = noop;
- }
+ /** @this */
+ function $TimeoutProvider() {
+ this.$get = ['$rootScope', '$browser', '$q', '$$q', '$exceptionHandler', function ($rootScope, $browser, $q, $$q, $exceptionHandler) {
- var args = sliceArgs(arguments, 3),
- skipApply = (isDefined(invokeApply) && !invokeApply),
- deferred = (skipApply ? $$q : $q).defer(),
- promise = deferred.promise,
- timeoutId;
+ var deferreds = {};
- timeoutId = $browser.defer(function() {
- try {
- deferred.resolve(fn.apply(null, args));
- } catch (e) {
- deferred.reject(e);
- $exceptionHandler(e);
- } finally {
- delete deferreds[promise.$$timeoutId];
+ /**
+ * @ngdoc service
+ * @name $timeout
+ *
+ * @description
+ * Angular's wrapper for `window.setTimeout`. The `fn` function is wrapped into a try/catch
+ * block and delegates any exceptions to
+ * {@link ng.$exceptionHandler $exceptionHandler} service.
+ *
+ * The return value of calling `$timeout` is a promise, which will be resolved when
+ * the delay has passed and the timeout function, if provided, is executed.
+ *
+ * To cancel a timeout request, call `$timeout.cancel(promise)`.
+ *
+ * In tests you can use {@link ngMock.$timeout `$timeout.flush()`} to
+ * synchronously flush the queue of deferred functions.
+ *
+ * If you only want a promise that will be resolved after some specified delay
+ * then you can call `$timeout` without the `fn` function.
+ *
+ * @param {function()=} fn A function, whose execution should be delayed.
+ * @param {number=} [delay=0] Delay in milliseconds.
+ * @param {boolean=} [invokeApply=true] If set to `false` skips model dirty checking, otherwise
+ * will invoke `fn` within the {@link ng.$rootScope.Scope#$apply $apply} block.
+ * @param {...*=} Pass additional parameters to the executed function.
+ * @returns {Promise} Promise that will be resolved when the timeout is reached. The promise
+ * will be resolved with the return value of the `fn` function.
+ *
+ */
+ function timeout(fn, delay, invokeApply) {
+ if (!isFunction(fn)) {
+ invokeApply = delay;
+ delay = fn;
+ fn = noop;
}
- if (!skipApply) $rootScope.$apply();
- }, delay);
+ var args = sliceArgs(arguments, 3),
+ skipApply = isDefined(invokeApply) && !invokeApply,
+ deferred = (skipApply ? $$q : $q).defer(),
+ promise = deferred.promise,
+ timeoutId;
- promise.$$timeoutId = timeoutId;
- deferreds[timeoutId] = deferred;
+ timeoutId = $browser.defer(function () {
+ try {
+ deferred.resolve(fn.apply(null, args));
+ } catch (e) {
+ deferred.reject(e);
+ $exceptionHandler(e);
+ } finally {
+ delete deferreds[promise.$$timeoutId];
+ }
- return promise;
- }
+ if (!skipApply) $rootScope.$apply();
+ }, delay);
+ promise.$$timeoutId = timeoutId;
+ deferreds[timeoutId] = deferred;
- /**
- * @ngdoc method
- * @name $timeout#cancel
- *
- * @description
- * Cancels a task associated with the `promise`. As a result of this, the promise will be
- * resolved with a rejection.
- *
- * @param {Promise=} promise Promise returned by the `$timeout` function.
- * @returns {boolean} Returns `true` if the task hasn't executed yet and was successfully
- * canceled.
- */
- timeout.cancel = function(promise) {
- if (promise && promise.$$timeoutId in deferreds) {
- // Timeout cancels should not report an unhandled promise.
- markQExceptionHandled(deferreds[promise.$$timeoutId].promise);
- deferreds[promise.$$timeoutId].reject('canceled');
- delete deferreds[promise.$$timeoutId];
- return $browser.defer.cancel(promise.$$timeoutId);
+ return promise;
}
- return false;
- };
- return timeout;
- }];
-}
+ /**
+ * @ngdoc method
+ * @name $timeout#cancel
+ *
+ * @description
+ * Cancels a task associated with the `promise`. As a result of this, the promise will be
+ * resolved with a rejection.
+ *
+ * @param {Promise=} promise Promise returned by the `$timeout` function.
+ * @returns {boolean} Returns `true` if the task hasn't executed yet and was successfully
+ * canceled.
+ */
+ timeout.cancel = function (promise) {
+ if (promise && promise.$$timeoutId in deferreds) {
+ // Timeout cancels should not report an unhandled promise.
+ markQExceptionHandled(deferreds[promise.$$timeoutId].promise);
+ deferreds[promise.$$timeoutId].reject('canceled');
+ delete deferreds[promise.$$timeoutId];
+ return $browser.defer.cancel(promise.$$timeoutId);
+ }
+ return false;
+ };
-// NOTE: The usage of window and document instead of $window and $document here is
-// deliberate. This service depends on the specific behavior of anchor nodes created by the
-// browser (resolving and parsing URLs) that is unlikely to be provided by mock objects and
-// cause us to break tests. In addition, when the browser resolves a URL for XHR, it
-// doesn't know about mocked locations and resolves URLs to the real document - which is
-// exactly the behavior needed here. There is little value is mocking these out for this
-// service.
-var urlParsingNode = window.document.createElement('a');
-var originUrl = urlResolve(window.location.href);
+ return timeout;
+ }];
+ }
+ // NOTE: The usage of window and document instead of $window and $document here is
+ // deliberate. This service depends on the specific behavior of anchor nodes created by the
+ // browser (resolving and parsing URLs) that is unlikely to be provided by mock objects and
+ // cause us to break tests. In addition, when the browser resolves a URL for XHR, it
+ // doesn't know about mocked locations and resolves URLs to the real document - which is
+ // exactly the behavior needed here. There is little value is mocking these out for this
+ // service.
+ var urlParsingNode = window.document.createElement('a');
+ var originUrl = urlResolve(window.location.href);
-/**
- *
- * Implementation Notes for non-IE browsers
- * ----------------------------------------
- * Assigning a URL to the href property of an anchor DOM node, even one attached to the DOM,
- * results both in the normalizing and parsing of the URL. Normalizing means that a relative
- * URL will be resolved into an absolute URL in the context of the application document.
- * Parsing means that the anchor node's host, hostname, protocol, port, pathname and related
- * properties are all populated to reflect the normalized URL. This approach has wide
- * compatibility - Safari 1+, Mozilla 1+ etc. See
- * http://www.aptana.com/reference/html/api/HTMLAnchorElement.html
- *
- * Implementation Notes for IE
- * ---------------------------
- * IE <= 10 normalizes the URL when assigned to the anchor node similar to the other
- * browsers. However, the parsed components will not be set if the URL assigned did not specify
- * them. (e.g. if you assign a.href = "foo", then a.protocol, a.host, etc. will be empty.) We
- * work around that by performing the parsing in a 2nd step by taking a previously normalized
- * URL (e.g. by assigning to a.href) and assigning it a.href again. This correctly populates the
- * properties such as protocol, hostname, port, etc.
- *
- * References:
- * http://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement
- * http://www.aptana.com/reference/html/api/HTMLAnchorElement.html
- * http://url.spec.whatwg.org/#urlutils
- * https://github.com/angular/angular.js/pull/2902
- * http://james.padolsey.com/javascript/parsing-urls-with-the-dom/
- *
- * @kind function
- * @param {string} url The URL to be parsed.
- * @description Normalizes and parses a URL.
- * @returns {object} Returns the normalized URL as a dictionary.
- *
- * | member name | Description |
- * |---------------|----------------|
- * | href | A normalized version of the provided URL if it was not an absolute URL |
- * | protocol | The protocol including the trailing colon |
- * | host | The host and port (if the port is non-default) of the normalizedUrl |
- * | search | The search params, minus the question mark |
- * | hash | The hash string, minus the hash symbol
- * | hostname | The hostname
- * | port | The port, without ":"
- * | pathname | The pathname, beginning with "/"
- *
- */
-function urlResolve(url) {
- var href = url;
+ /**
+ *
+ * Implementation Notes for non-IE browsers
+ * ----------------------------------------
+ * Assigning a URL to the href property of an anchor DOM node, even one attached to the DOM,
+ * results both in the normalizing and parsing of the URL. Normalizing means that a relative
+ * URL will be resolved into an absolute URL in the context of the application document.
+ * Parsing means that the anchor node's host, hostname, protocol, port, pathname and related
+ * properties are all populated to reflect the normalized URL. This approach has wide
+ * compatibility - Safari 1+, Mozilla 1+ etc. See
+ * http://www.aptana.com/reference/html/api/HTMLAnchorElement.html
+ *
+ * Implementation Notes for IE
+ * ---------------------------
+ * IE <= 10 normalizes the URL when assigned to the anchor node similar to the other
+ * browsers. However, the parsed components will not be set if the URL assigned did not specify
+ * them. (e.g. if you assign a.href = "foo", then a.protocol, a.host, etc. will be empty.) We
+ * work around that by performing the parsing in a 2nd step by taking a previously normalized
+ * URL (e.g. by assigning to a.href) and assigning it a.href again. This correctly populates the
+ * properties such as protocol, hostname, port, etc.
+ *
+ * References:
+ * http://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement
+ * http://www.aptana.com/reference/html/api/HTMLAnchorElement.html
+ * http://url.spec.whatwg.org/#urlutils
+ * https://github.com/angular/angular.js/pull/2902
+ * http://james.padolsey.com/javascript/parsing-urls-with-the-dom/
+ *
+ * @kind function
+ * @param {string} url The URL to be parsed.
+ * @description Normalizes and parses a URL.
+ * @returns {object} Returns the normalized URL as a dictionary.
+ *
+ * | member name | Description |
+ * |---------------|----------------|
+ * | href | A normalized version of the provided URL if it was not an absolute URL |
+ * | protocol | The protocol including the trailing colon |
+ * | host | The host and port (if the port is non-default) of the normalizedUrl |
+ * | search | The search params, minus the question mark |
+ * | hash | The hash string, minus the hash symbol
+ * | hostname | The hostname
+ * | port | The port, without ":"
+ * | pathname | The pathname, beginning with "/"
+ *
+ */
+ function urlResolve(url) {
+ var href = url;
+
+ // Support: IE 9-11 only
+ if (msie) {
+ // Normalize before parse. Refer Implementation Notes on why this is
+ // done in two steps on IE.
+ urlParsingNode.setAttribute('href', href);
+ href = urlParsingNode.href;
+ }
- // Support: IE 9-11 only
- if (msie) {
- // Normalize before parse. Refer Implementation Notes on why this is
- // done in two steps on IE.
urlParsingNode.setAttribute('href', href);
- href = urlParsingNode.href;
+
+ // urlParsingNode provides the UrlUtils interface - http://url.spec.whatwg.org/#urlutils
+ return {
+ href: urlParsingNode.href,
+ protocol: urlParsingNode.protocol ? urlParsingNode.protocol.replace(/:$/, '') : '',
+ host: urlParsingNode.host,
+ search: urlParsingNode.search ? urlParsingNode.search.replace(/^\?/, '') : '',
+ hash: urlParsingNode.hash ? urlParsingNode.hash.replace(/^#/, '') : '',
+ hostname: urlParsingNode.hostname,
+ port: urlParsingNode.port,
+ pathname: urlParsingNode.pathname.charAt(0) === '/' ? urlParsingNode.pathname : '/' + urlParsingNode.pathname
+ };
}
- urlParsingNode.setAttribute('href', href);
-
- // urlParsingNode provides the UrlUtils interface - http://url.spec.whatwg.org/#urlutils
- return {
- href: urlParsingNode.href,
- protocol: urlParsingNode.protocol ? urlParsingNode.protocol.replace(/:$/, '') : '',
- host: urlParsingNode.host,
- search: urlParsingNode.search ? urlParsingNode.search.replace(/^\?/, '') : '',
- hash: urlParsingNode.hash ? urlParsingNode.hash.replace(/^#/, '') : '',
- hostname: urlParsingNode.hostname,
- port: urlParsingNode.port,
- pathname: (urlParsingNode.pathname.charAt(0) === '/')
- ? urlParsingNode.pathname
- : '/' + urlParsingNode.pathname
- };
-}
-
-/**
- * Parse a request URL and determine whether this is a same-origin request as the application document.
- *
- * @param {string|object} requestUrl The url of the request as a string that will be resolved
- * or a parsed URL object.
- * @returns {boolean} Whether the request is for the same origin as the application document.
- */
-function urlIsSameOrigin(requestUrl) {
- var parsed = (isString(requestUrl)) ? urlResolve(requestUrl) : requestUrl;
- return (parsed.protocol === originUrl.protocol &&
- parsed.host === originUrl.host);
-}
-
-/**
- * @ngdoc service
- * @name $window
- * @this
- *
- * @description
- * A reference to the browser's `window` object. While `window`
- * is globally available in JavaScript, it causes testability problems, because
- * it is a global variable. In angular we always refer to it through the
- * `$window` service, so it may be overridden, removed or mocked for testing.
- *
- * Expressions, like the one defined for the `ngClick` directive in the example
- * below, are evaluated with respect to the current scope. Therefore, there is
- * no risk of inadvertently coding in a dependency on a global value in such an
- * expression.
- *
- * @example
-
-
-
-
-
-
-
-
-
- it('should display the greeting in the input box', function() {
- element(by.model('greeting')).sendKeys('Hello, E2E Tests');
- // If we click the button it will block the test runner
- // element(':button').click();
- });
-
-
- */
-function $WindowProvider() {
- this.$get = valueFn(window);
-}
-
-/**
- * @name $$cookieReader
- * @requires $document
- *
- * @description
- * This is a private service for reading cookies used by $http and ngCookies
- *
- * @return {Object} a key/value map of the current cookies
- */
-function $$CookieReader($document) {
- var rawDocument = $document[0] || {};
- var lastCookies = {};
- var lastCookieString = '';
-
- function safeGetCookie(rawDocument) {
- try {
- return rawDocument.cookie || '';
- } catch (e) {
- return '';
- }
+ /**
+ * Parse a request URL and determine whether this is a same-origin request as the application document.
+ *
+ * @param {string|object} requestUrl The url of the request as a string that will be resolved
+ * or a parsed URL object.
+ * @returns {boolean} Whether the request is for the same origin as the application document.
+ */
+ function urlIsSameOrigin(requestUrl) {
+ var parsed = isString(requestUrl) ? urlResolve(requestUrl) : requestUrl;
+ return parsed.protocol === originUrl.protocol && parsed.host === originUrl.host;
}
- function safeDecodeURIComponent(str) {
- try {
- return decodeURIComponent(str);
- } catch (e) {
- return str;
- }
+ /**
+ * @ngdoc service
+ * @name $window
+ * @this
+ *
+ * @description
+ * A reference to the browser's `window` object. While `window`
+ * is globally available in JavaScript, it causes testability problems, because
+ * it is a global variable. In angular we always refer to it through the
+ * `$window` service, so it may be overridden, removed or mocked for testing.
+ *
+ * Expressions, like the one defined for the `ngClick` directive in the example
+ * below, are evaluated with respect to the current scope. Therefore, there is
+ * no risk of inadvertently coding in a dependency on a global value in such an
+ * expression.
+ *
+ * @example
+
+
+
+
+
+
+
+
+
+ it('should display the greeting in the input box', function() {
+ element(by.model('greeting')).sendKeys('Hello, E2E Tests');
+ // If we click the button it will block the test runner
+ // element(':button').click();
+ });
+
+
+ */
+ function $WindowProvider() {
+ this.$get = valueFn(window);
}
- return function() {
- var cookieArray, cookie, i, index, name;
- var currentCookieString = safeGetCookie(rawDocument);
+ /**
+ * @name $$cookieReader
+ * @requires $document
+ *
+ * @description
+ * This is a private service for reading cookies used by $http and ngCookies
+ *
+ * @return {Object} a key/value map of the current cookies
+ */
+ function $$CookieReader($document) {
+ var rawDocument = $document[0] || {};
+ var lastCookies = {};
+ var lastCookieString = '';
- if (currentCookieString !== lastCookieString) {
- lastCookieString = currentCookieString;
- cookieArray = lastCookieString.split('; ');
- lastCookies = {};
+ function safeGetCookie(rawDocument) {
+ try {
+ return rawDocument.cookie || '';
+ } catch (e) {
+ return '';
+ }
+ }
- for (i = 0; i < cookieArray.length; i++) {
- cookie = cookieArray[i];
- index = cookie.indexOf('=');
- if (index > 0) { //ignore nameless cookies
- name = safeDecodeURIComponent(cookie.substring(0, index));
- // the first value that is seen for a cookie is the most
- // specific one. values for the same cookie name that
- // follow are for less specific paths.
- if (isUndefined(lastCookies[name])) {
- lastCookies[name] = safeDecodeURIComponent(cookie.substring(index + 1));
+ function safeDecodeURIComponent(str) {
+ try {
+ return decodeURIComponent(str);
+ } catch (e) {
+ return str;
+ }
+ }
+
+ return function () {
+ var cookieArray, cookie, i, index, name;
+ var currentCookieString = safeGetCookie(rawDocument);
+
+ if (currentCookieString !== lastCookieString) {
+ lastCookieString = currentCookieString;
+ cookieArray = lastCookieString.split('; ');
+ lastCookies = {};
+
+ for (i = 0; i < cookieArray.length; i++) {
+ cookie = cookieArray[i];
+ index = cookie.indexOf('=');
+ if (index > 0) {
+ //ignore nameless cookies
+ name = safeDecodeURIComponent(cookie.substring(0, index));
+ // the first value that is seen for a cookie is the most
+ // specific one. values for the same cookie name that
+ // follow are for less specific paths.
+ if (isUndefined(lastCookies[name])) {
+ lastCookies[name] = safeDecodeURIComponent(cookie.substring(index + 1));
+ }
}
}
}
- }
- return lastCookies;
- };
-}
-
-$$CookieReader.$inject = ['$document'];
-
-/** @this */
-function $$CookieReaderProvider() {
- this.$get = $$CookieReader;
-}
-
-/* global currencyFilter: true,
- dateFilter: true,
- filterFilter: true,
- jsonFilter: true,
- limitToFilter: true,
- lowercaseFilter: true,
- numberFilter: true,
- orderByFilter: true,
- uppercaseFilter: true,
- */
+ return lastCookies;
+ };
+ }
-/**
- * @ngdoc provider
- * @name $filterProvider
- * @description
- *
- * Filters are just functions which transform input to an output. However filters need to be
- * Dependency Injected. To achieve this a filter definition consists of a factory function which is
- * annotated with dependencies and is responsible for creating a filter function.
- *
- *
- * **Note:** Filter names must be valid angular {@link expression} identifiers, such as `uppercase` or `orderBy`.
- * Names with special characters, such as hyphens and dots, are not allowed. If you wish to namespace
- * your filters, then you can use capitalization (`myappSubsectionFilterx`) or underscores
- * (`myapp_subsection_filterx`).
- *
- *
- * ```js
- * // Filter registration
- * function MyModule($provide, $filterProvider) {
- * // create a service to demonstrate injection (not always needed)
- * $provide.value('greet', function(name){
- * return 'Hello ' + name + '!';
- * });
- *
- * // register a filter factory which uses the
- * // greet service to demonstrate DI.
- * $filterProvider.register('greet', function(greet){
- * // return the filter function which uses the greet service
- * // to generate salutation
- * return function(text) {
- * // filters need to be forgiving so check input validity
- * return text && greet(text) || text;
- * };
- * });
- * }
- * ```
- *
- * The filter function is registered with the `$injector` under the filter name suffix with
- * `Filter`.
- *
- * ```js
- * it('should be the same instance', inject(
- * function($filterProvider) {
- * $filterProvider.register('reverse', function(){
- * return ...;
- * });
- * },
- * function($filter, reverseFilter) {
- * expect($filter('reverse')).toBe(reverseFilter);
- * });
- * ```
- *
- *
- * For more information about how angular filters work, and how to create your own filters, see
- * {@link guide/filter Filters} in the Angular Developer Guide.
- */
+ $$CookieReader.$inject = ['$document'];
-/**
- * @ngdoc service
- * @name $filter
- * @kind function
- * @description
- * Filters are used for formatting data displayed to the user.
- *
- * They can be used in view templates, controllers or services.Angular comes
- * with a collection of [built-in filters](api/ng/filter), but it is easy to
- * define your own as well.
- *
- * The general syntax in templates is as follows:
- *
- * ```html
- * {{ expression [| filter_name[:parameter_value] ... ] }}
- * ```
- *
- * @param {String} name Name of the filter function to retrieve
- * @return {Function} the filter function
- * @example
-
-
-
-
{{ originalText }}
- {{ filteredText }}
-
-
+ /** @this */
+ function $$CookieReaderProvider() {
+ this.$get = $$CookieReader;
+ }
-
- angular.module('filterExample', [])
- .controller('MainCtrl', function($scope, $filter) {
- $scope.originalText = 'hello';
- $scope.filteredText = $filter('uppercase')($scope.originalText);
- });
-
-
- */
-$FilterProvider.$inject = ['$provide'];
-/** @this */
-function $FilterProvider($provide) {
- var suffix = 'Filter';
+ /* global currencyFilter: true,
+ dateFilter: true,
+ filterFilter: true,
+ jsonFilter: true,
+ limitToFilter: true,
+ lowercaseFilter: true,
+ numberFilter: true,
+ orderByFilter: true,
+ uppercaseFilter: true,
+ */
/**
- * @ngdoc method
- * @name $filterProvider#register
- * @param {string|Object} name Name of the filter function, or an object map of filters where
- * the keys are the filter names and the values are the filter factories.
- *
- *
- * **Note:** Filter names must be valid angular {@link expression} identifiers, such as `uppercase` or `orderBy`.
- * Names with special characters, such as hyphens and dots, are not allowed. If you wish to namespace
- * your filters, then you can use capitalization (`myappSubsectionFilterx`) or underscores
- * (`myapp_subsection_filterx`).
- *
- * @param {Function} factory If the first argument was a string, a factory function for the filter to be registered.
- * @returns {Object} Registered filter instance, or if a map of filters was provided then a map
- * of the registered filter instances.
+ * @ngdoc provider
+ * @name $filterProvider
+ * @description
+ *
+ * Filters are just functions which transform input to an output. However filters need to be
+ * Dependency Injected. To achieve this a filter definition consists of a factory function which is
+ * annotated with dependencies and is responsible for creating a filter function.
+ *
+ *
+ * **Note:** Filter names must be valid angular {@link expression} identifiers, such as `uppercase` or `orderBy`.
+ * Names with special characters, such as hyphens and dots, are not allowed. If you wish to namespace
+ * your filters, then you can use capitalization (`myappSubsectionFilterx`) or underscores
+ * (`myapp_subsection_filterx`).
+ *
+ *
+ * ```js
+ * // Filter registration
+ * function MyModule($provide, $filterProvider) {
+ * // create a service to demonstrate injection (not always needed)
+ * $provide.value('greet', function(name){
+ * return 'Hello ' + name + '!';
+ * });
+ *
+ * // register a filter factory which uses the
+ * // greet service to demonstrate DI.
+ * $filterProvider.register('greet', function(greet){
+ * // return the filter function which uses the greet service
+ * // to generate salutation
+ * return function(text) {
+ * // filters need to be forgiving so check input validity
+ * return text && greet(text) || text;
+ * };
+ * });
+ * }
+ * ```
+ *
+ * The filter function is registered with the `$injector` under the filter name suffix with
+ * `Filter`.
+ *
+ * ```js
+ * it('should be the same instance', inject(
+ * function($filterProvider) {
+ * $filterProvider.register('reverse', function(){
+ * return ...;
+ * });
+ * },
+ * function($filter, reverseFilter) {
+ * expect($filter('reverse')).toBe(reverseFilter);
+ * });
+ * ```
+ *
+ *
+ * For more information about how angular filters work, and how to create your own filters, see
+ * {@link guide/filter Filters} in the Angular Developer Guide.
*/
- function register(name, factory) {
- if (isObject(name)) {
- var filters = {};
- forEach(name, function(filter, key) {
- filters[key] = register(key, filter);
- });
- return filters;
- } else {
- return $provide.factory(name + suffix, factory);
- }
- }
- this.register = register;
- this.$get = ['$injector', function($injector) {
- return function(name) {
- return $injector.get(name + suffix);
- };
- }];
+ /**
+ * @ngdoc service
+ * @name $filter
+ * @kind function
+ * @description
+ * Filters are used for formatting data displayed to the user.
+ *
+ * They can be used in view templates, controllers or services.Angular comes
+ * with a collection of [built-in filters](api/ng/filter), but it is easy to
+ * define your own as well.
+ *
+ * The general syntax in templates is as follows:
+ *
+ * ```html
+ * {{ expression [| filter_name[:parameter_value] ... ] }}
+ * ```
+ *
+ * @param {String} name Name of the filter function to retrieve
+ * @return {Function} the filter function
+ * @example
+
+
+
+
{{ originalText }}
+ {{ filteredText }}
+
+
+
+
+ angular.module('filterExample', [])
+ .controller('MainCtrl', function($scope, $filter) {
+ $scope.originalText = 'hello';
+ $scope.filteredText = $filter('uppercase')($scope.originalText);
+ });
+
+
+ */
+ $FilterProvider.$inject = ['$provide'];
+ /** @this */
+ function $FilterProvider($provide) {
+ var suffix = 'Filter';
- ////////////////////////////////////////
+ /**
+ * @ngdoc method
+ * @name $filterProvider#register
+ * @param {string|Object} name Name of the filter function, or an object map of filters where
+ * the keys are the filter names and the values are the filter factories.
+ *
+ *
+ * **Note:** Filter names must be valid angular {@link expression} identifiers, such as `uppercase` or `orderBy`.
+ * Names with special characters, such as hyphens and dots, are not allowed. If you wish to namespace
+ * your filters, then you can use capitalization (`myappSubsectionFilterx`) or underscores
+ * (`myapp_subsection_filterx`).
+ *
+ * @param {Function} factory If the first argument was a string, a factory function for the filter to be registered.
+ * @returns {Object} Registered filter instance, or if a map of filters was provided then a map
+ * of the registered filter instances.
+ */
+ function register(name, factory) {
+ if (isObject(name)) {
+ var filters = {};
+ forEach(name, function (filter, key) {
+ filters[key] = register(key, filter);
+ });
+ return filters;
+ } else {
+ return $provide.factory(name + suffix, factory);
+ }
+ }
+ this.register = register;
- /* global
- currencyFilter: false,
- dateFilter: false,
- filterFilter: false,
- jsonFilter: false,
- limitToFilter: false,
- lowercaseFilter: false,
- numberFilter: false,
- orderByFilter: false,
- uppercaseFilter: false
- */
+ this.$get = ['$injector', function ($injector) {
+ return function (name) {
+ return $injector.get(name + suffix);
+ };
+ }];
- register('currency', currencyFilter);
- register('date', dateFilter);
- register('filter', filterFilter);
- register('json', jsonFilter);
- register('limitTo', limitToFilter);
- register('lowercase', lowercaseFilter);
- register('number', numberFilter);
- register('orderBy', orderByFilter);
- register('uppercase', uppercaseFilter);
-}
+ ////////////////////////////////////////
+
+ /* global
+ currencyFilter: false,
+ dateFilter: false,
+ filterFilter: false,
+ jsonFilter: false,
+ limitToFilter: false,
+ lowercaseFilter: false,
+ numberFilter: false,
+ orderByFilter: false,
+ uppercaseFilter: false
+ */
-/**
- * @ngdoc filter
- * @name filter
- * @kind function
- *
- * @description
- * Selects a subset of items from `array` and returns it as a new array.
- *
- * @param {Array} array The source array.
- *
- * **Note**: If the array contains objects that reference themselves, filtering is not possible.
- *
- * @param {string|Object|function()} expression The predicate to be used for selecting items from
- * `array`.
- *
- * Can be one of:
- *
- * - `string`: The string is used for matching against the contents of the `array`. All strings or
- * objects with string properties in `array` that match this string will be returned. This also
- * applies to nested object properties.
- * The predicate can be negated by prefixing the string with `!`.
- *
- * - `Object`: A pattern object can be used to filter specific properties on objects contained
- * by `array`. For example `{name:"M", phone:"1"}` predicate will return an array of items
- * which have property `name` containing "M" and property `phone` containing "1". A special
- * property name (`$` by default) can be used (e.g. as in `{$: "text"}`) to accept a match
- * against any property of the object or its nested object properties. That's equivalent to the
- * simple substring match with a `string` as described above. The special property name can be
- * overwritten, using the `anyPropertyKey` parameter.
- * The predicate can be negated by prefixing the string with `!`.
- * For example `{name: "!M"}` predicate will return an array of items which have property `name`
- * not containing "M".
- *
- * Note that a named property will match properties on the same level only, while the special
- * `$` property will match properties on the same level or deeper. E.g. an array item like
- * `{name: {first: 'John', last: 'Doe'}}` will **not** be matched by `{name: 'John'}`, but
- * **will** be matched by `{$: 'John'}`.
- *
- * - `function(value, index, array)`: A predicate function can be used to write arbitrary filters.
- * The function is called for each element of the array, with the element, its index, and
- * the entire array itself as arguments.
- *
- * The final result is an array of those elements that the predicate returned true for.
- *
- * @param {function(actual, expected)|true|false} [comparator] Comparator which is used in
- * determining if values retrieved using `expression` (when it is not a function) should be
- * considered a match based on the expected value (from the filter expression) and actual
- * value (from the object in the array).
- *
- * Can be one of:
- *
- * - `function(actual, expected)`:
- * The function will be given the object value and the predicate value to compare and
- * should return true if both values should be considered equal.
- *
- * - `true`: A shorthand for `function(actual, expected) { return angular.equals(actual, expected)}`.
- * This is essentially strict comparison of expected and actual.
- *
- * - `false`: A short hand for a function which will look for a substring match in a case
- * insensitive way. Primitive values are converted to strings. Objects are not compared against
- * primitives, unless they have a custom `toString` method (e.g. `Date` objects).
- *
- *
- * Defaults to `false`.
- *
- * @param {string} [anyPropertyKey] The special property name that matches against any property.
- * By default `$`.
- *
- * @example
-
-
-
-
-
-
- | Name | Phone |
|---|
-
- | {{friend.name}} |
- {{friend.phone}} |
-
-
-
-
-
-
-
-
- | Name | Phone |
|---|
-
- | {{friendObj.name}} |
- {{friendObj.phone}} |
-
-
-
-
- var expectFriendNames = function(expectedNames, key) {
- element.all(by.repeater(key + ' in friends').column(key + '.name')).then(function(arr) {
- arr.forEach(function(wd, i) {
- expect(wd.getText()).toMatch(expectedNames[i]);
+ register('currency', currencyFilter);
+ register('date', dateFilter);
+ register('filter', filterFilter);
+ register('json', jsonFilter);
+ register('limitTo', limitToFilter);
+ register('lowercase', lowercaseFilter);
+ register('number', numberFilter);
+ register('orderBy', orderByFilter);
+ register('uppercase', uppercaseFilter);
+ }
+
+ /**
+ * @ngdoc filter
+ * @name filter
+ * @kind function
+ *
+ * @description
+ * Selects a subset of items from `array` and returns it as a new array.
+ *
+ * @param {Array} array The source array.
+ *
+ * **Note**: If the array contains objects that reference themselves, filtering is not possible.
+ *
+ * @param {string|Object|function()} expression The predicate to be used for selecting items from
+ * `array`.
+ *
+ * Can be one of:
+ *
+ * - `string`: The string is used for matching against the contents of the `array`. All strings or
+ * objects with string properties in `array` that match this string will be returned. This also
+ * applies to nested object properties.
+ * The predicate can be negated by prefixing the string with `!`.
+ *
+ * - `Object`: A pattern object can be used to filter specific properties on objects contained
+ * by `array`. For example `{name:"M", phone:"1"}` predicate will return an array of items
+ * which have property `name` containing "M" and property `phone` containing "1". A special
+ * property name (`$` by default) can be used (e.g. as in `{$: "text"}`) to accept a match
+ * against any property of the object or its nested object properties. That's equivalent to the
+ * simple substring match with a `string` as described above. The special property name can be
+ * overwritten, using the `anyPropertyKey` parameter.
+ * The predicate can be negated by prefixing the string with `!`.
+ * For example `{name: "!M"}` predicate will return an array of items which have property `name`
+ * not containing "M".
+ *
+ * Note that a named property will match properties on the same level only, while the special
+ * `$` property will match properties on the same level or deeper. E.g. an array item like
+ * `{name: {first: 'John', last: 'Doe'}}` will **not** be matched by `{name: 'John'}`, but
+ * **will** be matched by `{$: 'John'}`.
+ *
+ * - `function(value, index, array)`: A predicate function can be used to write arbitrary filters.
+ * The function is called for each element of the array, with the element, its index, and
+ * the entire array itself as arguments.
+ *
+ * The final result is an array of those elements that the predicate returned true for.
+ *
+ * @param {function(actual, expected)|true|false} [comparator] Comparator which is used in
+ * determining if values retrieved using `expression` (when it is not a function) should be
+ * considered a match based on the expected value (from the filter expression) and actual
+ * value (from the object in the array).
+ *
+ * Can be one of:
+ *
+ * - `function(actual, expected)`:
+ * The function will be given the object value and the predicate value to compare and
+ * should return true if both values should be considered equal.
+ *
+ * - `true`: A shorthand for `function(actual, expected) { return angular.equals(actual, expected)}`.
+ * This is essentially strict comparison of expected and actual.
+ *
+ * - `false`: A short hand for a function which will look for a substring match in a case
+ * insensitive way. Primitive values are converted to strings. Objects are not compared against
+ * primitives, unless they have a custom `toString` method (e.g. `Date` objects).
+ *
+ *
+ * Defaults to `false`.
+ *
+ * @param {string} [anyPropertyKey] The special property name that matches against any property.
+ * By default `$`.
+ *
+ * @example
+
+
+
+
+
+
+ | Name | Phone |
|---|
+
+ | {{friend.name}} |
+ {{friend.phone}} |
+
+
+
+
+
+
+
+
+ | Name | Phone |
|---|
+
+ | {{friendObj.name}} |
+ {{friendObj.phone}} |
+
+
+
+
+ var expectFriendNames = function(expectedNames, key) {
+ element.all(by.repeater(key + ' in friends').column(key + '.name')).then(function(arr) {
+ arr.forEach(function(wd, i) {
+ expect(wd.getText()).toMatch(expectedNames[i]);
+ });
});
+ };
+
+ it('should search across all fields when filtering with a string', function() {
+ var searchText = element(by.model('searchText'));
+ searchText.clear();
+ searchText.sendKeys('m');
+ expectFriendNames(['Mary', 'Mike', 'Adam'], 'friend');
+
+ searchText.clear();
+ searchText.sendKeys('76');
+ expectFriendNames(['John', 'Julie'], 'friend');
});
- };
-
- it('should search across all fields when filtering with a string', function() {
- var searchText = element(by.model('searchText'));
- searchText.clear();
- searchText.sendKeys('m');
- expectFriendNames(['Mary', 'Mike', 'Adam'], 'friend');
-
- searchText.clear();
- searchText.sendKeys('76');
- expectFriendNames(['John', 'Julie'], 'friend');
- });
-
- it('should search in specific fields when filtering with a predicate object', function() {
- var searchAny = element(by.model('search.$'));
- searchAny.clear();
- searchAny.sendKeys('i');
- expectFriendNames(['Mary', 'Mike', 'Julie', 'Juliette'], 'friendObj');
- });
- it('should use a equal comparison when comparator is true', function() {
- var searchName = element(by.model('search.name'));
- var strict = element(by.model('strict'));
- searchName.clear();
- searchName.sendKeys('Julie');
- strict.click();
- expectFriendNames(['Julie'], 'friendObj');
- });
-
-
- */
+
+ it('should search in specific fields when filtering with a predicate object', function() {
+ var searchAny = element(by.model('search.$'));
+ searchAny.clear();
+ searchAny.sendKeys('i');
+ expectFriendNames(['Mary', 'Mike', 'Julie', 'Juliette'], 'friendObj');
+ });
+ it('should use a equal comparison when comparator is true', function() {
+ var searchName = element(by.model('search.name'));
+ var strict = element(by.model('strict'));
+ searchName.clear();
+ searchName.sendKeys('Julie');
+ strict.click();
+ expectFriendNames(['Julie'], 'friendObj');
+ });
+
+
+ */
-function filterFilter() {
- return function(array, expression, comparator, anyPropertyKey) {
- if (!isArrayLike(array)) {
- if (array == null) {
- return array;
- } else {
- throw minErr('filter')('notarray', 'Expected array but received: {0}', array);
+ function filterFilter() {
+ return function (array, expression, comparator, anyPropertyKey) {
+ if (!isArrayLike(array)) {
+ if (array == null) {
+ return array;
+ } else {
+ throw minErr('filter')('notarray', 'Expected array but received: {0}', array);
+ }
}
- }
- anyPropertyKey = anyPropertyKey || '$';
- var expressionType = getTypeForFilter(expression);
- var predicateFn;
- var matchAgainstAnyProp;
+ anyPropertyKey = anyPropertyKey || '$';
+ var expressionType = getTypeForFilter(expression);
+ var predicateFn;
+ var matchAgainstAnyProp;
- switch (expressionType) {
- case 'function':
- predicateFn = expression;
- break;
- case 'boolean':
- case 'null':
- case 'number':
- case 'string':
- matchAgainstAnyProp = true;
+ switch (expressionType) {
+ case 'function':
+ predicateFn = expression;
+ break;
+ case 'boolean':
+ case 'null':
+ case 'number':
+ case 'string':
+ matchAgainstAnyProp = true;
// falls through
- case 'object':
- predicateFn = createPredicateFn(expression, comparator, anyPropertyKey, matchAgainstAnyProp);
- break;
- default:
- return array;
- }
-
- return Array.prototype.filter.call(array, predicateFn);
- };
-}
-
-// Helper functions for `filterFilter`
-function createPredicateFn(expression, comparator, anyPropertyKey, matchAgainstAnyProp) {
- var shouldMatchPrimitives = isObject(expression) && (anyPropertyKey in expression);
- var predicateFn;
-
- if (comparator === true) {
- comparator = equals;
- } else if (!isFunction(comparator)) {
- comparator = function(actual, expected) {
- if (isUndefined(actual)) {
- // No substring matching against `undefined`
- return false;
- }
- if ((actual === null) || (expected === null)) {
- // No substring matching against `null`; only match against `null`
- return actual === expected;
- }
- if (isObject(expected) || (isObject(actual) && !hasCustomToString(actual))) {
- // Should not compare primitives against objects, unless they have custom `toString` method
- return false;
+ case 'object':
+ predicateFn = createPredicateFn(expression, comparator, anyPropertyKey, matchAgainstAnyProp);
+ break;
+ default:
+ return array;
}
- actual = lowercase('' + actual);
- expected = lowercase('' + expected);
- return actual.indexOf(expected) !== -1;
+ return Array.prototype.filter.call(array, predicateFn);
};
}
- predicateFn = function(item) {
- if (shouldMatchPrimitives && !isObject(item)) {
- return deepCompare(item, expression[anyPropertyKey], comparator, anyPropertyKey, false);
- }
- return deepCompare(item, expression, comparator, anyPropertyKey, matchAgainstAnyProp);
- };
+ // Helper functions for `filterFilter`
+ function createPredicateFn(expression, comparator, anyPropertyKey, matchAgainstAnyProp) {
+ var shouldMatchPrimitives = isObject(expression) && anyPropertyKey in expression;
+ var predicateFn;
- return predicateFn;
-}
+ if (comparator === true) {
+ comparator = equals;
+ } else if (!isFunction(comparator)) {
+ comparator = function comparator(actual, expected) {
+ if (isUndefined(actual)) {
+ // No substring matching against `undefined`
+ return false;
+ }
+ if (actual === null || expected === null) {
+ // No substring matching against `null`; only match against `null`
+ return actual === expected;
+ }
+ if (isObject(expected) || isObject(actual) && !hasCustomToString(actual)) {
+ // Should not compare primitives against objects, unless they have custom `toString` method
+ return false;
+ }
+
+ actual = lowercase('' + actual);
+ expected = lowercase('' + expected);
+ return actual.indexOf(expected) !== -1;
+ };
+ }
-function deepCompare(actual, expected, comparator, anyPropertyKey, matchAgainstAnyProp, dontMatchWholeObject) {
- var actualType = getTypeForFilter(actual);
- var expectedType = getTypeForFilter(expected);
+ predicateFn = function predicateFn(item) {
+ if (shouldMatchPrimitives && !isObject(item)) {
+ return deepCompare(item, expression[anyPropertyKey], comparator, anyPropertyKey, false);
+ }
+ return deepCompare(item, expression, comparator, anyPropertyKey, matchAgainstAnyProp);
+ };
- if ((expectedType === 'string') && (expected.charAt(0) === '!')) {
- return !deepCompare(actual, expected.substring(1), comparator, anyPropertyKey, matchAgainstAnyProp);
- } else if (isArray(actual)) {
- // In case `actual` is an array, consider it a match
- // if ANY of it's items matches `expected`
- return actual.some(function(item) {
- return deepCompare(item, expected, comparator, anyPropertyKey, matchAgainstAnyProp);
- });
+ return predicateFn;
}
- switch (actualType) {
- case 'object':
- var key;
- if (matchAgainstAnyProp) {
- for (key in actual) {
- // Under certain, rare, circumstances, key may not be a string and `charAt` will be undefined
- // See: https://github.com/angular/angular.js/issues/15644
- if (key.charAt && (key.charAt(0) !== '$') &&
- deepCompare(actual[key], expected, comparator, anyPropertyKey, true)) {
- return true;
- }
- }
- return dontMatchWholeObject ? false : deepCompare(actual, expected, comparator, anyPropertyKey, false);
- } else if (expectedType === 'object') {
- for (key in expected) {
- var expectedVal = expected[key];
- if (isFunction(expectedVal) || isUndefined(expectedVal)) {
- continue;
+ function deepCompare(actual, expected, comparator, anyPropertyKey, matchAgainstAnyProp, dontMatchWholeObject) {
+ var actualType = getTypeForFilter(actual);
+ var expectedType = getTypeForFilter(expected);
+
+ if (expectedType === 'string' && expected.charAt(0) === '!') {
+ return !deepCompare(actual, expected.substring(1), comparator, anyPropertyKey, matchAgainstAnyProp);
+ } else if (isArray(actual)) {
+ // In case `actual` is an array, consider it a match
+ // if ANY of it's items matches `expected`
+ return actual.some(function (item) {
+ return deepCompare(item, expected, comparator, anyPropertyKey, matchAgainstAnyProp);
+ });
+ }
+
+ switch (actualType) {
+ case 'object':
+ var key;
+ if (matchAgainstAnyProp) {
+ for (key in actual) {
+ // Under certain, rare, circumstances, key may not be a string and `charAt` will be undefined
+ // See: https://github.com/angular/angular.js/issues/15644
+ if (key.charAt && key.charAt(0) !== '$' && deepCompare(actual[key], expected, comparator, anyPropertyKey, true)) {
+ return true;
+ }
}
+ return dontMatchWholeObject ? false : deepCompare(actual, expected, comparator, anyPropertyKey, false);
+ } else if (expectedType === 'object') {
+ for (key in expected) {
+ var expectedVal = expected[key];
+ if (isFunction(expectedVal) || isUndefined(expectedVal)) {
+ continue;
+ }
- var matchAnyProperty = key === anyPropertyKey;
- var actualVal = matchAnyProperty ? actual : actual[key];
- if (!deepCompare(actualVal, expectedVal, comparator, anyPropertyKey, matchAnyProperty, matchAnyProperty)) {
- return false;
+ var matchAnyProperty = key === anyPropertyKey;
+ var actualVal = matchAnyProperty ? actual : actual[key];
+ if (!deepCompare(actualVal, expectedVal, comparator, anyPropertyKey, matchAnyProperty, matchAnyProperty)) {
+ return false;
+ }
}
+ return true;
+ } else {
+ return comparator(actual, expected);
}
- return true;
- } else {
+ case 'function':
+ return false;
+ default:
return comparator(actual, expected);
- }
- case 'function':
- return false;
- default:
- return comparator(actual, expected);
+ }
}
-}
-// Used for easily differentiating between `null` and actual `object`
-function getTypeForFilter(val) {
- return (val === null) ? 'null' : typeof val;
-}
+ // Used for easily differentiating between `null` and actual `object`
+ function getTypeForFilter(val) {
+ return val === null ? 'null' : typeof val === 'undefined' ? 'undefined' : _typeof(val);
+ }
-var MAX_DIGITS = 22;
-var DECIMAL_SEP = '.';
-var ZERO_CHAR = '0';
+ var MAX_DIGITS = 22;
+ var DECIMAL_SEP = '.';
+ var ZERO_CHAR = '0';
-/**
- * @ngdoc filter
- * @name currency
- * @kind function
- *
- * @description
- * Formats a number as a currency (ie $1,234.56). When no currency symbol is provided, default
- * symbol for current locale is used.
- *
- * @param {number} amount Input to filter.
- * @param {string=} symbol Currency symbol or identifier to be displayed.
- * @param {number=} fractionSize Number of decimal places to round the amount to, defaults to default max fraction size for current locale
- * @returns {string} Formatted number.
- *
- *
- * @example
-
-
-
-
-
- default currency symbol ($): {{amount | currency}}
- custom currency identifier (USD$): {{amount | currency:"USD$"}}
- no fractions (0): {{amount | currency:"USD$":0}}
-
-
-
- it('should init with 1234.56', function() {
- expect(element(by.id('currency-default')).getText()).toBe('$1,234.56');
- expect(element(by.id('currency-custom')).getText()).toBe('USD$1,234.56');
- expect(element(by.id('currency-no-fractions')).getText()).toBe('USD$1,235');
- });
- it('should update', function() {
- if (browser.params.browser === 'safari') {
- // Safari does not understand the minus key. See
- // https://github.com/angular/protractor/issues/481
- return;
- }
- element(by.model('amount')).clear();
- element(by.model('amount')).sendKeys('-1234');
- expect(element(by.id('currency-default')).getText()).toBe('-$1,234.00');
- expect(element(by.id('currency-custom')).getText()).toBe('-USD$1,234.00');
- expect(element(by.id('currency-no-fractions')).getText()).toBe('-USD$1,234');
- });
-
-
- */
-currencyFilter.$inject = ['$locale'];
-function currencyFilter($locale) {
- var formats = $locale.NUMBER_FORMATS;
- return function(amount, currencySymbol, fractionSize) {
- if (isUndefined(currencySymbol)) {
- currencySymbol = formats.CURRENCY_SYM;
- }
+ /**
+ * @ngdoc filter
+ * @name currency
+ * @kind function
+ *
+ * @description
+ * Formats a number as a currency (ie $1,234.56). When no currency symbol is provided, default
+ * symbol for current locale is used.
+ *
+ * @param {number} amount Input to filter.
+ * @param {string=} symbol Currency symbol or identifier to be displayed.
+ * @param {number=} fractionSize Number of decimal places to round the amount to, defaults to default max fraction size for current locale
+ * @returns {string} Formatted number.
+ *
+ *
+ * @example
+
+
+
+
+
+ default currency symbol ($): {{amount | currency}}
+ custom currency identifier (USD$): {{amount | currency:"USD$"}}
+ no fractions (0): {{amount | currency:"USD$":0}}
+
+
+
+ it('should init with 1234.56', function() {
+ expect(element(by.id('currency-default')).getText()).toBe('$1,234.56');
+ expect(element(by.id('currency-custom')).getText()).toBe('USD$1,234.56');
+ expect(element(by.id('currency-no-fractions')).getText()).toBe('USD$1,235');
+ });
+ it('should update', function() {
+ if (browser.params.browser === 'safari') {
+ // Safari does not understand the minus key. See
+ // https://github.com/angular/protractor/issues/481
+ return;
+ }
+ element(by.model('amount')).clear();
+ element(by.model('amount')).sendKeys('-1234');
+ expect(element(by.id('currency-default')).getText()).toBe('-$1,234.00');
+ expect(element(by.id('currency-custom')).getText()).toBe('-USD$1,234.00');
+ expect(element(by.id('currency-no-fractions')).getText()).toBe('-USD$1,234');
+ });
+
+
+ */
+ currencyFilter.$inject = ['$locale'];
+ function currencyFilter($locale) {
+ var formats = $locale.NUMBER_FORMATS;
+ return function (amount, currencySymbol, fractionSize) {
+ if (isUndefined(currencySymbol)) {
+ currencySymbol = formats.CURRENCY_SYM;
+ }
- if (isUndefined(fractionSize)) {
- fractionSize = formats.PATTERNS[1].maxFrac;
- }
+ if (isUndefined(fractionSize)) {
+ fractionSize = formats.PATTERNS[1].maxFrac;
+ }
- // if null or undefined pass it through
- return (amount == null)
- ? amount
- : formatNumber(amount, formats.PATTERNS[1], formats.GROUP_SEP, formats.DECIMAL_SEP, fractionSize).
- replace(/\u00A4/g, currencySymbol);
- };
-}
+ // if null or undefined pass it through
+ return amount == null ? amount : formatNumber(amount, formats.PATTERNS[1], formats.GROUP_SEP, formats.DECIMAL_SEP, fractionSize).replace(/\u00A4/g, currencySymbol);
+ };
+ }
-/**
- * @ngdoc filter
- * @name number
- * @kind function
- *
- * @description
- * Formats a number as text.
- *
- * If the input is null or undefined, it will just be returned.
- * If the input is infinite (Infinity or -Infinity), the Infinity symbol '∞' or '-∞' is returned, respectively.
- * If the input is not a number an empty string is returned.
- *
- *
- * @param {number|string} number Number to format.
- * @param {(number|string)=} fractionSize Number of decimal places to round the number to.
- * If this is not provided then the fraction size is computed from the current locale's number
- * formatting pattern. In the case of the default locale, it will be 3.
- * @returns {string} Number rounded to `fractionSize` appropriately formatted based on the current
- * locale (e.g., in the en_US locale it will have "." as the decimal separator and
- * include "," group separators after each third digit).
- *
- * @example
-
-
-
-
-
- Default formatting: {{val | number}}
- No fractions: {{val | number:0}}
- Negative number: {{-val | number:4}}
-
-
-
- it('should format numbers', function() {
- expect(element(by.id('number-default')).getText()).toBe('1,234.568');
- expect(element(by.binding('val | number:0')).getText()).toBe('1,235');
- expect(element(by.binding('-val | number:4')).getText()).toBe('-1,234.5679');
- });
+ /**
+ * @ngdoc filter
+ * @name number
+ * @kind function
+ *
+ * @description
+ * Formats a number as text.
+ *
+ * If the input is null or undefined, it will just be returned.
+ * If the input is infinite (Infinity or -Infinity), the Infinity symbol '∞' or '-∞' is returned, respectively.
+ * If the input is not a number an empty string is returned.
+ *
+ *
+ * @param {number|string} number Number to format.
+ * @param {(number|string)=} fractionSize Number of decimal places to round the number to.
+ * If this is not provided then the fraction size is computed from the current locale's number
+ * formatting pattern. In the case of the default locale, it will be 3.
+ * @returns {string} Number rounded to `fractionSize` appropriately formatted based on the current
+ * locale (e.g., in the en_US locale it will have "." as the decimal separator and
+ * include "," group separators after each third digit).
+ *
+ * @example
+
+
+
+
+
+ Default formatting: {{val | number}}
+ No fractions: {{val | number:0}}
+ Negative number: {{-val | number:4}}
+
+
+
+ it('should format numbers', function() {
+ expect(element(by.id('number-default')).getText()).toBe('1,234.568');
+ expect(element(by.binding('val | number:0')).getText()).toBe('1,235');
+ expect(element(by.binding('-val | number:4')).getText()).toBe('-1,234.5679');
+ });
+
+ it('should update', function() {
+ element(by.model('val')).clear();
+ element(by.model('val')).sendKeys('3374.333');
+ expect(element(by.id('number-default')).getText()).toBe('3,374.333');
+ expect(element(by.binding('val | number:0')).getText()).toBe('3,374');
+ expect(element(by.binding('-val | number:4')).getText()).toBe('-3,374.3330');
+ });
+
+
+ */
+ numberFilter.$inject = ['$locale'];
+ function numberFilter($locale) {
+ var formats = $locale.NUMBER_FORMATS;
+ return function (number, fractionSize) {
- it('should update', function() {
- element(by.model('val')).clear();
- element(by.model('val')).sendKeys('3374.333');
- expect(element(by.id('number-default')).getText()).toBe('3,374.333');
- expect(element(by.binding('val | number:0')).getText()).toBe('3,374');
- expect(element(by.binding('-val | number:4')).getText()).toBe('-3,374.3330');
- });
-
-
- */
-numberFilter.$inject = ['$locale'];
-function numberFilter($locale) {
- var formats = $locale.NUMBER_FORMATS;
- return function(number, fractionSize) {
-
- // if null or undefined pass it through
- return (number == null)
- ? number
- : formatNumber(number, formats.PATTERNS[0], formats.GROUP_SEP, formats.DECIMAL_SEP,
- fractionSize);
- };
-}
+ // if null or undefined pass it through
+ return number == null ? number : formatNumber(number, formats.PATTERNS[0], formats.GROUP_SEP, formats.DECIMAL_SEP, fractionSize);
+ };
+ }
-/**
- * Parse a number (as a string) into three components that can be used
- * for formatting the number.
- *
- * (Significant bits of this parse algorithm came from https://github.com/MikeMcl/big.js/)
- *
- * @param {string} numStr The number to parse
- * @return {object} An object describing this number, containing the following keys:
- * - d : an array of digits containing leading zeros as necessary
- * - i : the number of the digits in `d` that are to the left of the decimal point
- * - e : the exponent for numbers that would need more than `MAX_DIGITS` digits in `d`
- *
- */
-function parse(numStr) {
- var exponent = 0, digits, numberOfIntegerDigits;
- var i, j, zeros;
+ /**
+ * Parse a number (as a string) into three components that can be used
+ * for formatting the number.
+ *
+ * (Significant bits of this parse algorithm came from https://github.com/MikeMcl/big.js/)
+ *
+ * @param {string} numStr The number to parse
+ * @return {object} An object describing this number, containing the following keys:
+ * - d : an array of digits containing leading zeros as necessary
+ * - i : the number of the digits in `d` that are to the left of the decimal point
+ * - e : the exponent for numbers that would need more than `MAX_DIGITS` digits in `d`
+ *
+ */
+ function parse(numStr) {
+ var exponent = 0,
+ digits,
+ numberOfIntegerDigits;
+ var i, j, zeros;
- // Decimal point?
- if ((numberOfIntegerDigits = numStr.indexOf(DECIMAL_SEP)) > -1) {
- numStr = numStr.replace(DECIMAL_SEP, '');
- }
+ // Decimal point?
+ if ((numberOfIntegerDigits = numStr.indexOf(DECIMAL_SEP)) > -1) {
+ numStr = numStr.replace(DECIMAL_SEP, '');
+ }
- // Exponential form?
- if ((i = numStr.search(/e/i)) > 0) {
- // Work out the exponent.
- if (numberOfIntegerDigits < 0) numberOfIntegerDigits = i;
- numberOfIntegerDigits += +numStr.slice(i + 1);
- numStr = numStr.substring(0, i);
- } else if (numberOfIntegerDigits < 0) {
- // There was no decimal point or exponent so it is an integer.
- numberOfIntegerDigits = numStr.length;
- }
+ // Exponential form?
+ if ((i = numStr.search(/e/i)) > 0) {
+ // Work out the exponent.
+ if (numberOfIntegerDigits < 0) numberOfIntegerDigits = i;
+ numberOfIntegerDigits += +numStr.slice(i + 1);
+ numStr = numStr.substring(0, i);
+ } else if (numberOfIntegerDigits < 0) {
+ // There was no decimal point or exponent so it is an integer.
+ numberOfIntegerDigits = numStr.length;
+ }
- // Count the number of leading zeros.
- for (i = 0; numStr.charAt(i) === ZERO_CHAR; i++) { /* empty */ }
+ // Count the number of leading zeros.
+ for (i = 0; numStr.charAt(i) === ZERO_CHAR; i++) {/* empty */}
- if (i === (zeros = numStr.length)) {
- // The digits are all zero.
- digits = [0];
- numberOfIntegerDigits = 1;
- } else {
- // Count the number of trailing zeros
- zeros--;
- while (numStr.charAt(zeros) === ZERO_CHAR) zeros--;
+ if (i === (zeros = numStr.length)) {
+ // The digits are all zero.
+ digits = [0];
+ numberOfIntegerDigits = 1;
+ } else {
+ // Count the number of trailing zeros
+ zeros--;
+ while (numStr.charAt(zeros) === ZERO_CHAR) {
+ zeros--;
+ } // Trailing zeros are insignificant so ignore them
+ numberOfIntegerDigits -= i;
+ digits = [];
+ // Convert string to array of digits without leading/trailing zeros.
+ for (j = 0; i <= zeros; i++, j++) {
+ digits[j] = +numStr.charAt(i);
+ }
+ }
- // Trailing zeros are insignificant so ignore them
- numberOfIntegerDigits -= i;
- digits = [];
- // Convert string to array of digits without leading/trailing zeros.
- for (j = 0; i <= zeros; i++, j++) {
- digits[j] = +numStr.charAt(i);
+ // If the number overflows the maximum allowed digits then use an exponent.
+ if (numberOfIntegerDigits > MAX_DIGITS) {
+ digits = digits.splice(0, MAX_DIGITS - 1);
+ exponent = numberOfIntegerDigits - 1;
+ numberOfIntegerDigits = 1;
}
- }
- // If the number overflows the maximum allowed digits then use an exponent.
- if (numberOfIntegerDigits > MAX_DIGITS) {
- digits = digits.splice(0, MAX_DIGITS - 1);
- exponent = numberOfIntegerDigits - 1;
- numberOfIntegerDigits = 1;
+ return { d: digits, e: exponent, i: numberOfIntegerDigits };
}
- return { d: digits, e: exponent, i: numberOfIntegerDigits };
-}
-
-/**
- * Round the parsed number to the specified number of decimal places
- * This function changed the parsedNumber in-place
- */
-function roundNumber(parsedNumber, fractionSize, minFrac, maxFrac) {
+ /**
+ * Round the parsed number to the specified number of decimal places
+ * This function changed the parsedNumber in-place
+ */
+ function roundNumber(parsedNumber, fractionSize, minFrac, maxFrac) {
var digits = parsedNumber.d;
var fractionLen = digits.length - parsedNumber.i;
// determine fractionSize if it is not specified; `+fractionSize` converts it to a number
- fractionSize = (isUndefined(fractionSize)) ? Math.min(Math.max(minFrac, fractionLen), maxFrac) : +fractionSize;
+ fractionSize = isUndefined(fractionSize) ? Math.min(Math.max(minFrac, fractionLen), maxFrac) : +fractionSize;
// The index of the digit to where rounding is to occur
var roundAt = fractionSize + parsedNumber.i;
@@ -56332,7 +55837,9 @@ function roundNumber(parsedNumber, fractionSize, minFrac, maxFrac) {
parsedNumber.i = 1;
digits.length = Math.max(1, roundAt = fractionSize + 1);
digits[0] = 0;
- for (var i = 1; i < roundAt; i++) digits[i] = 0;
+ for (var i = 1; i < roundAt; i++) {
+ digits[i] = 0;
+ }
}
if (digit >= 5) {
@@ -56349,11 +55856,10 @@ function roundNumber(parsedNumber, fractionSize, minFrac, maxFrac) {
}
// Pad out with zeros to get the required fraction length
- for (; fractionLen < Math.max(0, fractionSize); fractionLen++) digits.push(0);
-
-
- // Do any carrying, e.g. a digit was rounded up to 10
- var carry = digits.reduceRight(function(carry, d, i, digits) {
+ for (; fractionLen < Math.max(0, fractionSize); fractionLen++) {
+ digits.push(0);
+ } // Do any carrying, e.g. a digit was rounded up to 10
+ var carry = digits.reduceRight(function (carry, d, i, digits) {
d = d + carry;
digits[i] = d % 10;
return Math.floor(d / 10);
@@ -56362,2605 +55868,2594 @@ function roundNumber(parsedNumber, fractionSize, minFrac, maxFrac) {
digits.unshift(carry);
parsedNumber.i++;
}
-}
+ }
-/**
- * Format a number into a string
- * @param {number} number The number to format
- * @param {{
- * minFrac, // the minimum number of digits required in the fraction part of the number
- * maxFrac, // the maximum number of digits required in the fraction part of the number
- * gSize, // number of digits in each group of separated digits
- * lgSize, // number of digits in the last group of digits before the decimal separator
- * negPre, // the string to go in front of a negative number (e.g. `-` or `(`))
- * posPre, // the string to go in front of a positive number
- * negSuf, // the string to go after a negative number (e.g. `)`)
- * posSuf // the string to go after a positive number
- * }} pattern
- * @param {string} groupSep The string to separate groups of number (e.g. `,`)
- * @param {string} decimalSep The string to act as the decimal separator (e.g. `.`)
- * @param {[type]} fractionSize The size of the fractional part of the number
- * @return {string} The number formatted as a string
- */
-function formatNumber(number, pattern, groupSep, decimalSep, fractionSize) {
+ /**
+ * Format a number into a string
+ * @param {number} number The number to format
+ * @param {{
+ * minFrac, // the minimum number of digits required in the fraction part of the number
+ * maxFrac, // the maximum number of digits required in the fraction part of the number
+ * gSize, // number of digits in each group of separated digits
+ * lgSize, // number of digits in the last group of digits before the decimal separator
+ * negPre, // the string to go in front of a negative number (e.g. `-` or `(`))
+ * posPre, // the string to go in front of a positive number
+ * negSuf, // the string to go after a negative number (e.g. `)`)
+ * posSuf // the string to go after a positive number
+ * }} pattern
+ * @param {string} groupSep The string to separate groups of number (e.g. `,`)
+ * @param {string} decimalSep The string to act as the decimal separator (e.g. `.`)
+ * @param {[type]} fractionSize The size of the fractional part of the number
+ * @return {string} The number formatted as a string
+ */
+ function formatNumber(number, pattern, groupSep, decimalSep, fractionSize) {
- if (!(isString(number) || isNumber(number)) || isNaN(number)) return '';
+ if (!(isString(number) || isNumber(number)) || isNaN(number)) return '';
- var isInfinity = !isFinite(number);
- var isZero = false;
- var numStr = Math.abs(number) + '',
- formattedText = '',
- parsedNumber;
+ var isInfinity = !isFinite(number);
+ var isZero = false;
+ var numStr = Math.abs(number) + '',
+ formattedText = '',
+ parsedNumber;
- if (isInfinity) {
- formattedText = '\u221e';
- } else {
- parsedNumber = parse(numStr);
+ if (isInfinity) {
+ formattedText = '\u221E';
+ } else {
+ parsedNumber = parse(numStr);
- roundNumber(parsedNumber, fractionSize, pattern.minFrac, pattern.maxFrac);
+ roundNumber(parsedNumber, fractionSize, pattern.minFrac, pattern.maxFrac);
- var digits = parsedNumber.d;
- var integerLen = parsedNumber.i;
- var exponent = parsedNumber.e;
- var decimals = [];
- isZero = digits.reduce(function(isZero, d) { return isZero && !d; }, true);
+ var digits = parsedNumber.d;
+ var integerLen = parsedNumber.i;
+ var exponent = parsedNumber.e;
+ var decimals = [];
+ isZero = digits.reduce(function (isZero, d) {
+ return isZero && !d;
+ }, true);
- // pad zeros for small numbers
- while (integerLen < 0) {
- digits.unshift(0);
- integerLen++;
- }
+ // pad zeros for small numbers
+ while (integerLen < 0) {
+ digits.unshift(0);
+ integerLen++;
+ }
- // extract decimals digits
- if (integerLen > 0) {
- decimals = digits.splice(integerLen, digits.length);
- } else {
- decimals = digits;
- digits = [0];
- }
+ // extract decimals digits
+ if (integerLen > 0) {
+ decimals = digits.splice(integerLen, digits.length);
+ } else {
+ decimals = digits;
+ digits = [0];
+ }
- // format the integer digits with grouping separators
- var groups = [];
- if (digits.length >= pattern.lgSize) {
- groups.unshift(digits.splice(-pattern.lgSize, digits.length).join(''));
- }
- while (digits.length > pattern.gSize) {
- groups.unshift(digits.splice(-pattern.gSize, digits.length).join(''));
- }
- if (digits.length) {
- groups.unshift(digits.join(''));
- }
- formattedText = groups.join(groupSep);
+ // format the integer digits with grouping separators
+ var groups = [];
+ if (digits.length >= pattern.lgSize) {
+ groups.unshift(digits.splice(-pattern.lgSize, digits.length).join(''));
+ }
+ while (digits.length > pattern.gSize) {
+ groups.unshift(digits.splice(-pattern.gSize, digits.length).join(''));
+ }
+ if (digits.length) {
+ groups.unshift(digits.join(''));
+ }
+ formattedText = groups.join(groupSep);
- // append the decimal digits
- if (decimals.length) {
- formattedText += decimalSep + decimals.join('');
- }
+ // append the decimal digits
+ if (decimals.length) {
+ formattedText += decimalSep + decimals.join('');
+ }
- if (exponent) {
- formattedText += 'e+' + exponent;
+ if (exponent) {
+ formattedText += 'e+' + exponent;
+ }
}
- }
- if (number < 0 && !isZero) {
- return pattern.negPre + formattedText + pattern.negSuf;
- } else {
- return pattern.posPre + formattedText + pattern.posSuf;
- }
-}
-
-function padNumber(num, digits, trim, negWrap) {
- var neg = '';
- if (num < 0 || (negWrap && num <= 0)) {
- if (negWrap) {
- num = -num + 1;
+ if (number < 0 && !isZero) {
+ return pattern.negPre + formattedText + pattern.negSuf;
} else {
- num = -num;
- neg = '-';
+ return pattern.posPre + formattedText + pattern.posSuf;
}
}
- num = '' + num;
- while (num.length < digits) num = ZERO_CHAR + num;
- if (trim) {
- num = num.substr(num.length - digits);
- }
- return neg + num;
-}
-
-function dateGetter(name, size, offset, trim, negWrap) {
- offset = offset || 0;
- return function(date) {
- var value = date['get' + name]();
- if (offset > 0 || value > -offset) {
- value += offset;
+ function padNumber(num, digits, trim, negWrap) {
+ var neg = '';
+ if (num < 0 || negWrap && num <= 0) {
+ if (negWrap) {
+ num = -num + 1;
+ } else {
+ num = -num;
+ neg = '-';
+ }
}
- if (value === 0 && offset === -12) value = 12;
- return padNumber(value, size, trim, negWrap);
- };
-}
+ num = '' + num;
+ while (num.length < digits) {
+ num = ZERO_CHAR + num;
+ }if (trim) {
+ num = num.substr(num.length - digits);
+ }
+ return neg + num;
+ }
-function dateStrGetter(name, shortForm, standAlone) {
- return function(date, formats) {
- var value = date['get' + name]();
- var propPrefix = (standAlone ? 'STANDALONE' : '') + (shortForm ? 'SHORT' : '');
- var get = uppercase(propPrefix + name);
+ function dateGetter(name, size, offset, trim, negWrap) {
+ offset = offset || 0;
+ return function (date) {
+ var value = date['get' + name]();
+ if (offset > 0 || value > -offset) {
+ value += offset;
+ }
+ if (value === 0 && offset === -12) value = 12;
+ return padNumber(value, size, trim, negWrap);
+ };
+ }
- return formats[get][value];
- };
-}
+ function dateStrGetter(name, shortForm, standAlone) {
+ return function (date, formats) {
+ var value = date['get' + name]();
+ var propPrefix = (standAlone ? 'STANDALONE' : '') + (shortForm ? 'SHORT' : '');
+ var get = uppercase(propPrefix + name);
-function timeZoneGetter(date, formats, offset) {
- var zone = -1 * offset;
- var paddedZone = (zone >= 0) ? '+' : '';
+ return formats[get][value];
+ };
+ }
- paddedZone += padNumber(Math[zone > 0 ? 'floor' : 'ceil'](zone / 60), 2) +
- padNumber(Math.abs(zone % 60), 2);
+ function timeZoneGetter(date, formats, offset) {
+ var zone = -1 * offset;
+ var paddedZone = zone >= 0 ? '+' : '';
- return paddedZone;
-}
+ paddedZone += padNumber(Math[zone > 0 ? 'floor' : 'ceil'](zone / 60), 2) + padNumber(Math.abs(zone % 60), 2);
-function getFirstThursdayOfYear(year) {
+ return paddedZone;
+ }
+
+ function getFirstThursdayOfYear(year) {
// 0 = index of January
- var dayOfWeekOnFirst = (new Date(year, 0, 1)).getDay();
+ var dayOfWeekOnFirst = new Date(year, 0, 1).getDay();
// 4 = index of Thursday (+1 to account for 1st = 5)
// 11 = index of *next* Thursday (+1 account for 1st = 12)
- return new Date(year, 0, ((dayOfWeekOnFirst <= 4) ? 5 : 12) - dayOfWeekOnFirst);
-}
+ return new Date(year, 0, (dayOfWeekOnFirst <= 4 ? 5 : 12) - dayOfWeekOnFirst);
+ }
-function getThursdayThisWeek(datetime) {
+ function getThursdayThisWeek(datetime) {
return new Date(datetime.getFullYear(), datetime.getMonth(),
- // 4 = index of Thursday
- datetime.getDate() + (4 - datetime.getDay()));
-}
+ // 4 = index of Thursday
+ datetime.getDate() + (4 - datetime.getDay()));
+ }
-function weekGetter(size) {
- return function(date) {
+ function weekGetter(size) {
+ return function (date) {
var firstThurs = getFirstThursdayOfYear(date.getFullYear()),
- thisThurs = getThursdayThisWeek(date);
+ thisThurs = getThursdayThisWeek(date);
var diff = +thisThurs - +firstThurs,
- result = 1 + Math.round(diff / 6.048e8); // 6.048e8 ms per week
+ result = 1 + Math.round(diff / 6.048e8); // 6.048e8 ms per week
return padNumber(result, size);
- };
-}
+ };
+ }
-function ampmGetter(date, formats) {
- return date.getHours() < 12 ? formats.AMPMS[0] : formats.AMPMS[1];
-}
+ function ampmGetter(date, formats) {
+ return date.getHours() < 12 ? formats.AMPMS[0] : formats.AMPMS[1];
+ }
-function eraGetter(date, formats) {
- return date.getFullYear() <= 0 ? formats.ERAS[0] : formats.ERAS[1];
-}
+ function eraGetter(date, formats) {
+ return date.getFullYear() <= 0 ? formats.ERAS[0] : formats.ERAS[1];
+ }
-function longEraGetter(date, formats) {
- return date.getFullYear() <= 0 ? formats.ERANAMES[0] : formats.ERANAMES[1];
-}
+ function longEraGetter(date, formats) {
+ return date.getFullYear() <= 0 ? formats.ERANAMES[0] : formats.ERANAMES[1];
+ }
-var DATE_FORMATS = {
- yyyy: dateGetter('FullYear', 4, 0, false, true),
+ var DATE_FORMATS = {
+ yyyy: dateGetter('FullYear', 4, 0, false, true),
yy: dateGetter('FullYear', 2, 0, true, true),
- y: dateGetter('FullYear', 1, 0, false, true),
- MMMM: dateStrGetter('Month'),
- MMM: dateStrGetter('Month', true),
+ y: dateGetter('FullYear', 1, 0, false, true),
+ MMMM: dateStrGetter('Month'),
+ MMM: dateStrGetter('Month', true),
MM: dateGetter('Month', 2, 1),
- M: dateGetter('Month', 1, 1),
- LLLL: dateStrGetter('Month', false, true),
+ M: dateGetter('Month', 1, 1),
+ LLLL: dateStrGetter('Month', false, true),
dd: dateGetter('Date', 2),
- d: dateGetter('Date', 1),
+ d: dateGetter('Date', 1),
HH: dateGetter('Hours', 2),
- H: dateGetter('Hours', 1),
+ H: dateGetter('Hours', 1),
hh: dateGetter('Hours', 2, -12),
- h: dateGetter('Hours', 1, -12),
+ h: dateGetter('Hours', 1, -12),
mm: dateGetter('Minutes', 2),
- m: dateGetter('Minutes', 1),
+ m: dateGetter('Minutes', 1),
ss: dateGetter('Seconds', 2),
- s: dateGetter('Seconds', 1),
- // while ISO 8601 requires fractions to be prefixed with `.` or `,`
- // we can be just safely rely on using `sss` since we currently don't support single or two digit fractions
- sss: dateGetter('Milliseconds', 3),
- EEEE: dateStrGetter('Day'),
- EEE: dateStrGetter('Day', true),
- a: ampmGetter,
- Z: timeZoneGetter,
+ s: dateGetter('Seconds', 1),
+ // while ISO 8601 requires fractions to be prefixed with `.` or `,`
+ // we can be just safely rely on using `sss` since we currently don't support single or two digit fractions
+ sss: dateGetter('Milliseconds', 3),
+ EEEE: dateStrGetter('Day'),
+ EEE: dateStrGetter('Day', true),
+ a: ampmGetter,
+ Z: timeZoneGetter,
ww: weekGetter(2),
- w: weekGetter(1),
- G: eraGetter,
- GG: eraGetter,
- GGG: eraGetter,
- GGGG: longEraGetter
-};
-
-var DATE_FORMATS_SPLIT = /((?:[^yMLdHhmsaZEwG']+)|(?:'(?:[^']|'')*')|(?:E+|y+|M+|L+|d+|H+|h+|m+|s+|a|Z|G+|w+))([\s\S]*)/,
- NUMBER_STRING = /^-?\d+$/;
+ w: weekGetter(1),
+ G: eraGetter,
+ GG: eraGetter,
+ GGG: eraGetter,
+ GGGG: longEraGetter
+ };
-/**
- * @ngdoc filter
- * @name date
- * @kind function
- *
- * @description
- * Formats `date` to a string based on the requested `format`.
- *
- * `format` string can be composed of the following elements:
- *
- * * `'yyyy'`: 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)
- * * `'yy'`: 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)
- * * `'y'`: 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)
- * * `'MMMM'`: Month in year (January-December)
- * * `'MMM'`: Month in year (Jan-Dec)
- * * `'MM'`: Month in year, padded (01-12)
- * * `'M'`: Month in year (1-12)
- * * `'LLLL'`: Stand-alone month in year (January-December)
- * * `'dd'`: Day in month, padded (01-31)
- * * `'d'`: Day in month (1-31)
- * * `'EEEE'`: Day in Week,(Sunday-Saturday)
- * * `'EEE'`: Day in Week, (Sun-Sat)
- * * `'HH'`: Hour in day, padded (00-23)
- * * `'H'`: Hour in day (0-23)
- * * `'hh'`: Hour in AM/PM, padded (01-12)
- * * `'h'`: Hour in AM/PM, (1-12)
- * * `'mm'`: Minute in hour, padded (00-59)
- * * `'m'`: Minute in hour (0-59)
- * * `'ss'`: Second in minute, padded (00-59)
- * * `'s'`: Second in minute (0-59)
- * * `'sss'`: Millisecond in second, padded (000-999)
- * * `'a'`: AM/PM marker
- * * `'Z'`: 4 digit (+sign) representation of the timezone offset (-1200-+1200)
- * * `'ww'`: Week of year, padded (00-53). Week 01 is the week with the first Thursday of the year
- * * `'w'`: Week of year (0-53). Week 1 is the week with the first Thursday of the year
- * * `'G'`, `'GG'`, `'GGG'`: The abbreviated form of the era string (e.g. 'AD')
- * * `'GGGG'`: The long form of the era string (e.g. 'Anno Domini')
- *
- * `format` string can also be one of the following predefined
- * {@link guide/i18n localizable formats}:
- *
- * * `'medium'`: equivalent to `'MMM d, y h:mm:ss a'` for en_US locale
- * (e.g. Sep 3, 2010 12:05:08 PM)
- * * `'short'`: equivalent to `'M/d/yy h:mm a'` for en_US locale (e.g. 9/3/10 12:05 PM)
- * * `'fullDate'`: equivalent to `'EEEE, MMMM d, y'` for en_US locale
- * (e.g. Friday, September 3, 2010)
- * * `'longDate'`: equivalent to `'MMMM d, y'` for en_US locale (e.g. September 3, 2010)
- * * `'mediumDate'`: equivalent to `'MMM d, y'` for en_US locale (e.g. Sep 3, 2010)
- * * `'shortDate'`: equivalent to `'M/d/yy'` for en_US locale (e.g. 9/3/10)
- * * `'mediumTime'`: equivalent to `'h:mm:ss a'` for en_US locale (e.g. 12:05:08 PM)
- * * `'shortTime'`: equivalent to `'h:mm a'` for en_US locale (e.g. 12:05 PM)
- *
- * `format` string can contain literal values. These need to be escaped by surrounding with single quotes (e.g.
- * `"h 'in the morning'"`). In order to output a single quote, escape it - i.e., two single quotes in a sequence
- * (e.g. `"h 'o''clock'"`).
- *
- * Any other characters in the `format` string will be output as-is.
- *
- * @param {(Date|number|string)} date Date to format either as Date object, milliseconds (string or
- * number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its
- * shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is
- * specified in the string input, the time is considered to be in the local timezone.
- * @param {string=} format Formatting rules (see Description). If not specified,
- * `mediumDate` is used.
- * @param {string=} timezone Timezone to be used for formatting. It understands UTC/GMT and the
- * continental US time zone abbreviations, but for general use, use a time zone offset, for
- * example, `'+0430'` (4 hours, 30 minutes east of the Greenwich meridian)
- * If not specified, the timezone of the browser will be used.
- * @returns {string} Formatted string or the input if input is not recognized as date/millis.
- *
- * @example
-
-
- {{1288323623006 | date:'medium'}}:
- {{1288323623006 | date:'medium'}}
- {{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}:
- {{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}
- {{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}:
- {{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}
- {{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}:
- {{'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}}
-
-
- it('should format date', function() {
- expect(element(by.binding("1288323623006 | date:'medium'")).getText()).
- toMatch(/Oct 2\d, 2010 \d{1,2}:\d{2}:\d{2} (AM|PM)/);
- expect(element(by.binding("1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'")).getText()).
- toMatch(/2010-10-2\d \d{2}:\d{2}:\d{2} (-|\+)?\d{4}/);
- expect(element(by.binding("'1288323623006' | date:'MM/dd/yyyy @ h:mma'")).getText()).
- toMatch(/10\/2\d\/2010 @ \d{1,2}:\d{2}(AM|PM)/);
- expect(element(by.binding("'1288323623006' | date:\"MM/dd/yyyy 'at' h:mma\"")).getText()).
- toMatch(/10\/2\d\/2010 at \d{1,2}:\d{2}(AM|PM)/);
- });
-
-
- */
-dateFilter.$inject = ['$locale'];
-function dateFilter($locale) {
+ var DATE_FORMATS_SPLIT = /((?:[^yMLdHhmsaZEwG']+)|(?:'(?:[^']|'')*')|(?:E+|y+|M+|L+|d+|H+|h+|m+|s+|a|Z|G+|w+))([\s\S]*)/,
+ NUMBER_STRING = /^-?\d+$/;
+ /**
+ * @ngdoc filter
+ * @name date
+ * @kind function
+ *
+ * @description
+ * Formats `date` to a string based on the requested `format`.
+ *
+ * `format` string can be composed of the following elements:
+ *
+ * * `'yyyy'`: 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)
+ * * `'yy'`: 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)
+ * * `'y'`: 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)
+ * * `'MMMM'`: Month in year (January-December)
+ * * `'MMM'`: Month in year (Jan-Dec)
+ * * `'MM'`: Month in year, padded (01-12)
+ * * `'M'`: Month in year (1-12)
+ * * `'LLLL'`: Stand-alone month in year (January-December)
+ * * `'dd'`: Day in month, padded (01-31)
+ * * `'d'`: Day in month (1-31)
+ * * `'EEEE'`: Day in Week,(Sunday-Saturday)
+ * * `'EEE'`: Day in Week, (Sun-Sat)
+ * * `'HH'`: Hour in day, padded (00-23)
+ * * `'H'`: Hour in day (0-23)
+ * * `'hh'`: Hour in AM/PM, padded (01-12)
+ * * `'h'`: Hour in AM/PM, (1-12)
+ * * `'mm'`: Minute in hour, padded (00-59)
+ * * `'m'`: Minute in hour (0-59)
+ * * `'ss'`: Second in minute, padded (00-59)
+ * * `'s'`: Second in minute (0-59)
+ * * `'sss'`: Millisecond in second, padded (000-999)
+ * * `'a'`: AM/PM marker
+ * * `'Z'`: 4 digit (+sign) representation of the timezone offset (-1200-+1200)
+ * * `'ww'`: Week of year, padded (00-53). Week 01 is the week with the first Thursday of the year
+ * * `'w'`: Week of year (0-53). Week 1 is the week with the first Thursday of the year
+ * * `'G'`, `'GG'`, `'GGG'`: The abbreviated form of the era string (e.g. 'AD')
+ * * `'GGGG'`: The long form of the era string (e.g. 'Anno Domini')
+ *
+ * `format` string can also be one of the following predefined
+ * {@link guide/i18n localizable formats}:
+ *
+ * * `'medium'`: equivalent to `'MMM d, y h:mm:ss a'` for en_US locale
+ * (e.g. Sep 3, 2010 12:05:08 PM)
+ * * `'short'`: equivalent to `'M/d/yy h:mm a'` for en_US locale (e.g. 9/3/10 12:05 PM)
+ * * `'fullDate'`: equivalent to `'EEEE, MMMM d, y'` for en_US locale
+ * (e.g. Friday, September 3, 2010)
+ * * `'longDate'`: equivalent to `'MMMM d, y'` for en_US locale (e.g. September 3, 2010)
+ * * `'mediumDate'`: equivalent to `'MMM d, y'` for en_US locale (e.g. Sep 3, 2010)
+ * * `'shortDate'`: equivalent to `'M/d/yy'` for en_US locale (e.g. 9/3/10)
+ * * `'mediumTime'`: equivalent to `'h:mm:ss a'` for en_US locale (e.g. 12:05:08 PM)
+ * * `'shortTime'`: equivalent to `'h:mm a'` for en_US locale (e.g. 12:05 PM)
+ *
+ * `format` string can contain literal values. These need to be escaped by surrounding with single quotes (e.g.
+ * `"h 'in the morning'"`). In order to output a single quote, escape it - i.e., two single quotes in a sequence
+ * (e.g. `"h 'o''clock'"`).
+ *
+ * Any other characters in the `format` string will be output as-is.
+ *
+ * @param {(Date|number|string)} date Date to format either as Date object, milliseconds (string or
+ * number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its
+ * shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is
+ * specified in the string input, the time is considered to be in the local timezone.
+ * @param {string=} format Formatting rules (see Description). If not specified,
+ * `mediumDate` is used.
+ * @param {string=} timezone Timezone to be used for formatting. It understands UTC/GMT and the
+ * continental US time zone abbreviations, but for general use, use a time zone offset, for
+ * example, `'+0430'` (4 hours, 30 minutes east of the Greenwich meridian)
+ * If not specified, the timezone of the browser will be used.
+ * @returns {string} Formatted string or the input if input is not recognized as date/millis.
+ *
+ * @example
+
+
+ {{1288323623006 | date:'medium'}}:
+ {{1288323623006 | date:'medium'}}
+ {{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}:
+ {{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}
+ {{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}:
+ {{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}
+ {{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}:
+ {{'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}}
+
+
+ it('should format date', function() {
+ expect(element(by.binding("1288323623006 | date:'medium'")).getText()).
+ toMatch(/Oct 2\d, 2010 \d{1,2}:\d{2}:\d{2} (AM|PM)/);
+ expect(element(by.binding("1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'")).getText()).
+ toMatch(/2010-10-2\d \d{2}:\d{2}:\d{2} (-|\+)?\d{4}/);
+ expect(element(by.binding("'1288323623006' | date:'MM/dd/yyyy @ h:mma'")).getText()).
+ toMatch(/10\/2\d\/2010 @ \d{1,2}:\d{2}(AM|PM)/);
+ expect(element(by.binding("'1288323623006' | date:\"MM/dd/yyyy 'at' h:mma\"")).getText()).
+ toMatch(/10\/2\d\/2010 at \d{1,2}:\d{2}(AM|PM)/);
+ });
+
+
+ */
+ dateFilter.$inject = ['$locale'];
+ function dateFilter($locale) {
- var R_ISO8601_STR = /^(\d{4})-?(\d\d)-?(\d\d)(?:T(\d\d)(?::?(\d\d)(?::?(\d\d)(?:\.(\d+))?)?)?(Z|([+-])(\d\d):?(\d\d))?)?$/;
- // 1 2 3 4 5 6 7 8 9 10 11
- function jsonStringToDate(string) {
- var match;
- if ((match = string.match(R_ISO8601_STR))) {
- var date = new Date(0),
- tzHour = 0,
- tzMin = 0,
- dateSetter = match[8] ? date.setUTCFullYear : date.setFullYear,
- timeSetter = match[8] ? date.setUTCHours : date.setHours;
+ var R_ISO8601_STR = /^(\d{4})-?(\d\d)-?(\d\d)(?:T(\d\d)(?::?(\d\d)(?::?(\d\d)(?:\.(\d+))?)?)?(Z|([+-])(\d\d):?(\d\d))?)?$/;
+ // 1 2 3 4 5 6 7 8 9 10 11
+ function jsonStringToDate(string) {
+ var match;
+ if (match = string.match(R_ISO8601_STR)) {
+ var date = new Date(0),
+ tzHour = 0,
+ tzMin = 0,
+ dateSetter = match[8] ? date.setUTCFullYear : date.setFullYear,
+ timeSetter = match[8] ? date.setUTCHours : date.setHours;
- if (match[9]) {
- tzHour = toInt(match[9] + match[10]);
- tzMin = toInt(match[9] + match[11]);
+ if (match[9]) {
+ tzHour = toInt(match[9] + match[10]);
+ tzMin = toInt(match[9] + match[11]);
+ }
+ dateSetter.call(date, toInt(match[1]), toInt(match[2]) - 1, toInt(match[3]));
+ var h = toInt(match[4] || 0) - tzHour;
+ var m = toInt(match[5] || 0) - tzMin;
+ var s = toInt(match[6] || 0);
+ var ms = Math.round(parseFloat('0.' + (match[7] || 0)) * 1000);
+ timeSetter.call(date, h, m, s, ms);
+ return date;
}
- dateSetter.call(date, toInt(match[1]), toInt(match[2]) - 1, toInt(match[3]));
- var h = toInt(match[4] || 0) - tzHour;
- var m = toInt(match[5] || 0) - tzMin;
- var s = toInt(match[6] || 0);
- var ms = Math.round(parseFloat('0.' + (match[7] || 0)) * 1000);
- timeSetter.call(date, h, m, s, ms);
- return date;
+ return string;
}
- return string;
- }
-
- return function(date, format, timezone) {
- var text = '',
- parts = [],
- fn, match;
-
- format = format || 'mediumDate';
- format = $locale.DATETIME_FORMATS[format] || format;
- if (isString(date)) {
- date = NUMBER_STRING.test(date) ? toInt(date) : jsonStringToDate(date);
- }
+ return function (date, format, timezone) {
+ var text = '',
+ parts = [],
+ fn,
+ match;
- if (isNumber(date)) {
- date = new Date(date);
- }
+ format = format || 'mediumDate';
+ format = $locale.DATETIME_FORMATS[format] || format;
+ if (isString(date)) {
+ date = NUMBER_STRING.test(date) ? toInt(date) : jsonStringToDate(date);
+ }
- if (!isDate(date) || !isFinite(date.getTime())) {
- return date;
- }
+ if (isNumber(date)) {
+ date = new Date(date);
+ }
- while (format) {
- match = DATE_FORMATS_SPLIT.exec(format);
- if (match) {
- parts = concat(parts, match, 1);
- format = parts.pop();
- } else {
- parts.push(format);
- format = null;
+ if (!isDate(date) || !isFinite(date.getTime())) {
+ return date;
}
- }
- var dateTimezoneOffset = date.getTimezoneOffset();
- if (timezone) {
- dateTimezoneOffset = timezoneToOffset(timezone, dateTimezoneOffset);
- date = convertTimezoneToLocal(date, timezone, true);
- }
- forEach(parts, function(value) {
- fn = DATE_FORMATS[value];
- text += fn ? fn(date, $locale.DATETIME_FORMATS, dateTimezoneOffset)
- : value === '\'\'' ? '\'' : value.replace(/(^'|'$)/g, '').replace(/''/g, '\'');
- });
+ while (format) {
+ match = DATE_FORMATS_SPLIT.exec(format);
+ if (match) {
+ parts = concat(parts, match, 1);
+ format = parts.pop();
+ } else {
+ parts.push(format);
+ format = null;
+ }
+ }
- return text;
- };
-}
+ var dateTimezoneOffset = date.getTimezoneOffset();
+ if (timezone) {
+ dateTimezoneOffset = timezoneToOffset(timezone, dateTimezoneOffset);
+ date = convertTimezoneToLocal(date, timezone, true);
+ }
+ forEach(parts, function (value) {
+ fn = DATE_FORMATS[value];
+ text += fn ? fn(date, $locale.DATETIME_FORMATS, dateTimezoneOffset) : value === '\'\'' ? '\'' : value.replace(/(^'|'$)/g, '').replace(/''/g, '\'');
+ });
+ return text;
+ };
+ }
-/**
- * @ngdoc filter
- * @name json
- * @kind function
- *
- * @description
- * Allows you to convert a JavaScript object into JSON string.
- *
- * This filter is mostly useful for debugging. When using the double curly {{value}} notation
- * the binding is automatically converted to JSON.
- *
- * @param {*} object Any JavaScript object (including arrays and primitive types) to filter.
- * @param {number=} spacing The number of spaces to use per indentation, defaults to 2.
- * @returns {string} JSON string.
- *
- *
- * @example
-
-
- {{ {'name':'value'} | json }}
- {{ {'name':'value'} | json:4 }}
-
-
- it('should jsonify filtered objects', function() {
- expect(element(by.id('default-spacing')).getText()).toMatch(/\{\n {2}"name": ?"value"\n}/);
- expect(element(by.id('custom-spacing')).getText()).toMatch(/\{\n {4}"name": ?"value"\n}/);
- });
-
-
- *
- */
-function jsonFilter() {
- return function(object, spacing) {
- if (isUndefined(spacing)) {
+ /**
+ * @ngdoc filter
+ * @name json
+ * @kind function
+ *
+ * @description
+ * Allows you to convert a JavaScript object into JSON string.
+ *
+ * This filter is mostly useful for debugging. When using the double curly {{value}} notation
+ * the binding is automatically converted to JSON.
+ *
+ * @param {*} object Any JavaScript object (including arrays and primitive types) to filter.
+ * @param {number=} spacing The number of spaces to use per indentation, defaults to 2.
+ * @returns {string} JSON string.
+ *
+ *
+ * @example
+
+
+ {{ {'name':'value'} | json }}
+ {{ {'name':'value'} | json:4 }}
+
+
+ it('should jsonify filtered objects', function() {
+ expect(element(by.id('default-spacing')).getText()).toMatch(/\{\n {2}"name": ?"value"\n}/);
+ expect(element(by.id('custom-spacing')).getText()).toMatch(/\{\n {4}"name": ?"value"\n}/);
+ });
+
+
+ *
+ */
+ function jsonFilter() {
+ return function (object, spacing) {
+ if (isUndefined(spacing)) {
spacing = 2;
- }
- return toJson(object, spacing);
- };
-}
-
-
-/**
- * @ngdoc filter
- * @name lowercase
- * @kind function
- * @description
- * Converts string to lowercase.
- *
- * See the {@link ng.uppercase uppercase filter documentation} for a functionally identical example.
- *
- * @see angular.lowercase
- */
-var lowercaseFilter = valueFn(lowercase);
-
-
-/**
- * @ngdoc filter
- * @name uppercase
- * @kind function
- * @description
- * Converts string to uppercase.
- * @example
-
-
-
-
-
-
{{title}}
-
- {{title | uppercase}}
-
-
-
- */
-var uppercaseFilter = valueFn(uppercase);
-
-/**
- * @ngdoc filter
- * @name limitTo
- * @kind function
- *
- * @description
- * Creates a new array or string containing only a specified number of elements. The elements are
- * taken from either the beginning or the end of the source array, string or number, as specified by
- * the value and sign (positive or negative) of `limit`. Other array-like objects are also supported
- * (e.g. array subclasses, NodeLists, jqLite/jQuery collections etc). If a number is used as input,
- * it is converted to a string.
- *
- * @param {Array|ArrayLike|string|number} input - Array/array-like, string or number to be limited.
- * @param {string|number} limit - The length of the returned array or string. If the `limit` number
- * is positive, `limit` number of items from the beginning of the source array/string are copied.
- * If the number is negative, `limit` number of items from the end of the source array/string
- * are copied. The `limit` will be trimmed if it exceeds `array.length`. If `limit` is undefined,
- * the input will be returned unchanged.
- * @param {(string|number)=} begin - Index at which to begin limitation. As a negative index,
- * `begin` indicates an offset from the end of `input`. Defaults to `0`.
- * @returns {Array|string} A new sub-array or substring of length `limit` or less if the input had
- * less than `limit` elements.
- *
- * @example
-
-
-
-
-
-
Output numbers: {{ numbers | limitTo:numLimit }}
-
-
Output letters: {{ letters | limitTo:letterLimit }}
-
-
Output long number: {{ longNumber | limitTo:longNumberLimit }}
-
-*/
-function limitToFilter() {
- return function(input, limit, begin) {
- if (Math.abs(Number(limit)) === Infinity) {
- limit = Number(limit);
- } else {
- limit = toInt(limit);
- }
- if (isNumberNaN(limit)) return input;
+ }
+ return toJson(object, spacing);
+ };
+ }
- if (isNumber(input)) input = input.toString();
- if (!isArrayLike(input)) return input;
+ /**
+ * @ngdoc filter
+ * @name lowercase
+ * @kind function
+ * @description
+ * Converts string to lowercase.
+ *
+ * See the {@link ng.uppercase uppercase filter documentation} for a functionally identical example.
+ *
+ * @see angular.lowercase
+ */
+ var lowercaseFilter = valueFn(lowercase);
- begin = (!begin || isNaN(begin)) ? 0 : toInt(begin);
- begin = (begin < 0) ? Math.max(0, input.length + begin) : begin;
+ /**
+ * @ngdoc filter
+ * @name uppercase
+ * @kind function
+ * @description
+ * Converts string to uppercase.
+ * @example
+
+
+
+
+
+
{{title}}
+
+ {{title | uppercase}}
+
+
+
+ */
+ var uppercaseFilter = valueFn(uppercase);
- if (limit >= 0) {
- return sliceFn(input, begin, begin + limit);
- } else {
- if (begin === 0) {
- return sliceFn(input, limit, input.length);
+ /**
+ * @ngdoc filter
+ * @name limitTo
+ * @kind function
+ *
+ * @description
+ * Creates a new array or string containing only a specified number of elements. The elements are
+ * taken from either the beginning or the end of the source array, string or number, as specified by
+ * the value and sign (positive or negative) of `limit`. Other array-like objects are also supported
+ * (e.g. array subclasses, NodeLists, jqLite/jQuery collections etc). If a number is used as input,
+ * it is converted to a string.
+ *
+ * @param {Array|ArrayLike|string|number} input - Array/array-like, string or number to be limited.
+ * @param {string|number} limit - The length of the returned array or string. If the `limit` number
+ * is positive, `limit` number of items from the beginning of the source array/string are copied.
+ * If the number is negative, `limit` number of items from the end of the source array/string
+ * are copied. The `limit` will be trimmed if it exceeds `array.length`. If `limit` is undefined,
+ * the input will be returned unchanged.
+ * @param {(string|number)=} begin - Index at which to begin limitation. As a negative index,
+ * `begin` indicates an offset from the end of `input`. Defaults to `0`.
+ * @returns {Array|string} A new sub-array or substring of length `limit` or less if the input had
+ * less than `limit` elements.
+ *
+ * @example
+
+
+
+
+
+
Output numbers: {{ numbers | limitTo:numLimit }}
+
+
Output letters: {{ letters | limitTo:letterLimit }}
+
+
Output long number: {{ longNumber | limitTo:longNumberLimit }}
+
+ */
+ function limitToFilter() {
+ return function (input, limit, begin) {
+ if (Math.abs(Number(limit)) === Infinity) {
+ limit = Number(limit);
} else {
- return sliceFn(input, Math.max(0, begin + limit), begin);
+ limit = toInt(limit);
}
- }
- };
-}
-
-function sliceFn(input, begin, end) {
- if (isString(input)) return input.slice(begin, end);
-
- return slice.call(input, begin, end);
-}
-
-/**
- * @ngdoc filter
- * @name orderBy
- * @kind function
- *
- * @description
- * Returns an array containing the items from the specified `collection`, ordered by a `comparator`
- * function based on the values computed using the `expression` predicate.
- *
- * For example, `[{id: 'foo'}, {id: 'bar'}] | orderBy:'id'` would result in
- * `[{id: 'bar'}, {id: 'foo'}]`.
- *
- * The `collection` can be an Array or array-like object (e.g. NodeList, jQuery object, TypedArray,
- * String, etc).
- *
- * The `expression` can be a single predicate, or a list of predicates each serving as a tie-breaker
- * for the preceding one. The `expression` is evaluated against each item and the output is used
- * for comparing with other items.
- *
- * You can change the sorting order by setting `reverse` to `true`. By default, items are sorted in
- * ascending order.
- *
- * The comparison is done using the `comparator` function. If none is specified, a default, built-in
- * comparator is used (see below for details - in a nutshell, it compares numbers numerically and
- * strings alphabetically).
- *
- * ### Under the hood
- *
- * Ordering the specified `collection` happens in two phases:
- *
- * 1. All items are passed through the predicate (or predicates), and the returned values are saved
- * along with their type (`string`, `number` etc). For example, an item `{label: 'foo'}`, passed
- * through a predicate that extracts the value of the `label` property, would be transformed to:
- * ```
- * {
- * value: 'foo',
- * type: 'string',
- * index: ...
- * }
- * ```
- * 2. The comparator function is used to sort the items, based on the derived values, types and
- * indices.
- *
- * If you use a custom comparator, it will be called with pairs of objects of the form
- * `{value: ..., type: '...', index: ...}` and is expected to return `0` if the objects are equal
- * (as far as the comparator is concerned), `-1` if the 1st one should be ranked higher than the
- * second, or `1` otherwise.
- *
- * In order to ensure that the sorting will be deterministic across platforms, if none of the
- * specified predicates can distinguish between two items, `orderBy` will automatically introduce a
- * dummy predicate that returns the item's index as `value`.
- * (If you are using a custom comparator, make sure it can handle this predicate as well.)
- *
- * If a custom comparator still can't distinguish between two items, then they will be sorted based
- * on their index using the built-in comparator.
- *
- * Finally, in an attempt to simplify things, if a predicate returns an object as the extracted
- * value for an item, `orderBy` will try to convert that object to a primitive value, before passing
- * it to the comparator. The following rules govern the conversion:
- *
- * 1. If the object has a `valueOf()` method that returns a primitive, its return value will be
- * used instead.
- * (If the object has a `valueOf()` method that returns another object, then the returned object
- * will be used in subsequent steps.)
- * 2. If the object has a custom `toString()` method (i.e. not the one inherited from `Object`) that
- * returns a primitive, its return value will be used instead.
- * (If the object has a `toString()` method that returns another object, then the returned object
- * will be used in subsequent steps.)
- * 3. No conversion; the object itself is used.
- *
- * ### The default comparator
- *
- * The default, built-in comparator should be sufficient for most usecases. In short, it compares
- * numbers numerically, strings alphabetically (and case-insensitively), for objects falls back to
- * using their index in the original collection, and sorts values of different types by type.
- *
- * More specifically, it follows these steps to determine the relative order of items:
- *
- * 1. If the compared values are of different types, compare the types themselves alphabetically.
- * 2. If both values are of type `string`, compare them alphabetically in a case- and
- * locale-insensitive way.
- * 3. If both values are objects, compare their indices instead.
- * 4. Otherwise, return:
- * - `0`, if the values are equal (by strict equality comparison, i.e. using `===`).
- * - `-1`, if the 1st value is "less than" the 2nd value (compared using the `<` operator).
- * - `1`, otherwise.
- *
- * **Note:** If you notice numbers not being sorted as expected, make sure they are actually being
- * saved as numbers and not strings.
- * **Note:** For the purpose of sorting, `null` values are treated as the string `'null'` (i.e.
- * `type: 'string'`, `value: 'null'`). This may cause unexpected sort order relative to
- * other values.
- *
- * @param {Array|ArrayLike} collection - The collection (array or array-like object) to sort.
- * @param {(Function|string|Array.
)=} expression - A predicate (or list of
- * predicates) to be used by the comparator to determine the order of elements.
- *
- * Can be one of:
- *
- * - `Function`: A getter function. This function will be called with each item as argument and
- * the return value will be used for sorting.
- * - `string`: An Angular expression. This expression will be evaluated against each item and the
- * result will be used for sorting. For example, use `'label'` to sort by a property called
- * `label` or `'label.substring(0, 3)'` to sort by the first 3 characters of the `label`
- * property.
- * (The result of a constant expression is interpreted as a property name to be used for
- * comparison. For example, use `'"special name"'` (note the extra pair of quotes) to sort by a
- * property called `special name`.)
- * An expression can be optionally prefixed with `+` or `-` to control the sorting direction,
- * ascending or descending. For example, `'+label'` or `'-label'`. If no property is provided,
- * (e.g. `'+'` or `'-'`), the collection element itself is used in comparisons.
- * - `Array`: An array of function and/or string predicates. If a predicate cannot determine the
- * relative order of two items, the next predicate is used as a tie-breaker.
- *
- * **Note:** If the predicate is missing or empty then it defaults to `'+'`.
- *
- * @param {boolean=} reverse - If `true`, reverse the sorting order.
- * @param {(Function)=} comparator - The comparator function used to determine the relative order of
- * value pairs. If omitted, the built-in comparator will be used.
- *
- * @returns {Array} - The sorted array.
- *
- *
- * @example
- * ### Ordering a table with `ngRepeat`
- *
- * The example below demonstrates a simple {@link ngRepeat ngRepeat}, where the data is sorted by
- * age in descending order (expression is set to `'-age'`). The `comparator` is not set, which means
- * it defaults to the built-in comparator.
- *
-
-
-
-
-
- | Name |
- Phone Number |
- Age |
-
-
- | {{friend.name}} |
- {{friend.phone}} |
- {{friend.age}} |
-
-
-
- *
- * @example
- * ### Changing parameters dynamically
- *
- * All parameters can be changed dynamically. The next example shows how you can make the columns of
- * a table sortable, by binding the `expression` and `reverse` parameters to scope properties.
- *
-
-
-
-
Sort by = {{propertyName}}; reverse = {{reverse}}
-
-
-
-
-
- |
-
-
- |
-
-
-
- |
-
-
-
- |
-
-
- | {{friend.name}} |
- {{friend.phone}} |
- {{friend.age}} |
-
-
-
- *
- * @example
- * ### Using `orderBy` inside a controller
- *
- * It is also possible to call the `orderBy` filter manually, by injecting `orderByFilter`, and
- * calling it with the desired parameters. (Alternatively, you could inject the `$filter` factory
- * and retrieve the `orderBy` filter with `$filter('orderBy')`.)
- *
-
-
-
-
Sort by = {{propertyName}}; reverse = {{reverse}}
-
-
-
-
-
- |
-
-
- |
-
-
-
- |
-
-
-
- |
-
-
- | {{friend.name}} |
- {{friend.phone}} |
- {{friend.age}} |
-
-
-
- *
- * @example
- * ### Using a custom comparator
- *
- * If you have very specific requirements about the way items are sorted, you can pass your own
- * comparator function. For example, you might need to compare some strings in a locale-sensitive
- * way. (When specifying a custom comparator, you also need to pass a value for the `reverse`
- * argument - passing `false` retains the default sorting order, i.e. ascending.)
- *
-
-
-
-
-
Locale-sensitive Comparator
+ /**
+ * @ngdoc filter
+ * @name orderBy
+ * @kind function
+ *
+ * @description
+ * Returns an array containing the items from the specified `collection`, ordered by a `comparator`
+ * function based on the values computed using the `expression` predicate.
+ *
+ * For example, `[{id: 'foo'}, {id: 'bar'}] | orderBy:'id'` would result in
+ * `[{id: 'bar'}, {id: 'foo'}]`.
+ *
+ * The `collection` can be an Array or array-like object (e.g. NodeList, jQuery object, TypedArray,
+ * String, etc).
+ *
+ * The `expression` can be a single predicate, or a list of predicates each serving as a tie-breaker
+ * for the preceding one. The `expression` is evaluated against each item and the output is used
+ * for comparing with other items.
+ *
+ * You can change the sorting order by setting `reverse` to `true`. By default, items are sorted in
+ * ascending order.
+ *
+ * The comparison is done using the `comparator` function. If none is specified, a default, built-in
+ * comparator is used (see below for details - in a nutshell, it compares numbers numerically and
+ * strings alphabetically).
+ *
+ * ### Under the hood
+ *
+ * Ordering the specified `collection` happens in two phases:
+ *
+ * 1. All items are passed through the predicate (or predicates), and the returned values are saved
+ * along with their type (`string`, `number` etc). For example, an item `{label: 'foo'}`, passed
+ * through a predicate that extracts the value of the `label` property, would be transformed to:
+ * ```
+ * {
+ * value: 'foo',
+ * type: 'string',
+ * index: ...
+ * }
+ * ```
+ * 2. The comparator function is used to sort the items, based on the derived values, types and
+ * indices.
+ *
+ * If you use a custom comparator, it will be called with pairs of objects of the form
+ * `{value: ..., type: '...', index: ...}` and is expected to return `0` if the objects are equal
+ * (as far as the comparator is concerned), `-1` if the 1st one should be ranked higher than the
+ * second, or `1` otherwise.
+ *
+ * In order to ensure that the sorting will be deterministic across platforms, if none of the
+ * specified predicates can distinguish between two items, `orderBy` will automatically introduce a
+ * dummy predicate that returns the item's index as `value`.
+ * (If you are using a custom comparator, make sure it can handle this predicate as well.)
+ *
+ * If a custom comparator still can't distinguish between two items, then they will be sorted based
+ * on their index using the built-in comparator.
+ *
+ * Finally, in an attempt to simplify things, if a predicate returns an object as the extracted
+ * value for an item, `orderBy` will try to convert that object to a primitive value, before passing
+ * it to the comparator. The following rules govern the conversion:
+ *
+ * 1. If the object has a `valueOf()` method that returns a primitive, its return value will be
+ * used instead.
+ * (If the object has a `valueOf()` method that returns another object, then the returned object
+ * will be used in subsequent steps.)
+ * 2. If the object has a custom `toString()` method (i.e. not the one inherited from `Object`) that
+ * returns a primitive, its return value will be used instead.
+ * (If the object has a `toString()` method that returns another object, then the returned object
+ * will be used in subsequent steps.)
+ * 3. No conversion; the object itself is used.
+ *
+ * ### The default comparator
+ *
+ * The default, built-in comparator should be sufficient for most usecases. In short, it compares
+ * numbers numerically, strings alphabetically (and case-insensitively), for objects falls back to
+ * using their index in the original collection, and sorts values of different types by type.
+ *
+ * More specifically, it follows these steps to determine the relative order of items:
+ *
+ * 1. If the compared values are of different types, compare the types themselves alphabetically.
+ * 2. If both values are of type `string`, compare them alphabetically in a case- and
+ * locale-insensitive way.
+ * 3. If both values are objects, compare their indices instead.
+ * 4. Otherwise, return:
+ * - `0`, if the values are equal (by strict equality comparison, i.e. using `===`).
+ * - `-1`, if the 1st value is "less than" the 2nd value (compared using the `<` operator).
+ * - `1`, otherwise.
+ *
+ * **Note:** If you notice numbers not being sorted as expected, make sure they are actually being
+ * saved as numbers and not strings.
+ * **Note:** For the purpose of sorting, `null` values are treated as the string `'null'` (i.e.
+ * `type: 'string'`, `value: 'null'`). This may cause unexpected sort order relative to
+ * other values.
+ *
+ * @param {Array|ArrayLike} collection - The collection (array or array-like object) to sort.
+ * @param {(Function|string|Array.
)=} expression - A predicate (or list of
+ * predicates) to be used by the comparator to determine the order of elements.
+ *
+ * Can be one of:
+ *
+ * - `Function`: A getter function. This function will be called with each item as argument and
+ * the return value will be used for sorting.
+ * - `string`: An Angular expression. This expression will be evaluated against each item and the
+ * result will be used for sorting. For example, use `'label'` to sort by a property called
+ * `label` or `'label.substring(0, 3)'` to sort by the first 3 characters of the `label`
+ * property.
+ * (The result of a constant expression is interpreted as a property name to be used for
+ * comparison. For example, use `'"special name"'` (note the extra pair of quotes) to sort by a
+ * property called `special name`.)
+ * An expression can be optionally prefixed with `+` or `-` to control the sorting direction,
+ * ascending or descending. For example, `'+label'` or `'-label'`. If no property is provided,
+ * (e.g. `'+'` or `'-'`), the collection element itself is used in comparisons.
+ * - `Array`: An array of function and/or string predicates. If a predicate cannot determine the
+ * relative order of two items, the next predicate is used as a tie-breaker.
+ *
+ * **Note:** If the predicate is missing or empty then it defaults to `'+'`.
+ *
+ * @param {boolean=} reverse - If `true`, reverse the sorting order.
+ * @param {(Function)=} comparator - The comparator function used to determine the relative order of
+ * value pairs. If omitted, the built-in comparator will be used.
+ *
+ * @returns {Array} - The sorted array.
+ *
+ *
+ * @example
+ * ### Ordering a table with `ngRepeat`
+ *
+ * The example below demonstrates a simple {@link ngRepeat ngRepeat}, where the data is sorted by
+ * age in descending order (expression is set to `'-age'`). The `comparator` is not set, which means
+ * it defaults to the built-in comparator.
+ *
+
+
+
| Name |
- Favorite Letter |
+ Phone Number |
+ Age |
+
+
+ | {{friend.name}} |
+ {{friend.phone}} |
+ {{friend.age}} |
+
+
+
+
+
+ angular.module('orderByExample1', [])
+ .controller('ExampleController', ['$scope', function($scope) {
+ $scope.friends = [
+ {name: 'John', phone: '555-1212', age: 10},
+ {name: 'Mary', phone: '555-9876', age: 19},
+ {name: 'Mike', phone: '555-4321', age: 21},
+ {name: 'Adam', phone: '555-5678', age: 35},
+ {name: 'Julie', phone: '555-8765', age: 29}
+ ];
+ }]);
+
+
+ .friends {
+ border-collapse: collapse;
+ }
+
+ .friends th {
+ border-bottom: 1px solid;
+ }
+ .friends td, .friends th {
+ border-left: 1px solid;
+ padding: 5px 10px;
+ }
+ .friends td:first-child, .friends th:first-child {
+ border-left: none;
+ }
+
+
+ // Element locators
+ var names = element.all(by.repeater('friends').column('friend.name'));
+
+ it('should sort friends by age in reverse order', function() {
+ expect(names.get(0).getText()).toBe('Adam');
+ expect(names.get(1).getText()).toBe('Julie');
+ expect(names.get(2).getText()).toBe('Mike');
+ expect(names.get(3).getText()).toBe('Mary');
+ expect(names.get(4).getText()).toBe('John');
+ });
+
+
+ *
+ *
+ * @example
+ * ### Changing parameters dynamically
+ *
+ * All parameters can be changed dynamically. The next example shows how you can make the columns of
+ * a table sortable, by binding the `expression` and `reverse` parameters to scope properties.
+ *
+
+
+
+
Sort by = {{propertyName}}; reverse = {{reverse}}
+
+
+
+
+
+ |
+
+
+ |
+
+
+
+ |
+
+
+
+ |
-
+
| {{friend.name}} |
- {{friend.favoriteLetter}} |
+ {{friend.phone}} |
+ {{friend.age}} |
-
Default Comparator
+
+
+ angular.module('orderByExample2', [])
+ .controller('ExampleController', ['$scope', function($scope) {
+ var friends = [
+ {name: 'John', phone: '555-1212', age: 10},
+ {name: 'Mary', phone: '555-9876', age: 19},
+ {name: 'Mike', phone: '555-4321', age: 21},
+ {name: 'Adam', phone: '555-5678', age: 35},
+ {name: 'Julie', phone: '555-8765', age: 29}
+ ];
+
+ $scope.propertyName = 'age';
+ $scope.reverse = true;
+ $scope.friends = friends;
+
+ $scope.sortBy = function(propertyName) {
+ $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
+ $scope.propertyName = propertyName;
+ };
+ }]);
+
+
+ .friends {
+ border-collapse: collapse;
+ }
+
+ .friends th {
+ border-bottom: 1px solid;
+ }
+ .friends td, .friends th {
+ border-left: 1px solid;
+ padding: 5px 10px;
+ }
+ .friends td:first-child, .friends th:first-child {
+ border-left: none;
+ }
+
+ .sortorder:after {
+ content: '\25b2'; // BLACK UP-POINTING TRIANGLE
+ }
+ .sortorder.reverse:after {
+ content: '\25bc'; // BLACK DOWN-POINTING TRIANGLE
+ }
+
+
+ // Element locators
+ var unsortButton = element(by.partialButtonText('unsorted'));
+ var nameHeader = element(by.partialButtonText('Name'));
+ var phoneHeader = element(by.partialButtonText('Phone'));
+ var ageHeader = element(by.partialButtonText('Age'));
+ var firstName = element(by.repeater('friends').column('friend.name').row(0));
+ var lastName = element(by.repeater('friends').column('friend.name').row(4));
+
+ it('should sort friends by some property, when clicking on the column header', function() {
+ expect(firstName.getText()).toBe('Adam');
+ expect(lastName.getText()).toBe('John');
+
+ phoneHeader.click();
+ expect(firstName.getText()).toBe('John');
+ expect(lastName.getText()).toBe('Mary');
+
+ nameHeader.click();
+ expect(firstName.getText()).toBe('Adam');
+ expect(lastName.getText()).toBe('Mike');
+
+ ageHeader.click();
+ expect(firstName.getText()).toBe('John');
+ expect(lastName.getText()).toBe('Adam');
+ });
+
+ it('should sort friends in reverse order, when clicking on the same column', function() {
+ expect(firstName.getText()).toBe('Adam');
+ expect(lastName.getText()).toBe('John');
+
+ ageHeader.click();
+ expect(firstName.getText()).toBe('John');
+ expect(lastName.getText()).toBe('Adam');
+
+ ageHeader.click();
+ expect(firstName.getText()).toBe('Adam');
+ expect(lastName.getText()).toBe('John');
+ });
+
+ it('should restore the original order, when clicking "Set to unsorted"', function() {
+ expect(firstName.getText()).toBe('Adam');
+ expect(lastName.getText()).toBe('John');
+
+ unsortButton.click();
+ expect(firstName.getText()).toBe('John');
+ expect(lastName.getText()).toBe('Julie');
+ });
+
+
+ *
+ *
+ * @example
+ * ### Using `orderBy` inside a controller
+ *
+ * It is also possible to call the `orderBy` filter manually, by injecting `orderByFilter`, and
+ * calling it with the desired parameters. (Alternatively, you could inject the `$filter` factory
+ * and retrieve the `orderBy` filter with `$filter('orderBy')`.)
+ *
+
+
+
+
Sort by = {{propertyName}}; reverse = {{reverse}}
+
+
+
- | Name |
- Favorite Letter |
+
+
+
+ |
+
+
+
+ |
+
+
+
+ |
-
+
| {{friend.name}} |
- {{friend.favoriteLetter}} |
+ {{friend.phone}} |
+ {{friend.age}} |
+ *
+ * @example
+ * ### Using a custom comparator
+ *
+ * If you have very specific requirements about the way items are sorted, you can pass your own
+ * comparator function. For example, you might need to compare some strings in a locale-sensitive
+ * way. (When specifying a custom comparator, you also need to pass a value for the `reverse`
+ * argument - passing `false` retains the default sorting order, i.e. ascending.)
+ *
+
+
+
+
+
Locale-sensitive Comparator
+
+
+ | Name |
+ Favorite Letter |
+
+
+ | {{friend.name}} |
+ {{friend.favoriteLetter}} |
+
+
+
+
+
Default Comparator
+
+
+ | Name |
+ Favorite Letter |
+
+
+ | {{friend.name}} |
+ {{friend.favoriteLetter}} |
+
+
+
+
- link 1 (link, don't reload)
- link 2 (link, don't reload)
- link 3 (link, reload!)
- anchor (link, don't reload)
- anchor (no link)
- link (link, change location)
-
-
- it('should execute ng-click but not reload when href without value', function() {
- element(by.id('link-1')).click();
- expect(element(by.model('value')).getAttribute('value')).toEqual('1');
- expect(element(by.id('link-1')).getAttribute('href')).toBe('');
- });
-
- it('should execute ng-click but not reload when href empty string', function() {
- element(by.id('link-2')).click();
- expect(element(by.model('value')).getAttribute('value')).toEqual('2');
- expect(element(by.id('link-2')).getAttribute('href')).toBe('');
- });
-
- it('should execute ng-click and change url when ng-href specified', function() {
- expect(element(by.id('link-3')).getAttribute('href')).toMatch(/\/123$/);
-
- element(by.id('link-3')).click();
-
- // At this point, we navigate away from an Angular page, so we need
- // to use browser.driver to get the base webdriver.
-
- browser.wait(function() {
- return browser.driver.getCurrentUrl().then(function(url) {
- return url.match(/\/123$/);
- });
- }, 5000, 'page should navigate to /123');
- });
-
- it('should execute ng-click but not reload when href empty string and name specified', function() {
- element(by.id('link-4')).click();
- expect(element(by.model('value')).getAttribute('value')).toEqual('4');
- expect(element(by.id('link-4')).getAttribute('href')).toBe('');
- });
-
- it('should execute ng-click but not reload when no href but name specified', function() {
- element(by.id('link-5')).click();
- expect(element(by.model('value')).getAttribute('value')).toEqual('5');
- expect(element(by.id('link-5')).getAttribute('href')).toBe(null);
- });
-
- it('should only change url when only ng-href', function() {
- element(by.model('value')).clear();
- element(by.model('value')).sendKeys('6');
- expect(element(by.id('link-6')).getAttribute('href')).toMatch(/\/6$/);
-
- element(by.id('link-6')).click();
-
- // At this point, we navigate away from an Angular page, so we need
- // to use browser.driver to get the base webdriver.
- browser.wait(function() {
- return browser.driver.getCurrentUrl().then(function(url) {
- return url.match(/\/6$/);
- });
- }, 5000, 'page should navigate to /6');
- });
-
-
- */
-
-/**
- * @ngdoc directive
- * @name ngSrc
- * @restrict A
- * @priority 99
- *
- * @description
- * Using Angular markup like `{{hash}}` in a `src` attribute doesn't
- * work right: The browser will fetch from the URL with the literal
- * text `{{hash}}` until Angular replaces the expression inside
- * `{{hash}}`. The `ngSrc` directive solves this problem.
- *
- * The buggy way to write it:
- * ```html
- * 
- * ```
- *
- * The correct way to write it:
- * ```html
- * ![Description]()
- * ```
- *
- * @element IMG
- * @param {template} ngSrc any string which can contain `{{}}` markup.
- */
-
-/**
- * @ngdoc directive
- * @name ngSrcset
- * @restrict A
- * @priority 99
- *
- * @description
- * Using Angular markup like `{{hash}}` in a `srcset` attribute doesn't
- * work right: The browser will fetch from the URL with the literal
- * text `{{hash}}` until Angular replaces the expression inside
- * `{{hash}}`. The `ngSrcset` directive solves this problem.
- *
- * The buggy way to write it:
- * ```html
- * ![Description]()
- * ```
- *
- * The correct way to write it:
- * ```html
- * ![Description]()
- * ```
- *
- * @element IMG
- * @param {template} ngSrcset any string which can contain `{{}}` markup.
- */
-
-/**
- * @ngdoc directive
- * @name ngDisabled
- * @restrict A
- * @priority 100
- *
- * @description
- *
- * This directive sets the `disabled` attribute on the element (typically a form control,
- * e.g. `input`, `button`, `select` etc.) if the
- * {@link guide/expression expression} inside `ngDisabled` evaluates to truthy.
- *
- * A special directive is necessary because we cannot use interpolation inside the `disabled`
- * attribute. See the {@link guide/interpolation interpolation guide} for more info.
- *
- * @example
-
-
-
-
-
-
- it('should toggle button', function() {
- expect(element(by.css('button')).getAttribute('disabled')).toBeFalsy();
- element(by.model('checked')).click();
- expect(element(by.css('button')).getAttribute('disabled')).toBeTruthy();
- });
-
-
- *
- * @element INPUT
- * @param {expression} ngDisabled If the {@link guide/expression expression} is truthy,
- * then the `disabled` attribute will be set on the element
- */
-
-
-/**
- * @ngdoc directive
- * @name ngChecked
- * @restrict A
- * @priority 100
- *
- * @description
- * Sets the `checked` attribute on the element, if the expression inside `ngChecked` is truthy.
- *
- * Note that this directive should not be used together with {@link ngModel `ngModel`},
- * as this can lead to unexpected behavior.
- *
- * A special directive is necessary because we cannot use interpolation inside the `checked`
- * attribute. See the {@link guide/interpolation interpolation guide} for more info.
- *
- * @example
-
-
-
-
-
-
- it('should check both checkBoxes', function() {
- expect(element(by.id('checkFollower')).getAttribute('checked')).toBeFalsy();
- element(by.model('leader')).click();
- expect(element(by.id('checkFollower')).getAttribute('checked')).toBeTruthy();
- });
-
-
- *
- * @element INPUT
- * @param {expression} ngChecked If the {@link guide/expression expression} is truthy,
- * then the `checked` attribute will be set on the element
- */
-
-
-/**
- * @ngdoc directive
- * @name ngReadonly
- * @restrict A
- * @priority 100
- *
- * @description
- *
- * Sets the `readonly` attribute on the element, if the expression inside `ngReadonly` is truthy.
- * Note that `readonly` applies only to `input` elements with specific types. [See the input docs on
- * MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) for more information.
- *
- * A special directive is necessary because we cannot use interpolation inside the `readonly`
- * attribute. See the {@link guide/interpolation interpolation guide} for more info.
- *
- * @example
-
-
-
-
-
-
- it('should toggle readonly attr', function() {
- expect(element(by.css('[type="text"]')).getAttribute('readonly')).toBeFalsy();
- element(by.model('checked')).click();
- expect(element(by.css('[type="text"]')).getAttribute('readonly')).toBeTruthy();
- });
-
-
- *
- * @element INPUT
- * @param {expression} ngReadonly If the {@link guide/expression expression} is truthy,
- * then special attribute "readonly" will be set on the element
- */
-
-
-/**
- * @ngdoc directive
- * @name ngSelected
- * @restrict A
- * @priority 100
- *
- * @description
- *
- * Sets the `selected` attribute on the element, if the expression inside `ngSelected` is truthy.
- *
- * A special directive is necessary because we cannot use interpolation inside the `selected`
- * attribute. See the {@link guide/interpolation interpolation guide} for more info.
- *
- *
- * **Note:** `ngSelected` does not interact with the `select` and `ngModel` directives, it only
- * sets the `selected` attribute on the element. If you are using `ngModel` on the select, you
- * should not use `ngSelected` on the options, as `ngModel` will set the select value and
- * selected options.
- *
- *
- * @example
-
-
-
-
-
-
- it('should select Greetings!', function() {
- expect(element(by.id('greet')).getAttribute('selected')).toBeFalsy();
- element(by.model('selected')).click();
- expect(element(by.id('greet')).getAttribute('selected')).toBeTruthy();
- });
-
-
- *
- * @element OPTION
- * @param {expression} ngSelected If the {@link guide/expression expression} is truthy,
- * then special attribute "selected" will be set on the element
- */
-
-/**
- * @ngdoc directive
- * @name ngOpen
- * @restrict A
- * @priority 100
- *
- * @description
- *
- * Sets the `open` attribute on the element, if the expression inside `ngOpen` is truthy.
- *
- * A special directive is necessary because we cannot use interpolation inside the `open`
- * attribute. See the {@link guide/interpolation interpolation guide} for more info.
- *
- * ## A note about browser compatibility
- *
- * Internet Explorer and Edge do not support the `details` element, it is
- * recommended to use {@link ng.ngShow} and {@link ng.ngHide} instead.
- *
- * @example
-
-
-
-
- List
-
- - Apple
- - Orange
- - Durian
-
-
-
-
- it('should toggle open', function() {
- expect(element(by.id('details')).getAttribute('open')).toBeFalsy();
- element(by.model('open')).click();
- expect(element(by.id('details')).getAttribute('open')).toBeTruthy();
- });
-
-
- *
- * @element DETAILS
- * @param {expression} ngOpen If the {@link guide/expression expression} is truthy,
- * then special attribute "open" will be set on the element
- */
-
-var ngAttributeAliasDirectives = {};
-
-// boolean attrs are evaluated
-forEach(BOOLEAN_ATTR, function(propName, attrName) {
- // binding to multiple is not supported
- if (propName === 'multiple') return;
-
- function defaultLinkFn(scope, element, attr) {
- scope.$watch(attr[normalized], function ngBooleanAttrWatchAction(value) {
- attr.$set(attrName, !!value);
- });
- }
-
- var normalized = directiveNormalize('ng-' + attrName);
- var linkFn = defaultLinkFn;
-
- if (propName === 'checked') {
- linkFn = function(scope, element, attr) {
- // ensuring ngChecked doesn't interfere with ngModel when both are set on the same input
- if (attr.ngModel !== attr[normalized]) {
- defaultLinkFn(scope, element, attr);
- }
- };
- }
-
- ngAttributeAliasDirectives[normalized] = function() {
- return {
- restrict: 'A',
- priority: 100,
- link: linkFn
- };
- };
-});
-
-// aliased input attrs are evaluated
-forEach(ALIASED_ATTR, function(htmlAttr, ngAttr) {
- ngAttributeAliasDirectives[ngAttr] = function() {
- return {
- priority: 100,
- link: function(scope, element, attr) {
- //special case ngPattern when a literal regular expression value
- //is used as the expression (this way we don't have to watch anything).
- if (ngAttr === 'ngPattern' && attr.ngPattern.charAt(0) === '/') {
- var match = attr.ngPattern.match(REGEX_STRING_REGEXP);
- if (match) {
- attr.$set('ngPattern', new RegExp(match[1], match[2]));
- return;
- }
- }
-
- scope.$watch(attr[ngAttr], function ngAttrAliasWatchAction(value) {
- attr.$set(ngAttr, value);
- });
- }
- };
- };
-});
-// ng-src, ng-srcset, ng-href are interpolated
-forEach(['src', 'srcset', 'href'], function(attrName) {
- var normalized = directiveNormalize('ng-' + attrName);
- ngAttributeAliasDirectives[normalized] = function() {
- return {
- priority: 99, // it needs to run after the attributes are interpolated
- link: function(scope, element, attr) {
- var propName = attrName,
- name = attrName;
-
- if (attrName === 'href' &&
- toString.call(element.prop('href')) === '[object SVGAnimatedString]') {
- name = 'xlinkHref';
- attr.$attr[name] = 'xlink:href';
- propName = null;
- }
-
- attr.$observe(normalized, function(value) {
- if (!value) {
- if (attrName === 'href') {
- attr.$set(name, null);
+ /**
+ * @ngdoc directive
+ * @name a
+ * @restrict E
+ *
+ * @description
+ * Modifies the default behavior of the html a tag so that the default action is prevented when
+ * the href attribute is empty.
+ *
+ * For dynamically creating `href` attributes for a tags, see the {@link ng.ngHref `ngHref`} directive.
+ */
+ var htmlAnchorDirective = valueFn({
+ restrict: 'E',
+ compile: function compile(element, attr) {
+ if (!attr.href && !attr.xlinkHref) {
+ return function (scope, element) {
+ // If the linked element is not an anchor tag anymore, do nothing
+ if (element[0].nodeName.toLowerCase() !== 'a') return;
+
+ // SVGAElement does not use the href attribute, but rather the 'xlinkHref' attribute.
+ var href = toString.call(element.prop('href')) === '[object SVGAnimatedString]' ? 'xlink:href' : 'href';
+ element.on('click', function (event) {
+ // if we have no href url, then don't navigate anywhere.
+ if (!element.attr(href)) {
+ event.preventDefault();
}
- return;
- }
-
- attr.$set(name, value);
-
- // Support: IE 9-11 only
- // On IE, if "ng:src" directive declaration is used and "src" attribute doesn't exist
- // then calling element.setAttribute('src', 'foo') doesn't do anything, so we need
- // to set the property as well to achieve the desired effect.
- // We use attr[attrName] value since $set can sanitize the url.
- if (msie && propName) element.prop(propName, attr[name]);
- });
+ });
+ };
}
- };
- };
-});
-
-/* global -nullFormCtrl, -PENDING_CLASS, -SUBMITTED_CLASS
- */
-var nullFormCtrl = {
- $addControl: noop,
- $$renameControl: nullFormRenameControl,
- $removeControl: noop,
- $setValidity: noop,
- $setDirty: noop,
- $setPristine: noop,
- $setSubmitted: noop
-},
-PENDING_CLASS = 'ng-pending',
-SUBMITTED_CLASS = 'ng-submitted';
-
-function nullFormRenameControl(control, name) {
- control.$name = name;
-}
+ }
+ });
-/**
- * @ngdoc type
- * @name form.FormController
- *
- * @property {boolean} $pristine True if user has not interacted with the form yet.
- * @property {boolean} $dirty True if user has already interacted with the form.
- * @property {boolean} $valid True if all of the containing forms and controls are valid.
- * @property {boolean} $invalid True if at least one containing control or form is invalid.
- * @property {boolean} $submitted True if user has submitted the form even if its invalid.
- *
- * @property {Object} $pending An object hash, containing references to controls or forms with
- * pending validators, where:
- *
- * - keys are validations tokens (error names).
- * - values are arrays of controls or forms that have a pending validator for the given error name.
- *
- * See {@link form.FormController#$error $error} for a list of built-in validation tokens.
- *
- * @property {Object} $error An object hash, containing references to controls or forms with failing
- * validators, where:
- *
- * - keys are validation tokens (error names),
- * - values are arrays of controls or forms that have a failing validator for the given error name.
- *
- * Built-in validation tokens:
- * - `email`
- * - `max`
- * - `maxlength`
- * - `min`
- * - `minlength`
- * - `number`
- * - `pattern`
- * - `required`
- * - `url`
- * - `date`
- * - `datetimelocal`
- * - `time`
- * - `week`
- * - `month`
- *
- * @description
- * `FormController` keeps track of all its controls and nested forms as well as the state of them,
- * such as being valid/invalid or dirty/pristine.
- *
- * Each {@link ng.directive:form form} directive creates an instance
- * of `FormController`.
- *
- */
-//asks for $scope to fool the BC controller module
-FormController.$inject = ['$element', '$attrs', '$scope', '$animate', '$interpolate'];
-function FormController($element, $attrs, $scope, $animate, $interpolate) {
- this.$$controls = [];
-
- // init state
- this.$error = {};
- this.$$success = {};
- this.$pending = undefined;
- this.$name = $interpolate($attrs.name || $attrs.ngForm || '')($scope);
- this.$dirty = false;
- this.$pristine = true;
- this.$valid = true;
- this.$invalid = false;
- this.$submitted = false;
- this.$$parentForm = nullFormCtrl;
-
- this.$$element = $element;
- this.$$animate = $animate;
-
- setupValidity(this);
-}
-
-FormController.prototype = {
/**
- * @ngdoc method
- * @name form.FormController#$rollbackViewValue
+ * @ngdoc directive
+ * @name ngHref
+ * @restrict A
+ * @priority 99
*
* @description
- * Rollback all form controls pending updates to the `$modelValue`.
+ * Using Angular markup like `{{hash}}` in an href attribute will
+ * make the link go to the wrong URL if the user clicks it before
+ * Angular has a chance to replace the `{{hash}}` markup with its
+ * value. Until Angular replaces the markup the link will be broken
+ * and will most likely return a 404 error. The `ngHref` directive
+ * solves this problem.
+ *
+ * The wrong way to write it:
+ * ```html
+ * link1
+ * ```
+ *
+ * The correct way to write it:
+ * ```html
+ * link1
+ * ```
+ *
+ * @element A
+ * @param {template} ngHref any string which can contain `{{}}` markup.
*
- * Updates may be pending by a debounced event or because the input is waiting for a some future
- * event defined in `ng-model-options`. This method is typically needed by the reset button of
- * a form that uses `ng-model-options` to pend updates.
+ * @example
+ * This example shows various combinations of `href`, `ng-href` and `ng-click` attributes
+ * in links and their different behaviors:
+
+
+
+ link 1 (link, don't reload)
+ link 2 (link, don't reload)
+ link 3 (link, reload!)
+ anchor (link, don't reload)
+ anchor (no link)
+ link (link, change location)
+
+
+ it('should execute ng-click but not reload when href without value', function() {
+ element(by.id('link-1')).click();
+ expect(element(by.model('value')).getAttribute('value')).toEqual('1');
+ expect(element(by.id('link-1')).getAttribute('href')).toBe('');
+ });
+
+ it('should execute ng-click but not reload when href empty string', function() {
+ element(by.id('link-2')).click();
+ expect(element(by.model('value')).getAttribute('value')).toEqual('2');
+ expect(element(by.id('link-2')).getAttribute('href')).toBe('');
+ });
+
+ it('should execute ng-click and change url when ng-href specified', function() {
+ expect(element(by.id('link-3')).getAttribute('href')).toMatch(/\/123$/);
+
+ element(by.id('link-3')).click();
+
+ // At this point, we navigate away from an Angular page, so we need
+ // to use browser.driver to get the base webdriver.
+
+ browser.wait(function() {
+ return browser.driver.getCurrentUrl().then(function(url) {
+ return url.match(/\/123$/);
+ });
+ }, 5000, 'page should navigate to /123');
+ });
+
+ it('should execute ng-click but not reload when href empty string and name specified', function() {
+ element(by.id('link-4')).click();
+ expect(element(by.model('value')).getAttribute('value')).toEqual('4');
+ expect(element(by.id('link-4')).getAttribute('href')).toBe('');
+ });
+
+ it('should execute ng-click but not reload when no href but name specified', function() {
+ element(by.id('link-5')).click();
+ expect(element(by.model('value')).getAttribute('value')).toEqual('5');
+ expect(element(by.id('link-5')).getAttribute('href')).toBe(null);
+ });
+
+ it('should only change url when only ng-href', function() {
+ element(by.model('value')).clear();
+ element(by.model('value')).sendKeys('6');
+ expect(element(by.id('link-6')).getAttribute('href')).toMatch(/\/6$/);
+
+ element(by.id('link-6')).click();
+
+ // At this point, we navigate away from an Angular page, so we need
+ // to use browser.driver to get the base webdriver.
+ browser.wait(function() {
+ return browser.driver.getCurrentUrl().then(function(url) {
+ return url.match(/\/6$/);
+ });
+ }, 5000, 'page should navigate to /6');
+ });
+
+
*/
- $rollbackViewValue: function() {
- forEach(this.$$controls, function(control) {
- control.$rollbackViewValue();
- });
- },
/**
- * @ngdoc method
- * @name form.FormController#$commitViewValue
+ * @ngdoc directive
+ * @name ngSrc
+ * @restrict A
+ * @priority 99
*
* @description
- * Commit all form controls pending updates to the `$modelValue`.
+ * Using Angular markup like `{{hash}}` in a `src` attribute doesn't
+ * work right: The browser will fetch from the URL with the literal
+ * text `{{hash}}` until Angular replaces the expression inside
+ * `{{hash}}`. The `ngSrc` directive solves this problem.
+ *
+ * The buggy way to write it:
+ * ```html
+ *
+ * ```
*
- * Updates may be pending by a debounced event or because the input is waiting for a some future
- * event defined in `ng-model-options`. This method is rarely needed as `NgModelController`
- * usually handles calling this in response to input events.
+ * The correct way to write it:
+ * ```html
+ * ![Description]()
+ * ```
+ *
+ * @element IMG
+ * @param {template} ngSrc any string which can contain `{{}}` markup.
*/
- $commitViewValue: function() {
- forEach(this.$$controls, function(control) {
- control.$commitViewValue();
- });
- },
/**
- * @ngdoc method
- * @name form.FormController#$addControl
- * @param {object} control control object, either a {@link form.FormController} or an
- * {@link ngModel.NgModelController}
+ * @ngdoc directive
+ * @name ngSrcset
+ * @restrict A
+ * @priority 99
*
* @description
- * Register a control with the form. Input elements using ngModelController do this automatically
- * when they are linked.
- *
- * Note that the current state of the control will not be reflected on the new parent form. This
- * is not an issue with normal use, as freshly compiled and linked controls are in a `$pristine`
- * state.
+ * Using Angular markup like `{{hash}}` in a `srcset` attribute doesn't
+ * work right: The browser will fetch from the URL with the literal
+ * text `{{hash}}` until Angular replaces the expression inside
+ * `{{hash}}`. The `ngSrcset` directive solves this problem.
+ *
+ * The buggy way to write it:
+ * ```html
+ * ![Description]()
+ * ```
*
- * However, if the method is used programmatically, for example by adding dynamically created controls,
- * or controls that have been previously removed without destroying their corresponding DOM element,
- * it's the developers responsibility to make sure the current state propagates to the parent form.
+ * The correct way to write it:
+ * ```html
+ * ![Description]()
+ * ```
*
- * For example, if an input control is added that is already `$dirty` and has `$error` properties,
- * calling `$setDirty()` and `$validate()` afterwards will propagate the state to the parent form.
+ * @element IMG
+ * @param {template} ngSrcset any string which can contain `{{}}` markup.
*/
- $addControl: function(control) {
- // Breaking change - before, inputs whose name was "hasOwnProperty" were quietly ignored
- // and not added to the scope. Now we throw an error.
- assertNotHasOwnProperty(control.$name, 'input');
- this.$$controls.push(control);
-
- if (control.$name) {
- this[control.$name] = control;
- }
-
- control.$$parentForm = this;
- },
-
- // Private API: rename a form control
- $$renameControl: function(control, newName) {
- var oldName = control.$name;
-
- if (this[oldName] === control) {
- delete this[oldName];
- }
- this[newName] = control;
- control.$name = newName;
- },
/**
- * @ngdoc method
- * @name form.FormController#$removeControl
- * @param {object} control control object, either a {@link form.FormController} or an
- * {@link ngModel.NgModelController}
+ * @ngdoc directive
+ * @name ngDisabled
+ * @restrict A
+ * @priority 100
*
* @description
- * Deregister a control from the form.
*
- * Input elements using ngModelController do this automatically when they are destroyed.
+ * This directive sets the `disabled` attribute on the element (typically a form control,
+ * e.g. `input`, `button`, `select` etc.) if the
+ * {@link guide/expression expression} inside `ngDisabled` evaluates to truthy.
+ *
+ * A special directive is necessary because we cannot use interpolation inside the `disabled`
+ * attribute. See the {@link guide/interpolation interpolation guide} for more info.
+ *
+ * @example
+
+
+
+
+
+
+ it('should toggle button', function() {
+ expect(element(by.css('button')).getAttribute('disabled')).toBeFalsy();
+ element(by.model('checked')).click();
+ expect(element(by.css('button')).getAttribute('disabled')).toBeTruthy();
+ });
+
+
*
- * Note that only the removed control's validation state (`$errors`etc.) will be removed from the
- * form. `$dirty`, `$submitted` states will not be changed, because the expected behavior can be
- * different from case to case. For example, removing the only `$dirty` control from a form may or
- * may not mean that the form is still `$dirty`.
+ * @element INPUT
+ * @param {expression} ngDisabled If the {@link guide/expression expression} is truthy,
+ * then the `disabled` attribute will be set on the element
*/
- $removeControl: function(control) {
- if (control.$name && this[control.$name] === control) {
- delete this[control.$name];
- }
- forEach(this.$pending, function(value, name) {
- // eslint-disable-next-line no-invalid-this
- this.$setValidity(name, null, control);
- }, this);
- forEach(this.$error, function(value, name) {
- // eslint-disable-next-line no-invalid-this
- this.$setValidity(name, null, control);
- }, this);
- forEach(this.$$success, function(value, name) {
- // eslint-disable-next-line no-invalid-this
- this.$setValidity(name, null, control);
- }, this);
-
- arrayRemove(this.$$controls, control);
- control.$$parentForm = nullFormCtrl;
- },
/**
- * @ngdoc method
- * @name form.FormController#$setDirty
+ * @ngdoc directive
+ * @name ngChecked
+ * @restrict A
+ * @priority 100
*
* @description
- * Sets the form to a dirty state.
+ * Sets the `checked` attribute on the element, if the expression inside `ngChecked` is truthy.
+ *
+ * Note that this directive should not be used together with {@link ngModel `ngModel`},
+ * as this can lead to unexpected behavior.
+ *
+ * A special directive is necessary because we cannot use interpolation inside the `checked`
+ * attribute. See the {@link guide/interpolation interpolation guide} for more info.
+ *
+ * @example
+
+
+
+
+
+
+ it('should check both checkBoxes', function() {
+ expect(element(by.id('checkFollower')).getAttribute('checked')).toBeFalsy();
+ element(by.model('leader')).click();
+ expect(element(by.id('checkFollower')).getAttribute('checked')).toBeTruthy();
+ });
+
+
*
- * This method can be called to add the 'ng-dirty' class and set the form to a dirty
- * state (ng-dirty class). This method will also propagate to parent forms.
+ * @element INPUT
+ * @param {expression} ngChecked If the {@link guide/expression expression} is truthy,
+ * then the `checked` attribute will be set on the element
*/
- $setDirty: function() {
- this.$$animate.removeClass(this.$$element, PRISTINE_CLASS);
- this.$$animate.addClass(this.$$element, DIRTY_CLASS);
- this.$dirty = true;
- this.$pristine = false;
- this.$$parentForm.$setDirty();
- },
/**
- * @ngdoc method
- * @name form.FormController#$setPristine
+ * @ngdoc directive
+ * @name ngReadonly
+ * @restrict A
+ * @priority 100
*
* @description
- * Sets the form to its pristine state.
*
- * This method sets the form's `$pristine` state to true, the `$dirty` state to false, removes
- * the `ng-dirty` class and adds the `ng-pristine` class. Additionally, it sets the `$submitted`
- * state to false.
+ * Sets the `readonly` attribute on the element, if the expression inside `ngReadonly` is truthy.
+ * Note that `readonly` applies only to `input` elements with specific types. [See the input docs on
+ * MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) for more information.
+ *
+ * A special directive is necessary because we cannot use interpolation inside the `readonly`
+ * attribute. See the {@link guide/interpolation interpolation guide} for more info.
*
- * This method will also propagate to all the controls contained in this form.
+ * @example
+
+
+
+
+
+
+ it('should toggle readonly attr', function() {
+ expect(element(by.css('[type="text"]')).getAttribute('readonly')).toBeFalsy();
+ element(by.model('checked')).click();
+ expect(element(by.css('[type="text"]')).getAttribute('readonly')).toBeTruthy();
+ });
+
+
*
- * Setting a form back to a pristine state is often useful when we want to 'reuse' a form after
- * saving or resetting it.
+ * @element INPUT
+ * @param {expression} ngReadonly If the {@link guide/expression expression} is truthy,
+ * then special attribute "readonly" will be set on the element
*/
- $setPristine: function() {
- this.$$animate.setClass(this.$$element, PRISTINE_CLASS, DIRTY_CLASS + ' ' + SUBMITTED_CLASS);
- this.$dirty = false;
- this.$pristine = true;
- this.$submitted = false;
- forEach(this.$$controls, function(control) {
- control.$setPristine();
- });
- },
/**
- * @ngdoc method
- * @name form.FormController#$setUntouched
+ * @ngdoc directive
+ * @name ngSelected
+ * @restrict A
+ * @priority 100
*
* @description
- * Sets the form to its untouched state.
*
- * This method can be called to remove the 'ng-touched' class and set the form controls to their
- * untouched state (ng-untouched class).
+ * Sets the `selected` attribute on the element, if the expression inside `ngSelected` is truthy.
+ *
+ * A special directive is necessary because we cannot use interpolation inside the `selected`
+ * attribute. See the {@link guide/interpolation interpolation guide} for more info.
+ *
+ *
+ * **Note:** `ngSelected` does not interact with the `select` and `ngModel` directives, it only
+ * sets the `selected` attribute on the element. If you are using `ngModel` on the select, you
+ * should not use `ngSelected` on the options, as `ngModel` will set the select value and
+ * selected options.
+ *
+ *
+ * @example
+
+
+
+
+
+
+ it('should select Greetings!', function() {
+ expect(element(by.id('greet')).getAttribute('selected')).toBeFalsy();
+ element(by.model('selected')).click();
+ expect(element(by.id('greet')).getAttribute('selected')).toBeTruthy();
+ });
+
+
*
- * Setting a form controls back to their untouched state is often useful when setting the form
- * back to its pristine state.
+ * @element OPTION
+ * @param {expression} ngSelected If the {@link guide/expression expression} is truthy,
+ * then special attribute "selected" will be set on the element
*/
- $setUntouched: function() {
- forEach(this.$$controls, function(control) {
- control.$setUntouched();
- });
- },
/**
- * @ngdoc method
- * @name form.FormController#$setSubmitted
+ * @ngdoc directive
+ * @name ngOpen
+ * @restrict A
+ * @priority 100
*
* @description
- * Sets the form to its submitted state.
+ *
+ * Sets the `open` attribute on the element, if the expression inside `ngOpen` is truthy.
+ *
+ * A special directive is necessary because we cannot use interpolation inside the `open`
+ * attribute. See the {@link guide/interpolation interpolation guide} for more info.
+ *
+ * ## A note about browser compatibility
+ *
+ * Internet Explorer and Edge do not support the `details` element, it is
+ * recommended to use {@link ng.ngShow} and {@link ng.ngHide} instead.
+ *
+ * @example
+
+
+
+
+ List
+
+ - Apple
+ - Orange
+ - Durian
+
+
+
+
+ it('should toggle open', function() {
+ expect(element(by.id('details')).getAttribute('open')).toBeFalsy();
+ element(by.model('open')).click();
+ expect(element(by.id('details')).getAttribute('open')).toBeTruthy();
+ });
+
+
+ *
+ * @element DETAILS
+ * @param {expression} ngOpen If the {@link guide/expression expression} is truthy,
+ * then special attribute "open" will be set on the element
*/
- $setSubmitted: function() {
- this.$$animate.addClass(this.$$element, SUBMITTED_CLASS);
- this.$submitted = true;
- this.$$parentForm.$setSubmitted();
- }
-};
-
-/**
- * @ngdoc method
- * @name form.FormController#$setValidity
- *
- * @description
- * Change the validity state of the form, and notify the parent form (if any).
- *
- * Application developers will rarely need to call this method directly. It is used internally, by
- * {@link ngModel.NgModelController#$setValidity NgModelController.$setValidity()}, to propagate a
- * control's validity state to the parent `FormController`.
- *
- * @param {string} validationErrorKey Name of the validator. The `validationErrorKey` will be
- * assigned to either `$error[validationErrorKey]` or `$pending[validationErrorKey]` (for
- * unfulfilled `$asyncValidators`), so that it is available for data-binding. The
- * `validationErrorKey` should be in camelCase and will get converted into dash-case for
- * class name. Example: `myError` will result in `ng-valid-my-error` and
- * `ng-invalid-my-error` classes and can be bound to as `{{ someForm.$error.myError }}`.
- * @param {boolean} isValid Whether the current state is valid (true), invalid (false), pending
- * (undefined), or skipped (null). Pending is used for unfulfilled `$asyncValidators`.
- * Skipped is used by AngularJS when validators do not run because of parse errors and when
- * `$asyncValidators` do not run because any of the `$validators` failed.
- * @param {NgModelController | FormController} controller - The controller whose validity state is
- * triggering the change.
- */
-addSetValidityMethod({
- clazz: FormController,
- set: function(object, property, controller) {
- var list = object[property];
- if (!list) {
- object[property] = [controller];
- } else {
- var index = list.indexOf(controller);
- if (index === -1) {
- list.push(controller);
- }
- }
- },
- unset: function(object, property, controller) {
- var list = object[property];
- if (!list) {
- return;
- }
- arrayRemove(list, controller);
- if (list.length === 0) {
- delete object[property];
- }
- }
-});
-
-/**
- * @ngdoc directive
- * @name ngForm
- * @restrict EAC
- *
- * @description
- * Nestable alias of {@link ng.directive:form `form`} directive. HTML
- * does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a
- * sub-group of controls needs to be determined.
- *
- * Note: the purpose of `ngForm` is to group controls,
- * but not to be a replacement for the `
+
+
+ var value = element(by.binding('example.value'));
+ var valid = element(by.binding('myForm.input.$valid'));
+ var input = element(by.model('example.value'));
+ it('should initialize to model', function() {
+ expect(value.getText()).toContain('12');
+ expect(valid.getText()).toContain('true');
+ });
+ it('should be invalid if empty', function() {
+ input.clear();
+ input.sendKeys('');
+ expect(value.getText()).toEqual('value =');
+ expect(valid.getText()).toContain('false');
+ });
+ it('should be invalid if over max', function() {
+ input.clear();
+ input.sendKeys('123');
+ expect(value.getText()).toEqual('value =');
+ expect(valid.getText()).toContain('false');
+ });
+
+
+ */
+ 'number': numberInputType,
- it('should initialize to model', function() {
- expect(text.getText()).toContain('me@example.com');
- expect(valid.getText()).toContain('true');
- });
+ /**
+ * @ngdoc input
+ * @name input[url]
+ *
+ * @description
+ * Text input with URL validation. Sets the `url` validation error key if the content is not a
+ * valid URL.
+ *
+ *
+ * **Note:** `input[url]` uses a regex to validate urls that is derived from the regex
+ * used in Chromium. If you need stricter validation, you can use `ng-pattern` or modify
+ * the built-in validators (see the {@link guide/forms Forms guide})
+ *
+ *
+ * @param {string} ngModel Assignable angular expression to data-bind to.
+ * @param {string=} name Property name of the form under which the control is published.
+ * @param {string=} required Sets `required` validation error key if the value is not entered.
+ * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to
+ * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of
+ * `required` when you want to data-bind to the `required` attribute.
+ * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than
+ * minlength.
+ * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
+ * maxlength. Setting the attribute to a negative or non-numeric value, allows view values of
+ * any length.
+ * @param {string=} pattern Similar to `ngPattern` except that the attribute value is the actual string
+ * that contains the regular expression body that will be converted to a regular expression
+ * as in the ngPattern directive.
+ * @param {string=} ngPattern Sets `pattern` validation error key if the ngModel {@link ngModel.NgModelController#$viewValue $viewValue}
+ * does not match a RegExp found by evaluating the Angular expression given in the attribute value.
+ * If the expression evaluates to a RegExp object, then this is used directly.
+ * If the expression evaluates to a string, then it will be converted to a RegExp
+ * after wrapping it in `^` and `$` characters. For instance, `"abc"` will be converted to
+ * `new RegExp('^abc$')`.
+ * **Note:** Avoid using the `g` flag on the RegExp, as it will cause each successive search to
+ * start at the index of the last search's match, thus not taking the whole input value into
+ * account.
+ * @param {string=} ngChange Angular expression to be executed when input changes due to user
+ * interaction with the input element.
+ *
+ * @example
+
+
+
+
+
+
+ var text = element(by.binding('url.text'));
+ var valid = element(by.binding('myForm.input.$valid'));
+ var input = element(by.model('url.text'));
+ it('should initialize to model', function() {
+ expect(text.getText()).toContain('http://google.com');
+ expect(valid.getText()).toContain('true');
+ });
+ it('should be invalid if empty', function() {
+ input.clear();
+ input.sendKeys('');
+ expect(text.getText()).toEqual('text =');
+ expect(valid.getText()).toContain('false');
+ });
+ it('should be invalid if not url', function() {
+ input.clear();
+ input.sendKeys('box');
+ expect(valid.getText()).toContain('false');
+ });
+
+
+ */
+ 'url': urlInputType,
- it('should be invalid if empty', function() {
- input.clear();
- input.sendKeys('');
- expect(text.getText()).toEqual('text =');
- expect(valid.getText()).toContain('false');
- });
+ /**
+ * @ngdoc input
+ * @name input[email]
+ *
+ * @description
+ * Text input with email validation. Sets the `email` validation error key if not a valid email
+ * address.
+ *
+ *
+ * **Note:** `input[email]` uses a regex to validate email addresses that is derived from the regex
+ * used in Chromium. If you need stricter validation (e.g. requiring a top-level domain), you can
+ * use `ng-pattern` or modify the built-in validators (see the {@link guide/forms Forms guide})
+ *
+ *
+ * @param {string} ngModel Assignable angular expression to data-bind to.
+ * @param {string=} name Property name of the form under which the control is published.
+ * @param {string=} required Sets `required` validation error key if the value is not entered.
+ * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to
+ * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of
+ * `required` when you want to data-bind to the `required` attribute.
+ * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than
+ * minlength.
+ * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
+ * maxlength. Setting the attribute to a negative or non-numeric value, allows view values of
+ * any length.
+ * @param {string=} pattern Similar to `ngPattern` except that the attribute value is the actual string
+ * that contains the regular expression body that will be converted to a regular expression
+ * as in the ngPattern directive.
+ * @param {string=} ngPattern Sets `pattern` validation error key if the ngModel {@link ngModel.NgModelController#$viewValue $viewValue}
+ * does not match a RegExp found by evaluating the Angular expression given in the attribute value.
+ * If the expression evaluates to a RegExp object, then this is used directly.
+ * If the expression evaluates to a string, then it will be converted to a RegExp
+ * after wrapping it in `^` and `$` characters. For instance, `"abc"` will be converted to
+ * `new RegExp('^abc$')`.
+ * **Note:** Avoid using the `g` flag on the RegExp, as it will cause each successive search to
+ * start at the index of the last search's match, thus not taking the whole input value into
+ * account.
+ * @param {string=} ngChange Angular expression to be executed when input changes due to user
+ * interaction with the input element.
+ *
+ * @example
+
+
+
+
+
+
+ var text = element(by.binding('email.text'));
+ var valid = element(by.binding('myForm.input.$valid'));
+ var input = element(by.model('email.text'));
+ it('should initialize to model', function() {
+ expect(text.getText()).toContain('me@example.com');
+ expect(valid.getText()).toContain('true');
+ });
+ it('should be invalid if empty', function() {
+ input.clear();
+ input.sendKeys('');
+ expect(text.getText()).toEqual('text =');
+ expect(valid.getText()).toContain('false');
+ });
+ it('should be invalid if not email', function() {
+ input.clear();
+ input.sendKeys('xxx');
+ expect(valid.getText()).toContain('false');
+ });
+
+
+ */
+ 'email': emailInputType,
- it('should be invalid if not email', function() {
- input.clear();
- input.sendKeys('xxx');
+ /**
+ * @ngdoc input
+ * @name input[radio]
+ *
+ * @description
+ * HTML radio button.
+ *
+ * @param {string} ngModel Assignable angular expression to data-bind to.
+ * @param {string} value The value to which the `ngModel` expression should be set when selected.
+ * Note that `value` only supports `string` values, i.e. the scope model needs to be a string,
+ * too. Use `ngValue` if you need complex models (`number`, `object`, ...).
+ * @param {string=} name Property name of the form under which the control is published.
+ * @param {string=} ngChange Angular expression to be executed when input changes due to user
+ * interaction with the input element.
+ * @param {string} ngValue Angular expression to which `ngModel` will be be set when the radio
+ * is selected. Should be used instead of the `value` attribute if you need
+ * a non-string `ngModel` (`boolean`, `array`, ...).
+ *
+ * @example
+
+
+
+
+ Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
+
+
+ it('should change state', function() {
+ var inputs = element.all(by.model('color.name'));
+ var color = element(by.binding('color.name'));
+ expect(color.getText()).toContain('blue');
+ inputs.get(0).click();
+ expect(color.getText()).toContain('red');
+ inputs.get(1).click();
+ expect(color.getText()).toContain('green');
+ });
+
+
+ */
+ 'radio': radioInputType,
- expect(valid.getText()).toContain('false');
- });
-
-
- */
- 'email': emailInputType,
+ /**
+ * @ngdoc input
+ * @name input[range]
+ *
+ * @description
+ * Native range input with validation and transformation.
+ *
+ * The model for the range input must always be a `Number`.
+ *
+ * IE9 and other browsers that do not support the `range` type fall back
+ * to a text input without any default values for `min`, `max` and `step`. Model binding,
+ * validation and number parsing are nevertheless supported.
+ *
+ * Browsers that support range (latest Chrome, Safari, Firefox, Edge) treat `input[range]`
+ * in a way that never allows the input to hold an invalid value. That means:
+ * - any non-numerical value is set to `(max + min) / 2`.
+ * - any numerical value that is less than the current min val, or greater than the current max val
+ * is set to the min / max val respectively.
+ * - additionally, the current `step` is respected, so the nearest value that satisfies a step
+ * is used.
+ *
+ * See the [HTML Spec on input[type=range]](https://www.w3.org/TR/html5/forms.html#range-state-(type=range))
+ * for more info.
+ *
+ * This has the following consequences for Angular:
+ *
+ * Since the element value should always reflect the current model value, a range input
+ * will set the bound ngModel expression to the value that the browser has set for the
+ * input element. For example, in the following input ``,
+ * if the application sets `model.value = null`, the browser will set the input to `'50'`.
+ * Angular will then set the model to `50`, to prevent input and model value being out of sync.
+ *
+ * That means the model for range will immediately be set to `50` after `ngModel` has been
+ * initialized. It also means a range input can never have the required error.
+ *
+ * This does not only affect changes to the model value, but also to the values of the `min`,
+ * `max`, and `step` attributes. When these change in a way that will cause the browser to modify
+ * the input value, Angular will also update the model value.
+ *
+ * Automatic value adjustment also means that a range input element can never have the `required`,
+ * `min`, or `max` errors.
+ *
+ * However, `step` is currently only fully implemented by Firefox. Other browsers have problems
+ * when the step value changes dynamically - they do not adjust the element value correctly, but
+ * instead may set the `stepMismatch` error. If that's the case, the Angular will set the `step`
+ * error on the input, and set the model to `undefined`.
+ *
+ * Note that `input[range]` is not compatible with`ngMax`, `ngMin`, and `ngStep`, because they do
+ * not set the `min` and `max` attributes, which means that the browser won't automatically adjust
+ * the input value based on their values, and will always assume min = 0, max = 100, and step = 1.
+ *
+ * @param {string} ngModel Assignable angular expression to data-bind to.
+ * @param {string=} name Property name of the form under which the control is published.
+ * @param {string=} min Sets the `min` validation to ensure that the value entered is greater
+ * than `min`. Can be interpolated.
+ * @param {string=} max Sets the `max` validation to ensure that the value entered is less than `max`.
+ * Can be interpolated.
+ * @param {string=} step Sets the `step` validation to ensure that the value entered matches the `step`
+ * Can be interpolated.
+ * @param {expression=} ngChange AngularJS expression to be executed when the ngModel value changes due
+ * to user interaction with the input element.
+ * @param {expression=} ngChecked If the expression is truthy, then the `checked` attribute will be set on the
+ * element. **Note** : `ngChecked` should not be used alongside `ngModel`.
+ * Checkout {@link ng.directive:ngChecked ngChecked} for usage.
+ *
+ * @example
+
+
+
+
+
+
+ * ## Range Input with ngMin & ngMax attributes
+ * @example
+
+
+
+
+
+
+ */
+ 'range': rangeInputType,
+ /**
+ * @ngdoc input
+ * @name input[checkbox]
+ *
+ * @description
+ * HTML checkbox.
+ *
+ * @param {string} ngModel Assignable angular expression to data-bind to.
+ * @param {string=} name Property name of the form under which the control is published.
+ * @param {expression=} ngTrueValue The value to which the expression should be set when selected.
+ * @param {expression=} ngFalseValue The value to which the expression should be set when not selected.
+ * @param {string=} ngChange Angular expression to be executed when input changes due to user
+ * interaction with the input element.
+ *
+ * @example
+
+
+
+
+
+
+ it('should change state', function() {
+ var value1 = element(by.binding('checkboxModel.value1'));
+ var value2 = element(by.binding('checkboxModel.value2'));
+ expect(value1.getText()).toContain('true');
+ expect(value2.getText()).toContain('YES');
+ element(by.model('checkboxModel.value1')).click();
+ element(by.model('checkboxModel.value2')).click();
+ expect(value1.getText()).toContain('false');
+ expect(value2.getText()).toContain('NO');
+ });
+
+
+ */
+ 'checkbox': checkboxInputType,
- /**
- * @ngdoc input
- * @name input[radio]
- *
- * @description
- * HTML radio button.
- *
- * @param {string} ngModel Assignable angular expression to data-bind to.
- * @param {string} value The value to which the `ngModel` expression should be set when selected.
- * Note that `value` only supports `string` values, i.e. the scope model needs to be a string,
- * too. Use `ngValue` if you need complex models (`number`, `object`, ...).
- * @param {string=} name Property name of the form under which the control is published.
- * @param {string=} ngChange Angular expression to be executed when input changes due to user
- * interaction with the input element.
- * @param {string} ngValue Angular expression to which `ngModel` will be be set when the radio
- * is selected. Should be used instead of the `value` attribute if you need
- * a non-string `ngModel` (`boolean`, `array`, ...).
- *
- * @example
-
-
-
-
- Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
-
-
- it('should change state', function() {
- var inputs = element.all(by.model('color.name'));
- var color = element(by.binding('color.name'));
+ 'hidden': noop,
+ 'button': noop,
+ 'submit': noop,
+ 'reset': noop,
+ 'file': noop
+ };
- expect(color.getText()).toContain('blue');
+ function stringBasedInputType(ctrl) {
+ ctrl.$formatters.push(function (value) {
+ return ctrl.$isEmpty(value) ? value : value.toString();
+ });
+ }
- inputs.get(0).click();
- expect(color.getText()).toContain('red');
+ function textInputType(scope, element, attr, ctrl, $sniffer, $browser) {
+ baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
+ stringBasedInputType(ctrl);
+ }
- inputs.get(1).click();
- expect(color.getText()).toContain('green');
- });
-
-
- */
- 'radio': radioInputType,
+ function baseInputType(scope, element, attr, ctrl, $sniffer, $browser) {
+ var type = lowercase(element[0].type);
- /**
- * @ngdoc input
- * @name input[range]
- *
- * @description
- * Native range input with validation and transformation.
- *
- * The model for the range input must always be a `Number`.
- *
- * IE9 and other browsers that do not support the `range` type fall back
- * to a text input without any default values for `min`, `max` and `step`. Model binding,
- * validation and number parsing are nevertheless supported.
- *
- * Browsers that support range (latest Chrome, Safari, Firefox, Edge) treat `input[range]`
- * in a way that never allows the input to hold an invalid value. That means:
- * - any non-numerical value is set to `(max + min) / 2`.
- * - any numerical value that is less than the current min val, or greater than the current max val
- * is set to the min / max val respectively.
- * - additionally, the current `step` is respected, so the nearest value that satisfies a step
- * is used.
- *
- * See the [HTML Spec on input[type=range]](https://www.w3.org/TR/html5/forms.html#range-state-(type=range))
- * for more info.
- *
- * This has the following consequences for Angular:
- *
- * Since the element value should always reflect the current model value, a range input
- * will set the bound ngModel expression to the value that the browser has set for the
- * input element. For example, in the following input ``,
- * if the application sets `model.value = null`, the browser will set the input to `'50'`.
- * Angular will then set the model to `50`, to prevent input and model value being out of sync.
- *
- * That means the model for range will immediately be set to `50` after `ngModel` has been
- * initialized. It also means a range input can never have the required error.
- *
- * This does not only affect changes to the model value, but also to the values of the `min`,
- * `max`, and `step` attributes. When these change in a way that will cause the browser to modify
- * the input value, Angular will also update the model value.
- *
- * Automatic value adjustment also means that a range input element can never have the `required`,
- * `min`, or `max` errors.
- *
- * However, `step` is currently only fully implemented by Firefox. Other browsers have problems
- * when the step value changes dynamically - they do not adjust the element value correctly, but
- * instead may set the `stepMismatch` error. If that's the case, the Angular will set the `step`
- * error on the input, and set the model to `undefined`.
- *
- * Note that `input[range]` is not compatible with`ngMax`, `ngMin`, and `ngStep`, because they do
- * not set the `min` and `max` attributes, which means that the browser won't automatically adjust
- * the input value based on their values, and will always assume min = 0, max = 100, and step = 1.
- *
- * @param {string} ngModel Assignable angular expression to data-bind to.
- * @param {string=} name Property name of the form under which the control is published.
- * @param {string=} min Sets the `min` validation to ensure that the value entered is greater
- * than `min`. Can be interpolated.
- * @param {string=} max Sets the `max` validation to ensure that the value entered is less than `max`.
- * Can be interpolated.
- * @param {string=} step Sets the `step` validation to ensure that the value entered matches the `step`
- * Can be interpolated.
- * @param {expression=} ngChange AngularJS expression to be executed when the ngModel value changes due
- * to user interaction with the input element.
- * @param {expression=} ngChecked If the expression is truthy, then the `checked` attribute will be set on the
- * element. **Note** : `ngChecked` should not be used alongside `ngModel`.
- * Checkout {@link ng.directive:ngChecked ngChecked} for usage.
- *
- * @example
-
-
-
-
-
-
+ // In composition mode, users are still inputting intermediate text buffer,
+ // hold the listener until composition is done.
+ // More about composition events: https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent
+ if (!$sniffer.android) {
+ var composing = false;
- * ## Range Input with ngMin & ngMax attributes
+ element.on('compositionstart', function () {
+ composing = true;
+ });
- * @example
-
-
-
-
-
-
+ element.on('compositionend', function () {
+ composing = false;
+ listener();
+ });
+ }
- */
- 'range': rangeInputType,
+ var timeout;
- /**
- * @ngdoc input
- * @name input[checkbox]
- *
- * @description
- * HTML checkbox.
- *
- * @param {string} ngModel Assignable angular expression to data-bind to.
- * @param {string=} name Property name of the form under which the control is published.
- * @param {expression=} ngTrueValue The value to which the expression should be set when selected.
- * @param {expression=} ngFalseValue The value to which the expression should be set when not selected.
- * @param {string=} ngChange Angular expression to be executed when input changes due to user
- * interaction with the input element.
- *
- * @example
-
-
-
-
-
-
- it('should change state', function() {
- var value1 = element(by.binding('checkboxModel.value1'));
- var value2 = element(by.binding('checkboxModel.value2'));
+ var listener = function listener(ev) {
+ if (timeout) {
+ $browser.defer.cancel(timeout);
+ timeout = null;
+ }
+ if (composing) return;
+ var value = element.val(),
+ event = ev && ev.type;
- expect(value1.getText()).toContain('true');
- expect(value2.getText()).toContain('YES');
+ // By default we will trim the value
+ // If the attribute ng-trim exists we will avoid trimming
+ // If input type is 'password', the value is never trimmed
+ if (type !== 'password' && (!attr.ngTrim || attr.ngTrim !== 'false')) {
+ value = trim(value);
+ }
- element(by.model('checkboxModel.value1')).click();
- element(by.model('checkboxModel.value2')).click();
+ // If a control is suffering from bad input (due to native validators), browsers discard its
+ // value, so it may be necessary to revalidate (by calling $setViewValue again) even if the
+ // control's value is the same empty value twice in a row.
+ if (ctrl.$viewValue !== value || value === '' && ctrl.$$hasNativeValidators) {
+ ctrl.$setViewValue(value, event);
+ }
+ };
- expect(value1.getText()).toContain('false');
- expect(value2.getText()).toContain('NO');
+ // if the browser does support "input" event, we are fine - except on IE9 which doesn't fire the
+ // input event on backspace, delete or cut
+ if ($sniffer.hasEvent('input')) {
+ element.on('input', listener);
+ } else {
+ var deferListener = function deferListener(ev, input, origValue) {
+ if (!timeout) {
+ timeout = $browser.defer(function () {
+ timeout = null;
+ if (!input || input.value !== origValue) {
+ listener(ev);
+ }
});
-
-
- */
- 'checkbox': checkboxInputType,
-
- 'hidden': noop,
- 'button': noop,
- 'submit': noop,
- 'reset': noop,
- 'file': noop
-};
-
-function stringBasedInputType(ctrl) {
- ctrl.$formatters.push(function(value) {
- return ctrl.$isEmpty(value) ? value : value.toString();
- });
-}
-
-function textInputType(scope, element, attr, ctrl, $sniffer, $browser) {
- baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
- stringBasedInputType(ctrl);
-}
-
-function baseInputType(scope, element, attr, ctrl, $sniffer, $browser) {
- var type = lowercase(element[0].type);
-
- // In composition mode, users are still inputting intermediate text buffer,
- // hold the listener until composition is done.
- // More about composition events: https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent
- if (!$sniffer.android) {
- var composing = false;
-
- element.on('compositionstart', function() {
- composing = true;
- });
-
- element.on('compositionend', function() {
- composing = false;
- listener();
- });
- }
+ }
+ };
- var timeout;
+ element.on('keydown', /** @this */function (event) {
+ var key = event.keyCode;
- var listener = function(ev) {
- if (timeout) {
- $browser.defer.cancel(timeout);
- timeout = null;
- }
- if (composing) return;
- var value = element.val(),
- event = ev && ev.type;
+ // ignore
+ // command modifiers arrows
+ if (key === 91 || 15 < key && key < 19 || 37 <= key && key <= 40) return;
- // By default we will trim the value
- // If the attribute ng-trim exists we will avoid trimming
- // If input type is 'password', the value is never trimmed
- if (type !== 'password' && (!attr.ngTrim || attr.ngTrim !== 'false')) {
- value = trim(value);
- }
+ deferListener(event, this, this.value);
+ });
- // If a control is suffering from bad input (due to native validators), browsers discard its
- // value, so it may be necessary to revalidate (by calling $setViewValue again) even if the
- // control's value is the same empty value twice in a row.
- if (ctrl.$viewValue !== value || (value === '' && ctrl.$$hasNativeValidators)) {
- ctrl.$setViewValue(value, event);
+ // if user modifies input value using context menu in IE, we need "paste" and "cut" events to catch it
+ if ($sniffer.hasEvent('paste')) {
+ element.on('paste cut', deferListener);
+ }
+ }
+
+ // if user paste into input using mouse on older browser
+ // or form autocomplete on newer browser, we need "change" event to catch it
+ element.on('change', listener);
+
+ // Some native input types (date-family) have the ability to change validity without
+ // firing any input/change events.
+ // For these event types, when native validators are present and the browser supports the type,
+ // check for validity changes on various DOM events.
+ if (PARTIAL_VALIDATION_TYPES[type] && ctrl.$$hasNativeValidators && type === attr.type) {
+ element.on(PARTIAL_VALIDATION_EVENTS, /** @this */function (ev) {
+ if (!timeout) {
+ var validity = this[VALIDITY_STATE_PROPERTY];
+ var origBadInput = validity.badInput;
+ var origTypeMismatch = validity.typeMismatch;
+ timeout = $browser.defer(function () {
+ timeout = null;
+ if (validity.badInput !== origBadInput || validity.typeMismatch !== origTypeMismatch) {
+ listener(ev);
+ }
+ });
+ }
+ });
}
- };
- // if the browser does support "input" event, we are fine - except on IE9 which doesn't fire the
- // input event on backspace, delete or cut
- if ($sniffer.hasEvent('input')) {
- element.on('input', listener);
- } else {
- var deferListener = function(ev, input, origValue) {
- if (!timeout) {
- timeout = $browser.defer(function() {
- timeout = null;
- if (!input || input.value !== origValue) {
- listener(ev);
- }
- });
+ ctrl.$render = function () {
+ // Workaround for Firefox validation #12102.
+ var value = ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue;
+ if (element.val() !== value) {
+ element.val(value);
}
};
-
- element.on('keydown', /** @this */ function(event) {
- var key = event.keyCode;
-
- // ignore
- // command modifiers arrows
- if (key === 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) return;
-
- deferListener(event, this, this.value);
- });
-
- // if user modifies input value using context menu in IE, we need "paste" and "cut" events to catch it
- if ($sniffer.hasEvent('paste')) {
- element.on('paste cut', deferListener);
- }
- }
-
- // if user paste into input using mouse on older browser
- // or form autocomplete on newer browser, we need "change" event to catch it
- element.on('change', listener);
-
- // Some native input types (date-family) have the ability to change validity without
- // firing any input/change events.
- // For these event types, when native validators are present and the browser supports the type,
- // check for validity changes on various DOM events.
- if (PARTIAL_VALIDATION_TYPES[type] && ctrl.$$hasNativeValidators && type === attr.type) {
- element.on(PARTIAL_VALIDATION_EVENTS, /** @this */ function(ev) {
- if (!timeout) {
- var validity = this[VALIDITY_STATE_PROPERTY];
- var origBadInput = validity.badInput;
- var origTypeMismatch = validity.typeMismatch;
- timeout = $browser.defer(function() {
- timeout = null;
- if (validity.badInput !== origBadInput || validity.typeMismatch !== origTypeMismatch) {
- listener(ev);
- }
- });
- }
- });
}
- ctrl.$render = function() {
- // Workaround for Firefox validation #12102.
- var value = ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue;
- if (element.val() !== value) {
- element.val(value);
+ function weekParser(isoWeek, existingDate) {
+ if (isDate(isoWeek)) {
+ return isoWeek;
}
- };
-}
-function weekParser(isoWeek, existingDate) {
- if (isDate(isoWeek)) {
- return isoWeek;
- }
+ if (isString(isoWeek)) {
+ WEEK_REGEXP.lastIndex = 0;
+ var parts = WEEK_REGEXP.exec(isoWeek);
+ if (parts) {
+ var year = +parts[1],
+ week = +parts[2],
+ hours = 0,
+ minutes = 0,
+ seconds = 0,
+ milliseconds = 0,
+ firstThurs = getFirstThursdayOfYear(year),
+ addDays = (week - 1) * 7;
- if (isString(isoWeek)) {
- WEEK_REGEXP.lastIndex = 0;
- var parts = WEEK_REGEXP.exec(isoWeek);
- if (parts) {
- var year = +parts[1],
- week = +parts[2],
- hours = 0,
- minutes = 0,
- seconds = 0,
- milliseconds = 0,
- firstThurs = getFirstThursdayOfYear(year),
- addDays = (week - 1) * 7;
+ if (existingDate) {
+ hours = existingDate.getHours();
+ minutes = existingDate.getMinutes();
+ seconds = existingDate.getSeconds();
+ milliseconds = existingDate.getMilliseconds();
+ }
- if (existingDate) {
- hours = existingDate.getHours();
- minutes = existingDate.getMinutes();
- seconds = existingDate.getSeconds();
- milliseconds = existingDate.getMilliseconds();
+ return new Date(year, 0, firstThurs.getDate() + addDays, hours, minutes, seconds, milliseconds);
}
-
- return new Date(year, 0, firstThurs.getDate() + addDays, hours, minutes, seconds, milliseconds);
}
- }
- return NaN;
-}
-
-function createDateParser(regexp, mapping) {
- return function(iso, date) {
- var parts, map;
+ return NaN;
+ }
- if (isDate(iso)) {
- return iso;
- }
+ function createDateParser(regexp, mapping) {
+ return function (iso, date) {
+ var parts, map;
- if (isString(iso)) {
- // When a date is JSON'ified to wraps itself inside of an extra
- // set of double quotes. This makes the date parsing code unable
- // to match the date string and parse it as a date.
- if (iso.charAt(0) === '"' && iso.charAt(iso.length - 1) === '"') {
- iso = iso.substring(1, iso.length - 1);
+ if (isDate(iso)) {
+ return iso;
}
- if (ISO_DATE_REGEXP.test(iso)) {
- return new Date(iso);
- }
- regexp.lastIndex = 0;
- parts = regexp.exec(iso);
- if (parts) {
- parts.shift();
- if (date) {
- map = {
- yyyy: date.getFullYear(),
- MM: date.getMonth() + 1,
- dd: date.getDate(),
- HH: date.getHours(),
- mm: date.getMinutes(),
- ss: date.getSeconds(),
- sss: date.getMilliseconds() / 1000
- };
- } else {
- map = { yyyy: 1970, MM: 1, dd: 1, HH: 0, mm: 0, ss: 0, sss: 0 };
+ if (isString(iso)) {
+ // When a date is JSON'ified to wraps itself inside of an extra
+ // set of double quotes. This makes the date parsing code unable
+ // to match the date string and parse it as a date.
+ if (iso.charAt(0) === '"' && iso.charAt(iso.length - 1) === '"') {
+ iso = iso.substring(1, iso.length - 1);
}
+ if (ISO_DATE_REGEXP.test(iso)) {
+ return new Date(iso);
+ }
+ regexp.lastIndex = 0;
+ parts = regexp.exec(iso);
- forEach(parts, function(part, index) {
- if (index < mapping.length) {
- map[mapping[index]] = +part;
+ if (parts) {
+ parts.shift();
+ if (date) {
+ map = {
+ yyyy: date.getFullYear(),
+ MM: date.getMonth() + 1,
+ dd: date.getDate(),
+ HH: date.getHours(),
+ mm: date.getMinutes(),
+ ss: date.getSeconds(),
+ sss: date.getMilliseconds() / 1000
+ };
+ } else {
+ map = { yyyy: 1970, MM: 1, dd: 1, HH: 0, mm: 0, ss: 0, sss: 0 };
}
- });
- return new Date(map.yyyy, map.MM - 1, map.dd, map.HH, map.mm, map.ss || 0, map.sss * 1000 || 0);
+
+ forEach(parts, function (part, index) {
+ if (index < mapping.length) {
+ map[mapping[index]] = +part;
+ }
+ });
+ return new Date(map.yyyy, map.MM - 1, map.dd, map.HH, map.mm, map.ss || 0, map.sss * 1000 || 0);
+ }
}
- }
- return NaN;
- };
-}
+ return NaN;
+ };
+ }
-function createDateInputType(type, regexp, parseDate, format) {
- return function dynamicDateInputType(scope, element, attr, ctrl, $sniffer, $browser, $filter) {
- badInputChecker(scope, element, attr, ctrl);
- baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
- var timezone = ctrl && ctrl.$options.getOption('timezone');
- var previousDate;
+ function createDateInputType(type, regexp, parseDate, format) {
+ return function dynamicDateInputType(scope, element, attr, ctrl, $sniffer, $browser, $filter) {
+ badInputChecker(scope, element, attr, ctrl);
+ baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
+ var timezone = ctrl && ctrl.$options.getOption('timezone');
+ var previousDate;
+
+ ctrl.$$parserName = type;
+ ctrl.$parsers.push(function (value) {
+ if (ctrl.$isEmpty(value)) return null;
+ if (regexp.test(value)) {
+ // Note: We cannot read ctrl.$modelValue, as there might be a different
+ // parser/formatter in the processing chain so that the model
+ // contains some different data format!
+ var parsedDate = parseDate(value, previousDate);
+ if (timezone) {
+ parsedDate = convertTimezoneToLocal(parsedDate, timezone);
+ }
+ return parsedDate;
+ }
+ return undefined;
+ });
- ctrl.$$parserName = type;
- ctrl.$parsers.push(function(value) {
- if (ctrl.$isEmpty(value)) return null;
- if (regexp.test(value)) {
- // Note: We cannot read ctrl.$modelValue, as there might be a different
- // parser/formatter in the processing chain so that the model
- // contains some different data format!
- var parsedDate = parseDate(value, previousDate);
- if (timezone) {
- parsedDate = convertTimezoneToLocal(parsedDate, timezone);
+ ctrl.$formatters.push(function (value) {
+ if (value && !isDate(value)) {
+ throw ngModelMinErr('datefmt', 'Expected `{0}` to be a date', value);
}
- return parsedDate;
+ if (isValidDate(value)) {
+ previousDate = value;
+ if (previousDate && timezone) {
+ previousDate = convertTimezoneToLocal(previousDate, timezone, true);
+ }
+ return $filter('date')(value, format, timezone);
+ } else {
+ previousDate = null;
+ return '';
+ }
+ });
+
+ if (isDefined(attr.min) || attr.ngMin) {
+ var minVal;
+ ctrl.$validators.min = function (value) {
+ return !isValidDate(value) || isUndefined(minVal) || parseDate(value) >= minVal;
+ };
+ attr.$observe('min', function (val) {
+ minVal = parseObservedDateValue(val);
+ ctrl.$validate();
+ });
}
- return undefined;
- });
- ctrl.$formatters.push(function(value) {
- if (value && !isDate(value)) {
- throw ngModelMinErr('datefmt', 'Expected `{0}` to be a date', value);
+ if (isDefined(attr.max) || attr.ngMax) {
+ var maxVal;
+ ctrl.$validators.max = function (value) {
+ return !isValidDate(value) || isUndefined(maxVal) || parseDate(value) <= maxVal;
+ };
+ attr.$observe('max', function (val) {
+ maxVal = parseObservedDateValue(val);
+ ctrl.$validate();
+ });
}
- if (isValidDate(value)) {
- previousDate = value;
- if (previousDate && timezone) {
- previousDate = convertTimezoneToLocal(previousDate, timezone, true);
- }
- return $filter('date')(value, format, timezone);
- } else {
- previousDate = null;
- return '';
+
+ function isValidDate(value) {
+ // Invalid Date: getTime() returns NaN
+ return value && !(value.getTime && value.getTime() !== value.getTime());
}
- });
- if (isDefined(attr.min) || attr.ngMin) {
- var minVal;
- ctrl.$validators.min = function(value) {
- return !isValidDate(value) || isUndefined(minVal) || parseDate(value) >= minVal;
- };
- attr.$observe('min', function(val) {
- minVal = parseObservedDateValue(val);
- ctrl.$validate();
- });
- }
+ function parseObservedDateValue(val) {
+ return isDefined(val) && !isDate(val) ? parseDate(val) || undefined : val;
+ }
+ };
+ }
- if (isDefined(attr.max) || attr.ngMax) {
- var maxVal;
- ctrl.$validators.max = function(value) {
- return !isValidDate(value) || isUndefined(maxVal) || parseDate(value) <= maxVal;
- };
- attr.$observe('max', function(val) {
- maxVal = parseObservedDateValue(val);
- ctrl.$validate();
+ function badInputChecker(scope, element, attr, ctrl) {
+ var node = element[0];
+ var nativeValidation = ctrl.$$hasNativeValidators = isObject(node.validity);
+ if (nativeValidation) {
+ ctrl.$parsers.push(function (value) {
+ var validity = element.prop(VALIDITY_STATE_PROPERTY) || {};
+ return validity.badInput || validity.typeMismatch ? undefined : value;
});
}
+ }
- function isValidDate(value) {
- // Invalid Date: getTime() returns NaN
- return value && !(value.getTime && value.getTime() !== value.getTime());
- }
-
- function parseObservedDateValue(val) {
- return isDefined(val) && !isDate(val) ? parseDate(val) || undefined : val;
- }
- };
-}
+ function numberFormatterParser(ctrl) {
+ ctrl.$$parserName = 'number';
+ ctrl.$parsers.push(function (value) {
+ if (ctrl.$isEmpty(value)) return null;
+ if (NUMBER_REGEXP.test(value)) return parseFloat(value);
+ return undefined;
+ });
-function badInputChecker(scope, element, attr, ctrl) {
- var node = element[0];
- var nativeValidation = ctrl.$$hasNativeValidators = isObject(node.validity);
- if (nativeValidation) {
- ctrl.$parsers.push(function(value) {
- var validity = element.prop(VALIDITY_STATE_PROPERTY) || {};
- return validity.badInput || validity.typeMismatch ? undefined : value;
+ ctrl.$formatters.push(function (value) {
+ if (!ctrl.$isEmpty(value)) {
+ if (!isNumber(value)) {
+ throw ngModelMinErr('numfmt', 'Expected `{0}` to be a number', value);
+ }
+ value = value.toString();
+ }
+ return value;
});
}
-}
-
-function numberFormatterParser(ctrl) {
- ctrl.$$parserName = 'number';
- ctrl.$parsers.push(function(value) {
- if (ctrl.$isEmpty(value)) return null;
- if (NUMBER_REGEXP.test(value)) return parseFloat(value);
- return undefined;
- });
- ctrl.$formatters.push(function(value) {
- if (!ctrl.$isEmpty(value)) {
- if (!isNumber(value)) {
- throw ngModelMinErr('numfmt', 'Expected `{0}` to be a number', value);
- }
- value = value.toString();
+ function parseNumberAttrVal(val) {
+ if (isDefined(val) && !isNumber(val)) {
+ val = parseFloat(val);
}
- return value;
- });
-}
-
-function parseNumberAttrVal(val) {
- if (isDefined(val) && !isNumber(val)) {
- val = parseFloat(val);
+ return !isNumberNaN(val) ? val : undefined;
}
- return !isNumberNaN(val) ? val : undefined;
-}
-function isNumberInteger(num) {
- // See http://stackoverflow.com/questions/14636536/how-to-check-if-a-variable-is-an-integer-in-javascript#14794066
- // (minus the assumption that `num` is a number)
+ function isNumberInteger(num) {
+ // See http://stackoverflow.com/questions/14636536/how-to-check-if-a-variable-is-an-integer-in-javascript#14794066
+ // (minus the assumption that `num` is a number)
- // eslint-disable-next-line no-bitwise
- return (num | 0) === num;
-}
+ // eslint-disable-next-line no-bitwise
+ return (num | 0) === num;
+ }
-function countDecimals(num) {
- var numString = num.toString();
- var decimalSymbolIndex = numString.indexOf('.');
+ function countDecimals(num) {
+ var numString = num.toString();
+ var decimalSymbolIndex = numString.indexOf('.');
- if (decimalSymbolIndex === -1) {
- if (-1 < num && num < 1) {
- // It may be in the exponential notation format (`1e-X`)
- var match = /e-(\d+)$/.exec(numString);
+ if (decimalSymbolIndex === -1) {
+ if (-1 < num && num < 1) {
+ // It may be in the exponential notation format (`1e-X`)
+ var match = /e-(\d+)$/.exec(numString);
- if (match) {
- return Number(match[1]);
+ if (match) {
+ return Number(match[1]);
+ }
}
+
+ return 0;
}
- return 0;
+ return numString.length - decimalSymbolIndex - 1;
}
- return numString.length - decimalSymbolIndex - 1;
-}
+ function isValidForStep(viewValue, stepBase, step) {
+ // At this point `stepBase` and `step` are expected to be non-NaN values
+ // and `viewValue` is expected to be a valid stringified number.
+ var value = Number(viewValue);
-function isValidForStep(viewValue, stepBase, step) {
- // At this point `stepBase` and `step` are expected to be non-NaN values
- // and `viewValue` is expected to be a valid stringified number.
- var value = Number(viewValue);
+ var isNonIntegerValue = !isNumberInteger(value);
+ var isNonIntegerStepBase = !isNumberInteger(stepBase);
+ var isNonIntegerStep = !isNumberInteger(step);
- var isNonIntegerValue = !isNumberInteger(value);
- var isNonIntegerStepBase = !isNumberInteger(stepBase);
- var isNonIntegerStep = !isNumberInteger(step);
+ // Due to limitations in Floating Point Arithmetic (e.g. `0.3 - 0.2 !== 0.1` or
+ // `0.5 % 0.1 !== 0`), we need to convert all numbers to integers.
+ if (isNonIntegerValue || isNonIntegerStepBase || isNonIntegerStep) {
+ var valueDecimals = isNonIntegerValue ? countDecimals(value) : 0;
+ var stepBaseDecimals = isNonIntegerStepBase ? countDecimals(stepBase) : 0;
+ var stepDecimals = isNonIntegerStep ? countDecimals(step) : 0;
- // Due to limitations in Floating Point Arithmetic (e.g. `0.3 - 0.2 !== 0.1` or
- // `0.5 % 0.1 !== 0`), we need to convert all numbers to integers.
- if (isNonIntegerValue || isNonIntegerStepBase || isNonIntegerStep) {
- var valueDecimals = isNonIntegerValue ? countDecimals(value) : 0;
- var stepBaseDecimals = isNonIntegerStepBase ? countDecimals(stepBase) : 0;
- var stepDecimals = isNonIntegerStep ? countDecimals(step) : 0;
+ var decimalCount = Math.max(valueDecimals, stepBaseDecimals, stepDecimals);
+ var multiplier = Math.pow(10, decimalCount);
- var decimalCount = Math.max(valueDecimals, stepBaseDecimals, stepDecimals);
- var multiplier = Math.pow(10, decimalCount);
+ value = value * multiplier;
+ stepBase = stepBase * multiplier;
+ step = step * multiplier;
- value = value * multiplier;
- stepBase = stepBase * multiplier;
- step = step * multiplier;
+ if (isNonIntegerValue) value = Math.round(value);
+ if (isNonIntegerStepBase) stepBase = Math.round(stepBase);
+ if (isNonIntegerStep) step = Math.round(step);
+ }
- if (isNonIntegerValue) value = Math.round(value);
- if (isNonIntegerStepBase) stepBase = Math.round(stepBase);
- if (isNonIntegerStep) step = Math.round(step);
+ return (value - stepBase) % step === 0;
}
- return (value - stepBase) % step === 0;
-}
-
-function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
- badInputChecker(scope, element, attr, ctrl);
- numberFormatterParser(ctrl);
- baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
+ function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
+ badInputChecker(scope, element, attr, ctrl);
+ numberFormatterParser(ctrl);
+ baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
- var minVal;
- var maxVal;
+ var minVal;
+ var maxVal;
- if (isDefined(attr.min) || attr.ngMin) {
- ctrl.$validators.min = function(value) {
- return ctrl.$isEmpty(value) || isUndefined(minVal) || value >= minVal;
- };
+ if (isDefined(attr.min) || attr.ngMin) {
+ ctrl.$validators.min = function (value) {
+ return ctrl.$isEmpty(value) || isUndefined(minVal) || value >= minVal;
+ };
- attr.$observe('min', function(val) {
- minVal = parseNumberAttrVal(val);
- // TODO(matsko): implement validateLater to reduce number of validations
- ctrl.$validate();
- });
- }
+ attr.$observe('min', function (val) {
+ minVal = parseNumberAttrVal(val);
+ // TODO(matsko): implement validateLater to reduce number of validations
+ ctrl.$validate();
+ });
+ }
- if (isDefined(attr.max) || attr.ngMax) {
- ctrl.$validators.max = function(value) {
- return ctrl.$isEmpty(value) || isUndefined(maxVal) || value <= maxVal;
- };
+ if (isDefined(attr.max) || attr.ngMax) {
+ ctrl.$validators.max = function (value) {
+ return ctrl.$isEmpty(value) || isUndefined(maxVal) || value <= maxVal;
+ };
- attr.$observe('max', function(val) {
- maxVal = parseNumberAttrVal(val);
- // TODO(matsko): implement validateLater to reduce number of validations
- ctrl.$validate();
- });
- }
+ attr.$observe('max', function (val) {
+ maxVal = parseNumberAttrVal(val);
+ // TODO(matsko): implement validateLater to reduce number of validations
+ ctrl.$validate();
+ });
+ }
- if (isDefined(attr.step) || attr.ngStep) {
- var stepVal;
- ctrl.$validators.step = function(modelValue, viewValue) {
- return ctrl.$isEmpty(viewValue) || isUndefined(stepVal) ||
- isValidForStep(viewValue, minVal || 0, stepVal);
- };
+ if (isDefined(attr.step) || attr.ngStep) {
+ var stepVal;
+ ctrl.$validators.step = function (modelValue, viewValue) {
+ return ctrl.$isEmpty(viewValue) || isUndefined(stepVal) || isValidForStep(viewValue, minVal || 0, stepVal);
+ };
- attr.$observe('step', function(val) {
- stepVal = parseNumberAttrVal(val);
- // TODO(matsko): implement validateLater to reduce number of validations
- ctrl.$validate();
- });
+ attr.$observe('step', function (val) {
+ stepVal = parseNumberAttrVal(val);
+ // TODO(matsko): implement validateLater to reduce number of validations
+ ctrl.$validate();
+ });
+ }
}
-}
-function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
- badInputChecker(scope, element, attr, ctrl);
- numberFormatterParser(ctrl);
- baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
+ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
+ badInputChecker(scope, element, attr, ctrl);
+ numberFormatterParser(ctrl);
+ baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
- var supportsRange = ctrl.$$hasNativeValidators && element[0].type === 'range',
- minVal = supportsRange ? 0 : undefined,
- maxVal = supportsRange ? 100 : undefined,
- stepVal = supportsRange ? 1 : undefined,
- validity = element[0].validity,
- hasMinAttr = isDefined(attr.min),
- hasMaxAttr = isDefined(attr.max),
- hasStepAttr = isDefined(attr.step);
+ var supportsRange = ctrl.$$hasNativeValidators && element[0].type === 'range',
+ minVal = supportsRange ? 0 : undefined,
+ maxVal = supportsRange ? 100 : undefined,
+ stepVal = supportsRange ? 1 : undefined,
+ validity = element[0].validity,
+ hasMinAttr = isDefined(attr.min),
+ hasMaxAttr = isDefined(attr.max),
+ hasStepAttr = isDefined(attr.step);
- var originalRender = ctrl.$render;
+ var originalRender = ctrl.$render;
- ctrl.$render = supportsRange && isDefined(validity.rangeUnderflow) && isDefined(validity.rangeOverflow) ?
+ ctrl.$render = supportsRange && isDefined(validity.rangeUnderflow) && isDefined(validity.rangeOverflow) ?
//Browsers that implement range will set these values automatically, but reading the adjusted values after
//$render would cause the min / max validators to be applied with the wrong value
function rangeRender() {
originalRender();
ctrl.$setViewValue(element.val());
- } :
- originalRender;
+ } : originalRender;
- if (hasMinAttr) {
- ctrl.$validators.min = supportsRange ?
+ if (hasMinAttr) {
+ ctrl.$validators.min = supportsRange ?
// Since all browsers set the input to a valid value, we don't need to check validity
- function noopMinValidator() { return true; } :
+ function noopMinValidator() {
+ return true;
+ } :
// non-support browsers validate the min val
function minValidator(modelValue, viewValue) {
return ctrl.$isEmpty(viewValue) || isUndefined(minVal) || viewValue >= minVal;
};
- setInitialValueAndObserver('min', minChange);
- }
+ setInitialValueAndObserver('min', minChange);
+ }
- if (hasMaxAttr) {
- ctrl.$validators.max = supportsRange ?
+ if (hasMaxAttr) {
+ ctrl.$validators.max = supportsRange ?
// Since all browsers set the input to a valid value, we don't need to check validity
- function noopMaxValidator() { return true; } :
+ function noopMaxValidator() {
+ return true;
+ } :
// non-support browsers validate the max val
function maxValidator(modelValue, viewValue) {
return ctrl.$isEmpty(viewValue) || isUndefined(maxVal) || viewValue <= maxVal;
};
- setInitialValueAndObserver('max', maxChange);
- }
+ setInitialValueAndObserver('max', maxChange);
+ }
- if (hasStepAttr) {
- ctrl.$validators.step = supportsRange ?
- function nativeStepValidator() {
+ if (hasStepAttr) {
+ ctrl.$validators.step = supportsRange ? function nativeStepValidator() {
// Currently, only FF implements the spec on step change correctly (i.e. adjusting the
// input element value to a valid value). It's possible that other browsers set the stepMismatch
// validity error instead, so we can at least report an error in that case.
@@ -60523,1797 +59965,1784 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
} :
// ngStep doesn't set the setp attr, so the browser doesn't adjust the input value as setting step would
function stepValidator(modelValue, viewValue) {
- return ctrl.$isEmpty(viewValue) || isUndefined(stepVal) ||
- isValidForStep(viewValue, minVal || 0, stepVal);
+ return ctrl.$isEmpty(viewValue) || isUndefined(stepVal) || isValidForStep(viewValue, minVal || 0, stepVal);
};
- setInitialValueAndObserver('step', stepChange);
- }
-
- function setInitialValueAndObserver(htmlAttrName, changeFn) {
- // interpolated attributes set the attribute value only after a digest, but we need the
- // attribute value when the input is first rendered, so that the browser can adjust the
- // input value based on the min/max value
- element.attr(htmlAttrName, attr[htmlAttrName]);
- attr.$observe(htmlAttrName, changeFn);
- }
+ setInitialValueAndObserver('step', stepChange);
+ }
- function minChange(val) {
- minVal = parseNumberAttrVal(val);
- // ignore changes before model is initialized
- if (isNumberNaN(ctrl.$modelValue)) {
- return;
+ function setInitialValueAndObserver(htmlAttrName, changeFn) {
+ // interpolated attributes set the attribute value only after a digest, but we need the
+ // attribute value when the input is first rendered, so that the browser can adjust the
+ // input value based on the min/max value
+ element.attr(htmlAttrName, attr[htmlAttrName]);
+ attr.$observe(htmlAttrName, changeFn);
}
- if (supportsRange) {
- var elVal = element.val();
- // IE11 doesn't set the el val correctly if the minVal is greater than the element value
- if (minVal > elVal) {
- elVal = minVal;
- element.val(elVal);
+ function minChange(val) {
+ minVal = parseNumberAttrVal(val);
+ // ignore changes before model is initialized
+ if (isNumberNaN(ctrl.$modelValue)) {
+ return;
+ }
+
+ if (supportsRange) {
+ var elVal = element.val();
+ // IE11 doesn't set the el val correctly if the minVal is greater than the element value
+ if (minVal > elVal) {
+ elVal = minVal;
+ element.val(elVal);
+ }
+ ctrl.$setViewValue(elVal);
+ } else {
+ // TODO(matsko): implement validateLater to reduce number of validations
+ ctrl.$validate();
}
- ctrl.$setViewValue(elVal);
- } else {
- // TODO(matsko): implement validateLater to reduce number of validations
- ctrl.$validate();
}
- }
- function maxChange(val) {
- maxVal = parseNumberAttrVal(val);
- // ignore changes before model is initialized
- if (isNumberNaN(ctrl.$modelValue)) {
- return;
+ function maxChange(val) {
+ maxVal = parseNumberAttrVal(val);
+ // ignore changes before model is initialized
+ if (isNumberNaN(ctrl.$modelValue)) {
+ return;
+ }
+
+ if (supportsRange) {
+ var elVal = element.val();
+ // IE11 doesn't set the el val correctly if the maxVal is less than the element value
+ if (maxVal < elVal) {
+ element.val(maxVal);
+ // IE11 and Chrome don't set the value to the minVal when max < min
+ elVal = maxVal < minVal ? minVal : maxVal;
+ }
+ ctrl.$setViewValue(elVal);
+ } else {
+ // TODO(matsko): implement validateLater to reduce number of validations
+ ctrl.$validate();
+ }
}
- if (supportsRange) {
- var elVal = element.val();
- // IE11 doesn't set the el val correctly if the maxVal is less than the element value
- if (maxVal < elVal) {
- element.val(maxVal);
- // IE11 and Chrome don't set the value to the minVal when max < min
- elVal = maxVal < minVal ? minVal : maxVal;
+ function stepChange(val) {
+ stepVal = parseNumberAttrVal(val);
+ // ignore changes before model is initialized
+ if (isNumberNaN(ctrl.$modelValue)) {
+ return;
+ }
+
+ // Some browsers don't adjust the input value correctly, but set the stepMismatch error
+ if (supportsRange && ctrl.$viewValue !== element.val()) {
+ ctrl.$setViewValue(element.val());
+ } else {
+ // TODO(matsko): implement validateLater to reduce number of validations
+ ctrl.$validate();
}
- ctrl.$setViewValue(elVal);
- } else {
- // TODO(matsko): implement validateLater to reduce number of validations
- ctrl.$validate();
}
}
- function stepChange(val) {
- stepVal = parseNumberAttrVal(val);
- // ignore changes before model is initialized
- if (isNumberNaN(ctrl.$modelValue)) {
- return;
- }
+ function urlInputType(scope, element, attr, ctrl, $sniffer, $browser) {
+ // Note: no badInputChecker here by purpose as `url` is only a validation
+ // in browsers, i.e. we can always read out input.value even if it is not valid!
+ baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
+ stringBasedInputType(ctrl);
- // Some browsers don't adjust the input value correctly, but set the stepMismatch error
- if (supportsRange && ctrl.$viewValue !== element.val()) {
- ctrl.$setViewValue(element.val());
- } else {
- // TODO(matsko): implement validateLater to reduce number of validations
- ctrl.$validate();
- }
+ ctrl.$$parserName = 'url';
+ ctrl.$validators.url = function (modelValue, viewValue) {
+ var value = modelValue || viewValue;
+ return ctrl.$isEmpty(value) || URL_REGEXP.test(value);
+ };
}
-}
-function urlInputType(scope, element, attr, ctrl, $sniffer, $browser) {
- // Note: no badInputChecker here by purpose as `url` is only a validation
- // in browsers, i.e. we can always read out input.value even if it is not valid!
- baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
- stringBasedInputType(ctrl);
+ function emailInputType(scope, element, attr, ctrl, $sniffer, $browser) {
+ // Note: no badInputChecker here by purpose as `url` is only a validation
+ // in browsers, i.e. we can always read out input.value even if it is not valid!
+ baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
+ stringBasedInputType(ctrl);
- ctrl.$$parserName = 'url';
- ctrl.$validators.url = function(modelValue, viewValue) {
- var value = modelValue || viewValue;
- return ctrl.$isEmpty(value) || URL_REGEXP.test(value);
- };
-}
+ ctrl.$$parserName = 'email';
+ ctrl.$validators.email = function (modelValue, viewValue) {
+ var value = modelValue || viewValue;
+ return ctrl.$isEmpty(value) || EMAIL_REGEXP.test(value);
+ };
+ }
-function emailInputType(scope, element, attr, ctrl, $sniffer, $browser) {
- // Note: no badInputChecker here by purpose as `url` is only a validation
- // in browsers, i.e. we can always read out input.value even if it is not valid!
- baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
- stringBasedInputType(ctrl);
+ function radioInputType(scope, element, attr, ctrl) {
+ var doTrim = !attr.ngTrim || trim(attr.ngTrim) !== 'false';
+ // make the name unique, if not defined
+ if (isUndefined(attr.name)) {
+ element.attr('name', nextUid());
+ }
- ctrl.$$parserName = 'email';
- ctrl.$validators.email = function(modelValue, viewValue) {
- var value = modelValue || viewValue;
- return ctrl.$isEmpty(value) || EMAIL_REGEXP.test(value);
- };
-}
+ var listener = function listener(ev) {
+ var value;
+ if (element[0].checked) {
+ value = attr.value;
+ if (doTrim) {
+ value = trim(value);
+ }
+ ctrl.$setViewValue(value, ev && ev.type);
+ }
+ };
-function radioInputType(scope, element, attr, ctrl) {
- var doTrim = !attr.ngTrim || trim(attr.ngTrim) !== 'false';
- // make the name unique, if not defined
- if (isUndefined(attr.name)) {
- element.attr('name', nextUid());
- }
+ element.on('click', listener);
- var listener = function(ev) {
- var value;
- if (element[0].checked) {
- value = attr.value;
+ ctrl.$render = function () {
+ var value = attr.value;
if (doTrim) {
value = trim(value);
}
- ctrl.$setViewValue(value, ev && ev.type);
- }
- };
-
- element.on('click', listener);
-
- ctrl.$render = function() {
- var value = attr.value;
- if (doTrim) {
- value = trim(value);
- }
- element[0].checked = (value === ctrl.$viewValue);
- };
+ element[0].checked = value === ctrl.$viewValue;
+ };
- attr.$observe('value', ctrl.$render);
-}
+ attr.$observe('value', ctrl.$render);
+ }
-function parseConstantExpr($parse, context, name, expression, fallback) {
- var parseFn;
- if (isDefined(expression)) {
- parseFn = $parse(expression);
- if (!parseFn.constant) {
- throw ngModelMinErr('constexpr', 'Expected constant expression for `{0}`, but saw ' +
- '`{1}`.', name, expression);
+ function parseConstantExpr($parse, context, name, expression, fallback) {
+ var parseFn;
+ if (isDefined(expression)) {
+ parseFn = $parse(expression);
+ if (!parseFn.constant) {
+ throw ngModelMinErr('constexpr', 'Expected constant expression for `{0}`, but saw ' + '`{1}`.', name, expression);
+ }
+ return parseFn(context);
}
- return parseFn(context);
+ return fallback;
}
- return fallback;
-}
-
-function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filter, $parse) {
- var trueValue = parseConstantExpr($parse, scope, 'ngTrueValue', attr.ngTrueValue, true);
- var falseValue = parseConstantExpr($parse, scope, 'ngFalseValue', attr.ngFalseValue, false);
-
- var listener = function(ev) {
- ctrl.$setViewValue(element[0].checked, ev && ev.type);
- };
-
- element.on('click', listener);
-
- ctrl.$render = function() {
- element[0].checked = ctrl.$viewValue;
- };
-
- // Override the standard `$isEmpty` because the $viewValue of an empty checkbox is always set to `false`
- // This is because of the parser below, which compares the `$modelValue` with `trueValue` to convert
- // it to a boolean.
- ctrl.$isEmpty = function(value) {
- return value === false;
- };
-
- ctrl.$formatters.push(function(value) {
- return equals(value, trueValue);
- });
-
- ctrl.$parsers.push(function(value) {
- return value ? trueValue : falseValue;
- });
-}
-
-
-/**
- * @ngdoc directive
- * @name textarea
- * @restrict E
- *
- * @description
- * HTML textarea element control with angular data-binding. The data-binding and validation
- * properties of this element are exactly the same as those of the
- * {@link ng.directive:input input element}.
- *
- * @param {string} ngModel Assignable angular expression to data-bind to.
- * @param {string=} name Property name of the form under which the control is published.
- * @param {string=} required Sets `required` validation error key if the value is not entered.
- * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to
- * the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of
- * `required` when you want to data-bind to the `required` attribute.
- * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than
- * minlength.
- * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
- * maxlength. Setting the attribute to a negative or non-numeric value, allows view values of any
- * length.
- * @param {string=} ngPattern Sets `pattern` validation error key if the ngModel {@link ngModel.NgModelController#$viewValue $viewValue}
- * does not match a RegExp found by evaluating the Angular expression given in the attribute value.
- * If the expression evaluates to a RegExp object, then this is used directly.
- * If the expression evaluates to a string, then it will be converted to a RegExp
- * after wrapping it in `^` and `$` characters. For instance, `"abc"` will be converted to
- * `new RegExp('^abc$')`.
- * **Note:** Avoid using the `g` flag on the RegExp, as it will cause each successive search to
- * start at the index of the last search's match, thus not taking the whole input value into
- * account.
- * @param {string=} ngChange Angular expression to be executed when input changes due to user
- * interaction with the input element.
- * @param {boolean=} [ngTrim=true] If set to false Angular will not automatically trim the input.
- *
- * @knownIssue
- *
- * When specifying the `placeholder` attribute of `
- * {{ list | json }}
- *
- *
- * it("should split the text by newlines", function() {
- * var listInput = element(by.model('list'));
- * var output = element(by.binding('list | json'));
- * listInput.sendKeys('abc\ndef\nghi');
- * expect(output.getText()).toContain('[\n "abc",\n "def",\n "ghi"\n]');
- * });
- *
- *
- *
- */
-var ngListDirective = function() {
- return {
- restrict: 'A',
- priority: 100,
- require: 'ngModel',
- link: function(scope, element, attr, ctrl) {
- var ngList = attr.ngList || ', ';
- var trimValues = attr.ngTrim !== 'false';
- var separator = trimValues ? trim(ngList) : ngList;
-
- var parse = function(viewValue) {
- // If the viewValue is invalid (say required but empty) it will be `undefined`
- if (isUndefined(viewValue)) return;
-
- var list = [];
-
- if (viewValue) {
- forEach(viewValue.split(separator), function(value) {
- if (value) list.push(trimValues ? trim(value) : value);
- });
- }
-
- return list;
- };
-
- ctrl.$parsers.push(parse);
- ctrl.$formatters.push(function(value) {
- if (isArray(value)) {
- return value.join(ngList);
+
+
+ it('should alias index positions', function() {
+ var elements = element.all(by.css('.example-init'));
+ expect(elements.get(0).getText()).toBe('list[ 0 ][ 0 ] = a;');
+ expect(elements.get(1).getText()).toBe('list[ 0 ][ 1 ] = b;');
+ expect(elements.get(2).getText()).toBe('list[ 1 ][ 0 ] = c;');
+ expect(elements.get(3).getText()).toBe('list[ 1 ][ 1 ] = d;');
+ });
+
+
+ */
+ var ngInitDirective = ngDirective({
+ priority: 450,
+ compile: function compile() {
+ return {
+ pre: function pre(scope, element, attrs) {
+ scope.$eval(attrs.ngInit);
}
-
- return undefined;
- });
-
- // Override the standard $isEmpty because an empty array means the input is empty.
- ctrl.$isEmpty = function(value) {
- return !value || !value.length;
};
}
- };
-};
-
-/* global VALID_CLASS: true,
- INVALID_CLASS: true,
- PRISTINE_CLASS: true,
- DIRTY_CLASS: true,
- UNTOUCHED_CLASS: true,
- TOUCHED_CLASS: true,
- PENDING_CLASS: true,
- addSetValidityMethod: true,
- setupValidity: true,
- defaultModelOptions: false
-*/
+ });
+ /**
+ * @ngdoc directive
+ * @name ngList
+ * @restrict A
+ * @priority 100
+ *
+ * @param {string=} ngList optional delimiter that should be used to split the value.
+ *
+ * @description
+ * Text input that converts between a delimited string and an array of strings. The default
+ * delimiter is a comma followed by a space - equivalent to `ng-list=", "`. You can specify a custom
+ * delimiter as the value of the `ngList` attribute - for example, `ng-list=" | "`.
+ *
+ * The behaviour of the directive is affected by the use of the `ngTrim` attribute.
+ * * If `ngTrim` is set to `"false"` then whitespace around both the separator and each
+ * list item is respected. This implies that the user of the directive is responsible for
+ * dealing with whitespace but also allows you to use whitespace as a delimiter, such as a
+ * tab or newline character.
+ * * Otherwise whitespace around the delimiter is ignored when splitting (although it is respected
+ * when joining the list items back together) and whitespace around each list item is stripped
+ * before it is added to the model.
+ *
+ * @example
+ * ### Validation
+ *
+ *
+ *
+ * angular.module('listExample', [])
+ * .controller('ExampleController', ['$scope', function($scope) {
+ * $scope.names = ['morpheus', 'neo', 'trinity'];
+ * }]);
+ *
+ *
+ *
+ *
+ *
+ * var listInput = element(by.model('names'));
+ * var names = element(by.exactBinding('names'));
+ * var valid = element(by.binding('myForm.namesInput.$valid'));
+ * var error = element(by.css('span.error'));
+ *
+ * it('should initialize to model', function() {
+ * expect(names.getText()).toContain('["morpheus","neo","trinity"]');
+ * expect(valid.getText()).toContain('true');
+ * expect(error.getCssValue('display')).toBe('none');
+ * });
+ *
+ * it('should be invalid if empty', function() {
+ * listInput.clear();
+ * listInput.sendKeys('');
+ *
+ * expect(names.getText()).toContain('');
+ * expect(valid.getText()).toContain('false');
+ * expect(error.getCssValue('display')).not.toBe('none');
+ * });
+ *
+ *
+ *
+ * @example
+ * ### Splitting on newline
+ *
+ *
+ *
+ *
+ * {{ list | json }}
+ *
+ *
+ * it("should split the text by newlines", function() {
+ * var listInput = element(by.model('list'));
+ * var output = element(by.binding('list | json'));
+ * listInput.sendKeys('abc\ndef\nghi');
+ * expect(output.getText()).toContain('[\n "abc",\n "def",\n "ghi"\n]');
+ * });
+ *
+ *
+ *
+ */
+ var ngListDirective = function ngListDirective() {
+ return {
+ restrict: 'A',
+ priority: 100,
+ require: 'ngModel',
+ link: function link(scope, element, attr, ctrl) {
+ var ngList = attr.ngList || ', ';
+ var trimValues = attr.ngTrim !== 'false';
+ var separator = trimValues ? trim(ngList) : ngList;
-var VALID_CLASS = 'ng-valid',
- INVALID_CLASS = 'ng-invalid',
- PRISTINE_CLASS = 'ng-pristine',
- DIRTY_CLASS = 'ng-dirty',
- UNTOUCHED_CLASS = 'ng-untouched',
- TOUCHED_CLASS = 'ng-touched',
- EMPTY_CLASS = 'ng-empty',
- NOT_EMPTY_CLASS = 'ng-not-empty';
+ var parse = function parse(viewValue) {
+ // If the viewValue is invalid (say required but empty) it will be `undefined`
+ if (isUndefined(viewValue)) return;
-var ngModelMinErr = minErr('ngModel');
+ var list = [];
-/**
- * @ngdoc type
- * @name ngModel.NgModelController
- * @property {*} $viewValue The actual value from the control's view. For `input` elements, this is a
- * String. See {@link ngModel.NgModelController#$setViewValue} for information about when the $viewValue
- * is set.
- *
- * @property {*} $modelValue The value in the model that the control is bound to.
- *
- * @property {Array.} $parsers Array of functions to execute, as a pipeline, whenever
- * the control updates the ngModelController with a new {@link ngModel.NgModelController#$viewValue
- `$viewValue`} from the DOM, usually via user input.
- See {@link ngModel.NgModelController#$setViewValue `$setViewValue()`} for a detailed lifecycle explanation.
- Note that the `$parsers` are not called when the bound ngModel expression changes programmatically.
-
- The functions are called in array order, each passing
- its return value through to the next. The last return value is forwarded to the
- {@link ngModel.NgModelController#$validators `$validators`} collection.
-
- Parsers are used to sanitize / convert the {@link ngModel.NgModelController#$viewValue
- `$viewValue`}.
-
- Returning `undefined` from a parser means a parse error occurred. In that case,
- no {@link ngModel.NgModelController#$validators `$validators`} will run and the `ngModel`
- will be set to `undefined` unless {@link ngModelOptions `ngModelOptions.allowInvalid`}
- is set to `true`. The parse error is stored in `ngModel.$error.parse`.
-
- This simple example shows a parser that would convert text input value to lowercase:
- * ```js
- * function parse(value) {
- * if (value) {
- * return value.toLowerCase();
- * }
- * }
- * ngModelController.$parsers.push(parse);
- * ```
+ if (viewValue) {
+ forEach(viewValue.split(separator), function (value) {
+ if (value) list.push(trimValues ? trim(value) : value);
+ });
+ }
- *
- * @property {Array.} $formatters Array of functions to execute, as a pipeline, whenever
- the bound ngModel expression changes programmatically. The `$formatters` are not called when the
- value of the control is changed by user interaction.
-
- Formatters are used to format / convert the {@link ngModel.NgModelController#$modelValue
- `$modelValue`} for display in the control.
-
- The functions are called in reverse array order, each passing the value through to the
- next. The last return value is used as the actual DOM value.
-
- This simple example shows a formatter that would convert the model value to uppercase:
-
- * ```js
- * function format(value) {
- * if (value) {
- * return value.toUpperCase();
- * }
- * }
- * ngModel.$formatters.push(format);
- * ```
- *
- * @property {Object.} $validators A collection of validators that are applied
- * whenever the model value changes. The key value within the object refers to the name of the
- * validator while the function refers to the validation operation. The validation operation is
- * provided with the model value as an argument and must return a true or false value depending
- * on the response of that validation.
- *
- * ```js
- * ngModel.$validators.validCharacters = function(modelValue, viewValue) {
- * var value = modelValue || viewValue;
- * return /[0-9]+/.test(value) &&
- * /[a-z]+/.test(value) &&
- * /[A-Z]+/.test(value) &&
- * /\W+/.test(value);
- * };
- * ```
- *
- * @property {Object.} $asyncValidators A collection of validations that are expected to
- * perform an asynchronous validation (e.g. a HTTP request). The validation function that is provided
- * is expected to return a promise when it is run during the model validation process. Once the promise
- * is delivered then the validation status will be set to true when fulfilled and false when rejected.
- * When the asynchronous validators are triggered, each of the validators will run in parallel and the model
- * value will only be updated once all validators have been fulfilled. As long as an asynchronous validator
- * is unfulfilled, its key will be added to the controllers `$pending` property. Also, all asynchronous validators
- * will only run once all synchronous validators have passed.
- *
- * Please note that if $http is used then it is important that the server returns a success HTTP response code
- * in order to fulfill the validation and a status level of `4xx` in order to reject the validation.
- *
- * ```js
- * ngModel.$asyncValidators.uniqueUsername = function(modelValue, viewValue) {
- * var value = modelValue || viewValue;
- *
- * // Lookup user by username
- * return $http.get('/api/users/' + value).
- * then(function resolved() {
- * //username exists, this means validation fails
- * return $q.reject('exists');
- * }, function rejected() {
- * //username does not exist, therefore this validation passes
- * return true;
- * });
- * };
- * ```
- *
- * @property {Array.} $viewChangeListeners Array of functions to execute whenever the
- * view value has changed. It is called with no arguments, and its return value is ignored.
- * This can be used in place of additional $watches against the model value.
- *
- * @property {Object} $error An object hash with all failing validator ids as keys.
- * @property {Object} $pending An object hash with all pending validator ids as keys.
- *
- * @property {boolean} $untouched True if control has not lost focus yet.
- * @property {boolean} $touched True if control has lost focus.
- * @property {boolean} $pristine True if user has not interacted with the control yet.
- * @property {boolean} $dirty True if user has already interacted with the control.
- * @property {boolean} $valid True if there is no error.
- * @property {boolean} $invalid True if at least one error on the control.
- * @property {string} $name The name attribute of the control.
- *
- * @description
- *
- * `NgModelController` provides API for the {@link ngModel `ngModel`} directive.
- * The controller contains services for data-binding, validation, CSS updates, and value formatting
- * and parsing. It purposefully does not contain any logic which deals with DOM rendering or
- * listening to DOM events.
- * Such DOM related logic should be provided by other directives which make use of
- * `NgModelController` for data-binding to control elements.
- * Angular provides this DOM logic for most {@link input `input`} elements.
- * At the end of this page you can find a {@link ngModel.NgModelController#custom-control-example
- * custom control example} that uses `ngModelController` to bind to `contenteditable` elements.
- *
- * @example
- * ### Custom Control Example
- * This example shows how to use `NgModelController` with a custom control to achieve
- * data-binding. Notice how different directives (`contenteditable`, `ng-model`, and `required`)
- * collaborate together to achieve the desired result.
- *
- * `contenteditable` is an HTML5 attribute, which tells the browser to let the element
- * contents be edited in place by the user.
- *
- * We are using the {@link ng.service:$sce $sce} service here and include the {@link ngSanitize $sanitize}
- * module to automatically remove "bad" content like inline event listener (e.g. ``).
- * However, as we are using `$sce` the model can still decide to provide unsafe content if it marks
- * that content using the `$sce` service.
- *
- *
-
- [contenteditable] {
- border: 1px solid black;
- background-color: white;
- min-height: 20px;
- }
+ return list;
+ };
- .ng-invalid {
- border: 1px solid red;
- }
+ ctrl.$parsers.push(parse);
+ ctrl.$formatters.push(function (value) {
+ if (isArray(value)) {
+ return value.join(ngList);
+ }
-
-
- angular.module('customControl', ['ngSanitize']).
- directive('contenteditable', ['$sce', function($sce) {
- return {
- restrict: 'A', // only activate on element attribute
- require: '?ngModel', // get a hold of NgModelController
- link: function(scope, element, attrs, ngModel) {
- if (!ngModel) return; // do nothing if no ng-model
-
- // Specify how UI should be updated
- ngModel.$render = function() {
- element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
- };
+ return undefined;
+ });
- // Listen for change events to enable binding
- element.on('blur keyup change', function() {
- scope.$evalAsync(read);
- });
- read(); // initialize
-
- // Write data to the model
- function read() {
- var html = element.html();
- // When we clear the content editable the browser leaves a
behind
- // If strip-br attribute is provided then we strip this out
- if (attrs.stripBr && html === '
') {
- html = '';
- }
- ngModel.$setViewValue(html);
- }
- }
- };
- }]);
-
-
-
-
-
- it('should data-bind and become invalid', function() {
- if (browser.params.browser === 'safari' || browser.params.browser === 'firefox') {
- // SafariDriver can't handle contenteditable
- // and Firefox driver can't clear contenteditables very well
- return;
+ // Override the standard $isEmpty because an empty array means the input is empty.
+ ctrl.$isEmpty = function (value) {
+ return !value || !value.length;
+ };
}
- var contentEditable = element(by.css('[contenteditable]'));
- var content = 'Change me!';
+ };
+ };
- expect(contentEditable.getText()).toEqual(content);
+ /* global VALID_CLASS: true,
+ INVALID_CLASS: true,
+ PRISTINE_CLASS: true,
+ DIRTY_CLASS: true,
+ UNTOUCHED_CLASS: true,
+ TOUCHED_CLASS: true,
+ PENDING_CLASS: true,
+ addSetValidityMethod: true,
+ setupValidity: true,
+ defaultModelOptions: false
+ */
- contentEditable.clear();
- contentEditable.sendKeys(protractor.Key.BACK_SPACE);
- expect(contentEditable.getText()).toEqual('');
- expect(contentEditable.getAttribute('class')).toMatch(/ng-invalid-required/);
- });
-
- *
- *
- *
- */
-NgModelController.$inject = ['$scope', '$exceptionHandler', '$attrs', '$element', '$parse', '$animate', '$timeout', '$q', '$interpolate'];
-function NgModelController($scope, $exceptionHandler, $attr, $element, $parse, $animate, $timeout, $q, $interpolate) {
- this.$viewValue = Number.NaN;
- this.$modelValue = Number.NaN;
- this.$$rawModelValue = undefined; // stores the parsed modelValue / model set from scope regardless of validity.
- this.$validators = {};
- this.$asyncValidators = {};
- this.$parsers = [];
- this.$formatters = [];
- this.$viewChangeListeners = [];
- this.$untouched = true;
- this.$touched = false;
- this.$pristine = true;
- this.$dirty = false;
- this.$valid = true;
- this.$invalid = false;
- this.$error = {}; // keep invalid keys here
- this.$$success = {}; // keep valid keys here
- this.$pending = undefined; // keep pending keys here
- this.$name = $interpolate($attr.name || '', false)($scope);
- this.$$parentForm = nullFormCtrl;
- this.$options = defaultModelOptions;
- this.$$updateEvents = '';
- // Attach the correct context to the event handler function for updateOn
- this.$$updateEventHandler = this.$$updateEventHandler.bind(this);
-
- this.$$parsedNgModel = $parse($attr.ngModel);
- this.$$parsedNgModelAssign = this.$$parsedNgModel.assign;
- this.$$ngModelGet = this.$$parsedNgModel;
- this.$$ngModelSet = this.$$parsedNgModelAssign;
- this.$$pendingDebounce = null;
- this.$$parserValid = undefined;
-
- this.$$currentValidationRunId = 0;
-
- // https://github.com/angular/angular.js/issues/15833
- // Prevent `$$scope` from being iterated over by `copy` when NgModelController is deep watched
- Object.defineProperty(this, '$$scope', {value: $scope});
- this.$$attr = $attr;
- this.$$element = $element;
- this.$$animate = $animate;
- this.$$timeout = $timeout;
- this.$$parse = $parse;
- this.$$q = $q;
- this.$$exceptionHandler = $exceptionHandler;
-
- setupValidity(this);
- setupModelWatcher(this);
-}
-
-NgModelController.prototype = {
- $$initGetterSetters: function() {
- if (this.$options.getOption('getterSetter')) {
- var invokeModelGetter = this.$$parse(this.$$attr.ngModel + '()'),
- invokeModelSetter = this.$$parse(this.$$attr.ngModel + '($$$p)');
-
- this.$$ngModelGet = function($scope) {
- var modelValue = this.$$parsedNgModel($scope);
- if (isFunction(modelValue)) {
- modelValue = invokeModelGetter($scope);
- }
- return modelValue;
- };
- this.$$ngModelSet = function($scope, newValue) {
- if (isFunction(this.$$parsedNgModel($scope))) {
- invokeModelSetter($scope, {$$$p: newValue});
- } else {
- this.$$parsedNgModelAssign($scope, newValue);
- }
- };
- } else if (!this.$$parsedNgModel.assign) {
- throw ngModelMinErr('nonassign', 'Expression \'{0}\' is non-assignable. Element: {1}',
- this.$$attr.ngModel, startingTag(this.$$element));
- }
- },
+ var VALID_CLASS = 'ng-valid',
+ INVALID_CLASS = 'ng-invalid',
+ PRISTINE_CLASS = 'ng-pristine',
+ DIRTY_CLASS = 'ng-dirty',
+ UNTOUCHED_CLASS = 'ng-untouched',
+ TOUCHED_CLASS = 'ng-touched',
+ EMPTY_CLASS = 'ng-empty',
+ NOT_EMPTY_CLASS = 'ng-not-empty';
+ var ngModelMinErr = minErr('ngModel');
/**
- * @ngdoc method
- * @name ngModel.NgModelController#$render
+ * @ngdoc type
+ * @name ngModel.NgModelController
+ * @property {*} $viewValue The actual value from the control's view. For `input` elements, this is a
+ * String. See {@link ngModel.NgModelController#$setViewValue} for information about when the $viewValue
+ * is set.
+ *
+ * @property {*} $modelValue The value in the model that the control is bound to.
+ *
+ * @property {Array.} $parsers Array of functions to execute, as a pipeline, whenever
+ * the control updates the ngModelController with a new {@link ngModel.NgModelController#$viewValue
+ `$viewValue`} from the DOM, usually via user input.
+ See {@link ngModel.NgModelController#$setViewValue `$setViewValue()`} for a detailed lifecycle explanation.
+ Note that the `$parsers` are not called when the bound ngModel expression changes programmatically.
+
+ The functions are called in array order, each passing
+ its return value through to the next. The last return value is forwarded to the
+ {@link ngModel.NgModelController#$validators `$validators`} collection.
+
+ Parsers are used to sanitize / convert the {@link ngModel.NgModelController#$viewValue
+ `$viewValue`}.
+
+ Returning `undefined` from a parser means a parse error occurred. In that case,
+ no {@link ngModel.NgModelController#$validators `$validators`} will run and the `ngModel`
+ will be set to `undefined` unless {@link ngModelOptions `ngModelOptions.allowInvalid`}
+ is set to `true`. The parse error is stored in `ngModel.$error.parse`.
+
+ This simple example shows a parser that would convert text input value to lowercase:
+ * ```js
+ * function parse(value) {
+ * if (value) {
+ * return value.toLowerCase();
+ * }
+ * }
+ * ngModelController.$parsers.push(parse);
+ * ```
+
*
- * @description
- * Called when the view needs to be updated. It is expected that the user of the ng-model
- * directive will implement this method.
+ * @property {Array.} $formatters Array of functions to execute, as a pipeline, whenever
+ the bound ngModel expression changes programmatically. The `$formatters` are not called when the
+ value of the control is changed by user interaction.
+
+ Formatters are used to format / convert the {@link ngModel.NgModelController#$modelValue
+ `$modelValue`} for display in the control.
+
+ The functions are called in reverse array order, each passing the value through to the
+ next. The last return value is used as the actual DOM value.
+
+ This simple example shows a formatter that would convert the model value to uppercase:
+
+ * ```js
+ * function format(value) {
+ * if (value) {
+ * return value.toUpperCase();
+ * }
+ * }
+ * ngModel.$formatters.push(format);
+ * ```
*
- * The `$render()` method is invoked in the following situations:
+ * @property {Object.} $validators A collection of validators that are applied
+ * whenever the model value changes. The key value within the object refers to the name of the
+ * validator while the function refers to the validation operation. The validation operation is
+ * provided with the model value as an argument and must return a true or false value depending
+ * on the response of that validation.
*
- * * `$rollbackViewValue()` is called. If we are rolling back the view value to the last
- * committed value then `$render()` is called to update the input control.
- * * The value referenced by `ng-model` is changed programmatically and both the `$modelValue` and
- * the `$viewValue` are different from last time.
+ * ```js
+ * ngModel.$validators.validCharacters = function(modelValue, viewValue) {
+ * var value = modelValue || viewValue;
+ * return /[0-9]+/.test(value) &&
+ * /[a-z]+/.test(value) &&
+ * /[A-Z]+/.test(value) &&
+ * /\W+/.test(value);
+ * };
+ * ```
*
- * Since `ng-model` does not do a deep watch, `$render()` is only invoked if the values of
- * `$modelValue` and `$viewValue` are actually different from their previous values. If `$modelValue`
- * or `$viewValue` are objects (rather than a string or number) then `$render()` will not be
- * invoked if you only change a property on the objects.
- */
- $render: noop,
-
- /**
- * @ngdoc method
- * @name ngModel.NgModelController#$isEmpty
+ * @property {Object.} $asyncValidators A collection of validations that are expected to
+ * perform an asynchronous validation (e.g. a HTTP request). The validation function that is provided
+ * is expected to return a promise when it is run during the model validation process. Once the promise
+ * is delivered then the validation status will be set to true when fulfilled and false when rejected.
+ * When the asynchronous validators are triggered, each of the validators will run in parallel and the model
+ * value will only be updated once all validators have been fulfilled. As long as an asynchronous validator
+ * is unfulfilled, its key will be added to the controllers `$pending` property. Also, all asynchronous validators
+ * will only run once all synchronous validators have passed.
*
- * @description
- * This is called when we need to determine if the value of an input is empty.
+ * Please note that if $http is used then it is important that the server returns a success HTTP response code
+ * in order to fulfill the validation and a status level of `4xx` in order to reject the validation.
*
- * For instance, the required directive does this to work out if the input has data or not.
+ * ```js
+ * ngModel.$asyncValidators.uniqueUsername = function(modelValue, viewValue) {
+ * var value = modelValue || viewValue;
+ *
+ * // Lookup user by username
+ * return $http.get('/api/users/' + value).
+ * then(function resolved() {
+ * //username exists, this means validation fails
+ * return $q.reject('exists');
+ * }, function rejected() {
+ * //username does not exist, therefore this validation passes
+ * return true;
+ * });
+ * };
+ * ```
*
- * The default `$isEmpty` function checks whether the value is `undefined`, `''`, `null` or `NaN`.
+ * @property {Array.} $viewChangeListeners Array of functions to execute whenever the
+ * view value has changed. It is called with no arguments, and its return value is ignored.
+ * This can be used in place of additional $watches against the model value.
*
- * You can override this for input directives whose concept of being empty is different from the
- * default. The `checkboxInputType` directive does this because in its case a value of `false`
- * implies empty.
+ * @property {Object} $error An object hash with all failing validator ids as keys.
+ * @property {Object} $pending An object hash with all pending validator ids as keys.
*
- * @param {*} value The value of the input to check for emptiness.
- * @returns {boolean} True if `value` is "empty".
- */
- $isEmpty: function(value) {
- // eslint-disable-next-line no-self-compare
- return isUndefined(value) || value === '' || value === null || value !== value;
- },
-
- $$updateEmptyClasses: function(value) {
- if (this.$isEmpty(value)) {
- this.$$animate.removeClass(this.$$element, NOT_EMPTY_CLASS);
- this.$$animate.addClass(this.$$element, EMPTY_CLASS);
- } else {
- this.$$animate.removeClass(this.$$element, EMPTY_CLASS);
- this.$$animate.addClass(this.$$element, NOT_EMPTY_CLASS);
- }
- },
-
- /**
- * @ngdoc method
- * @name ngModel.NgModelController#$setPristine
+ * @property {boolean} $untouched True if control has not lost focus yet.
+ * @property {boolean} $touched True if control has lost focus.
+ * @property {boolean} $pristine True if user has not interacted with the control yet.
+ * @property {boolean} $dirty True if user has already interacted with the control.
+ * @property {boolean} $valid True if there is no error.
+ * @property {boolean} $invalid True if at least one error on the control.
+ * @property {string} $name The name attribute of the control.
*
* @description
- * Sets the control to its pristine state.
*
- * This method can be called to remove the `ng-dirty` class and set the control to its pristine
- * state (`ng-pristine` class). A model is considered to be pristine when the control
- * has not been changed from when first compiled.
+ * `NgModelController` provides API for the {@link ngModel `ngModel`} directive.
+ * The controller contains services for data-binding, validation, CSS updates, and value formatting
+ * and parsing. It purposefully does not contain any logic which deals with DOM rendering or
+ * listening to DOM events.
+ * Such DOM related logic should be provided by other directives which make use of
+ * `NgModelController` for data-binding to control elements.
+ * Angular provides this DOM logic for most {@link input `input`} elements.
+ * At the end of this page you can find a {@link ngModel.NgModelController#custom-control-example
+ * custom control example} that uses `ngModelController` to bind to `contenteditable` elements.
+ *
+ * @example
+ * ### Custom Control Example
+ * This example shows how to use `NgModelController` with a custom control to achieve
+ * data-binding. Notice how different directives (`contenteditable`, `ng-model`, and `required`)
+ * collaborate together to achieve the desired result.
+ *
+ * `contenteditable` is an HTML5 attribute, which tells the browser to let the element
+ * contents be edited in place by the user.
+ *
+ * We are using the {@link ng.service:$sce $sce} service here and include the {@link ngSanitize $sanitize}
+ * module to automatically remove "bad" content like inline event listener (e.g. ``).
+ * However, as we are using `$sce` the model can still decide to provide unsafe content if it marks
+ * that content using the `$sce` service.
+ *
+ *
+
+ [contenteditable] {
+ border: 1px solid black;
+ background-color: white;
+ min-height: 20px;
+ }
+
+ .ng-invalid {
+ border: 1px solid red;
+ }
+
+
+
+ angular.module('customControl', ['ngSanitize']).
+ directive('contenteditable', ['$sce', function($sce) {
+ return {
+ restrict: 'A', // only activate on element attribute
+ require: '?ngModel', // get a hold of NgModelController
+ link: function(scope, element, attrs, ngModel) {
+ if (!ngModel) return; // do nothing if no ng-model
+
+ // Specify how UI should be updated
+ ngModel.$render = function() {
+ element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
+ };
+
+ // Listen for change events to enable binding
+ element.on('blur keyup change', function() {
+ scope.$evalAsync(read);
+ });
+ read(); // initialize
+
+ // Write data to the model
+ function read() {
+ var html = element.html();
+ // When we clear the content editable the browser leaves a
behind
+ // If strip-br attribute is provided then we strip this out
+ if (attrs.stripBr && html === '
') {
+ html = '';
+ }
+ ngModel.$setViewValue(html);
+ }
+ }
+ };
+ }]);
+
+
+
+
+
+ it('should data-bind and become invalid', function() {
+ if (browser.params.browser === 'safari' || browser.params.browser === 'firefox') {
+ // SafariDriver can't handle contenteditable
+ // and Firefox driver can't clear contenteditables very well
+ return;
+ }
+ var contentEditable = element(by.css('[contenteditable]'));
+ var content = 'Change me!';
+
+ expect(contentEditable.getText()).toEqual(content);
+
+ contentEditable.clear();
+ contentEditable.sendKeys(protractor.Key.BACK_SPACE);
+ expect(contentEditable.getText()).toEqual('');
+ expect(contentEditable.getAttribute('class')).toMatch(/ng-invalid-required/);
+ });
+
+ *
+ *
+ *
*/
- $setPristine: function() {
- this.$dirty = false;
+ NgModelController.$inject = ['$scope', '$exceptionHandler', '$attrs', '$element', '$parse', '$animate', '$timeout', '$q', '$interpolate'];
+ function NgModelController($scope, $exceptionHandler, $attr, $element, $parse, $animate, $timeout, $q, $interpolate) {
+ this.$viewValue = Number.NaN;
+ this.$modelValue = Number.NaN;
+ this.$$rawModelValue = undefined; // stores the parsed modelValue / model set from scope regardless of validity.
+ this.$validators = {};
+ this.$asyncValidators = {};
+ this.$parsers = [];
+ this.$formatters = [];
+ this.$viewChangeListeners = [];
+ this.$untouched = true;
+ this.$touched = false;
this.$pristine = true;
- this.$$animate.removeClass(this.$$element, DIRTY_CLASS);
- this.$$animate.addClass(this.$$element, PRISTINE_CLASS);
- },
+ this.$dirty = false;
+ this.$valid = true;
+ this.$invalid = false;
+ this.$error = {}; // keep invalid keys here
+ this.$$success = {}; // keep valid keys here
+ this.$pending = undefined; // keep pending keys here
+ this.$name = $interpolate($attr.name || '', false)($scope);
+ this.$$parentForm = nullFormCtrl;
+ this.$options = defaultModelOptions;
+ this.$$updateEvents = '';
+ // Attach the correct context to the event handler function for updateOn
+ this.$$updateEventHandler = this.$$updateEventHandler.bind(this);
+
+ this.$$parsedNgModel = $parse($attr.ngModel);
+ this.$$parsedNgModelAssign = this.$$parsedNgModel.assign;
+ this.$$ngModelGet = this.$$parsedNgModel;
+ this.$$ngModelSet = this.$$parsedNgModelAssign;
+ this.$$pendingDebounce = null;
+ this.$$parserValid = undefined;
+
+ this.$$currentValidationRunId = 0;
+
+ // https://github.com/angular/angular.js/issues/15833
+ // Prevent `$$scope` from being iterated over by `copy` when NgModelController is deep watched
+ Object.defineProperty(this, '$$scope', { value: $scope });
+ this.$$attr = $attr;
+ this.$$element = $element;
+ this.$$animate = $animate;
+ this.$$timeout = $timeout;
+ this.$$parse = $parse;
+ this.$$q = $q;
+ this.$$exceptionHandler = $exceptionHandler;
+
+ setupValidity(this);
+ setupModelWatcher(this);
+ }
+
+ NgModelController.prototype = {
+ $$initGetterSetters: function $$initGetterSetters() {
+ if (this.$options.getOption('getterSetter')) {
+ var invokeModelGetter = this.$$parse(this.$$attr.ngModel + '()'),
+ invokeModelSetter = this.$$parse(this.$$attr.ngModel + '($$$p)');
+
+ this.$$ngModelGet = function ($scope) {
+ var modelValue = this.$$parsedNgModel($scope);
+ if (isFunction(modelValue)) {
+ modelValue = invokeModelGetter($scope);
+ }
+ return modelValue;
+ };
+ this.$$ngModelSet = function ($scope, newValue) {
+ if (isFunction(this.$$parsedNgModel($scope))) {
+ invokeModelSetter($scope, { $$$p: newValue });
+ } else {
+ this.$$parsedNgModelAssign($scope, newValue);
+ }
+ };
+ } else if (!this.$$parsedNgModel.assign) {
+ throw ngModelMinErr('nonassign', 'Expression \'{0}\' is non-assignable. Element: {1}', this.$$attr.ngModel, startingTag(this.$$element));
+ }
+ },
+
+ /**
+ * @ngdoc method
+ * @name ngModel.NgModelController#$render
+ *
+ * @description
+ * Called when the view needs to be updated. It is expected that the user of the ng-model
+ * directive will implement this method.
+ *
+ * The `$render()` method is invoked in the following situations:
+ *
+ * * `$rollbackViewValue()` is called. If we are rolling back the view value to the last
+ * committed value then `$render()` is called to update the input control.
+ * * The value referenced by `ng-model` is changed programmatically and both the `$modelValue` and
+ * the `$viewValue` are different from last time.
+ *
+ * Since `ng-model` does not do a deep watch, `$render()` is only invoked if the values of
+ * `$modelValue` and `$viewValue` are actually different from their previous values. If `$modelValue`
+ * or `$viewValue` are objects (rather than a string or number) then `$render()` will not be
+ * invoked if you only change a property on the objects.
+ */
+ $render: noop,
+
+ /**
+ * @ngdoc method
+ * @name ngModel.NgModelController#$isEmpty
+ *
+ * @description
+ * This is called when we need to determine if the value of an input is empty.
+ *
+ * For instance, the required directive does this to work out if the input has data or not.
+ *
+ * The default `$isEmpty` function checks whether the value is `undefined`, `''`, `null` or `NaN`.
+ *
+ * You can override this for input directives whose concept of being empty is different from the
+ * default. The `checkboxInputType` directive does this because in its case a value of `false`
+ * implies empty.
+ *
+ * @param {*} value The value of the input to check for emptiness.
+ * @returns {boolean} True if `value` is "empty".
+ */
+ $isEmpty: function $isEmpty(value) {
+ // eslint-disable-next-line no-self-compare
+ return isUndefined(value) || value === '' || value === null || value !== value;
+ },
+
+ $$updateEmptyClasses: function $$updateEmptyClasses(value) {
+ if (this.$isEmpty(value)) {
+ this.$$animate.removeClass(this.$$element, NOT_EMPTY_CLASS);
+ this.$$animate.addClass(this.$$element, EMPTY_CLASS);
+ } else {
+ this.$$animate.removeClass(this.$$element, EMPTY_CLASS);
+ this.$$animate.addClass(this.$$element, NOT_EMPTY_CLASS);
+ }
+ },
+
+ /**
+ * @ngdoc method
+ * @name ngModel.NgModelController#$setPristine
+ *
+ * @description
+ * Sets the control to its pristine state.
+ *
+ * This method can be called to remove the `ng-dirty` class and set the control to its pristine
+ * state (`ng-pristine` class). A model is considered to be pristine when the control
+ * has not been changed from when first compiled.
+ */
+ $setPristine: function $setPristine() {
+ this.$dirty = false;
+ this.$pristine = true;
+ this.$$animate.removeClass(this.$$element, DIRTY_CLASS);
+ this.$$animate.addClass(this.$$element, PRISTINE_CLASS);
+ },
+
+ /**
+ * @ngdoc method
+ * @name ngModel.NgModelController#$setDirty
+ *
+ * @description
+ * Sets the control to its dirty state.
+ *
+ * This method can be called to remove the `ng-pristine` class and set the control to its dirty
+ * state (`ng-dirty` class). A model is considered to be dirty when the control has been changed
+ * from when first compiled.
+ */
+ $setDirty: function $setDirty() {
+ this.$dirty = true;
+ this.$pristine = false;
+ this.$$animate.removeClass(this.$$element, PRISTINE_CLASS);
+ this.$$animate.addClass(this.$$element, DIRTY_CLASS);
+ this.$$parentForm.$setDirty();
+ },
+
+ /**
+ * @ngdoc method
+ * @name ngModel.NgModelController#$setUntouched
+ *
+ * @description
+ * Sets the control to its untouched state.
+ *
+ * This method can be called to remove the `ng-touched` class and set the control to its
+ * untouched state (`ng-untouched` class). Upon compilation, a model is set as untouched
+ * by default, however this function can be used to restore that state if the model has
+ * already been touched by the user.
+ */
+ $setUntouched: function $setUntouched() {
+ this.$touched = false;
+ this.$untouched = true;
+ this.$$animate.setClass(this.$$element, UNTOUCHED_CLASS, TOUCHED_CLASS);
+ },
+
+ /**
+ * @ngdoc method
+ * @name ngModel.NgModelController#$setTouched
+ *
+ * @description
+ * Sets the control to its touched state.
+ *
+ * This method can be called to remove the `ng-untouched` class and set the control to its
+ * touched state (`ng-touched` class). A model is considered to be touched when the user has
+ * first focused the control element and then shifted focus away from the control (blur event).
+ */
+ $setTouched: function $setTouched() {
+ this.$touched = true;
+ this.$untouched = false;
+ this.$$animate.setClass(this.$$element, TOUCHED_CLASS, UNTOUCHED_CLASS);
+ },
+
+ /**
+ * @ngdoc method
+ * @name ngModel.NgModelController#$rollbackViewValue
+ *
+ * @description
+ * Cancel an update and reset the input element's value to prevent an update to the `$modelValue`,
+ * which may be caused by a pending debounced event or because the input is waiting for some
+ * future event.
+ *
+ * If you have an input that uses `ng-model-options` to set up debounced updates or updates that
+ * depend on special events such as `blur`, there can be a period when the `$viewValue` is out of
+ * sync with the ngModel's `$modelValue`.
+ *
+ * In this case, you can use `$rollbackViewValue()` to manually cancel the debounced / future update
+ * and reset the input to the last committed view value.
+ *
+ * It is also possible that you run into difficulties if you try to update the ngModel's `$modelValue`
+ * programmatically before these debounced/future events have resolved/occurred, because Angular's
+ * dirty checking mechanism is not able to tell whether the model has actually changed or not.
+ *
+ * The `$rollbackViewValue()` method should be called before programmatically changing the model of an
+ * input which may have such events pending. This is important in order to make sure that the
+ * input field will be updated with the new model value and any pending operations are cancelled.
+ *
+ * @example
+ *
+ *
+ * angular.module('cancel-update-example', [])
+ *
+ * .controller('CancelUpdateController', ['$scope', function($scope) {
+ * $scope.model = {value1: '', value2: ''};
+ *
+ * $scope.setEmpty = function(e, value, rollback) {
+ * if (e.keyCode === 27) {
+ * e.preventDefault();
+ * if (rollback) {
+ * $scope.myForm[value].$rollbackViewValue();
+ * }
+ * $scope.model[value] = '';
+ * }
+ * };
+ * }]);
+ *
+ *
+ *
+ *
Both of these inputs are only updated if they are blurred. Hitting escape should
+ * empty them. Follow these steps and observe the difference:
+ *
+ * - Type something in the input. You will see that the model is not yet updated
+ * - Press the Escape key.
+ *
+ * - In the first example, nothing happens, because the model is already '', and no
+ * update is detected. If you blur the input, the model will be set to the current view.
+ *
+ * - In the second example, the pending update is cancelled, and the input is set back
+ * to the last committed view value (''). Blurring the input does nothing.
+ *
+ *
+ *
+ *
+ *
+ *
+ *
- *
Both of these inputs are only updated if they are blurred. Hitting escape should
- * empty them. Follow these steps and observe the difference:
- *
- * - Type something in the input. You will see that the model is not yet updated
- * - Press the Escape key.
- *
- * - In the first example, nothing happens, because the model is already '', and no
- * update is detected. If you blur the input, the model will be set to the current view.
- *
- * - In the second example, the pending update is cancelled, and the input is set back
- * to the last committed view value (''). Blurring the input does nothing.
- *
- *
- *
- *
- *
- *
- *
+ * In any case, the value passed to the method should always reflect the current value
+ * of the control. For example, if you are calling `$setViewValue` for an input element,
+ * you should pass the input DOM value. Otherwise, the control and the scope model become
+ * out of sync. It's also important to note that `$setViewValue` does not call `$render` or change
+ * the control's DOM value in any way. If we want to change the control's DOM value
+ * programmatically, we should update the `ngModel` scope expression. Its new value will be
+ * picked up by the model controller, which will run it through the `$formatters`, `$render` it
+ * to update the DOM, and finally call `$validate` on it.
+ *
+ *
+ * @param {*} value value from the view.
+ * @param {string} trigger Event that triggered the update.
+ */
+ $setViewValue: function $setViewValue(value, trigger) {
+ this.$viewValue = value;
+ if (this.$options.getOption('updateOnDefault')) {
+ this.$$debounceViewValueCommit(trigger);
}
- }
- },
+ },
- /**
- * @ngdoc method
- * @name ngModel.NgModelController#$commitViewValue
- *
- * @description
- * Commit a pending update to the `$modelValue`.
- *
- * Updates may be pending by a debounced event or because the input is waiting for a some future
- * event defined in `ng-model-options`. this method is rarely needed as `NgModelController`
- * usually handles calling this in response to input events.
- */
- $commitViewValue: function() {
- var viewValue = this.$viewValue;
+ $$debounceViewValueCommit: function $$debounceViewValueCommit(trigger) {
+ var debounceDelay = this.$options.getOption('debounce');
- this.$$timeout.cancel(this.$$pendingDebounce);
+ if (isNumber(debounceDelay[trigger])) {
+ debounceDelay = debounceDelay[trigger];
+ } else if (isNumber(debounceDelay['default'])) {
+ debounceDelay = debounceDelay['default'];
+ }
- // If the view value has not changed then we should just exit, except in the case where there is
- // a native validator on the element. In this case the validation state may have changed even though
- // the viewValue has stayed empty.
- if (this.$$lastCommittedViewValue === viewValue && (viewValue !== '' || !this.$$hasNativeValidators)) {
- return;
- }
- this.$$updateEmptyClasses(viewValue);
- this.$$lastCommittedViewValue = viewValue;
+ this.$$timeout.cancel(this.$$pendingDebounce);
+ var that = this;
+ if (debounceDelay > 0) {
+ // this fails if debounceDelay is an object
+ this.$$pendingDebounce = this.$$timeout(function () {
+ that.$commitViewValue();
+ }, debounceDelay);
+ } else if (this.$$scope.$root.$$phase) {
+ this.$commitViewValue();
+ } else {
+ this.$$scope.$apply(function () {
+ that.$commitViewValue();
+ });
+ }
+ },
- // change to dirty
- if (this.$pristine) {
- this.$setDirty();
- }
- this.$$parseAndValidate();
- },
+ /**
+ * @ngdoc method
+ *
+ * @name ngModel.NgModelController#$overrideModelOptions
+ *
+ * @description
+ *
+ * Override the current model options settings programmatically.
+ *
+ * The previous `ModelOptions` value will not be modified. Instead, a
+ * new `ModelOptions` object will inherit from the previous one overriding
+ * or inheriting settings that are defined in the given parameter.
+ *
+ * See {@link ngModelOptions} for information about what options can be specified
+ * and how model option inheritance works.
+ *
+ *
+ * **Note:** this function only affects the options set on the `ngModelController`,
+ * and not the options on the {@link ngModelOptions} directive from which they might have been
+ * obtained initially.
+ *
+ *
+ *
+ * **Note:** it is not possible to override the `getterSetter` option.
+ *
+ *
+ * @param {Object} options a hash of settings to override the previous options
+ *
+ */
+ $overrideModelOptions: function $overrideModelOptions(options) {
+ this.$options = this.$options.createChild(options);
+ this.$$setUpdateOnEvents();
+ },
- $$parseAndValidate: function() {
- var viewValue = this.$$lastCommittedViewValue;
- var modelValue = viewValue;
- var that = this;
+ /**
+ * @ngdoc method
+ *
+ * @name ngModel.NgModelController#$processModelValue
+ * @description
+ *
+ * Runs the model -> view pipeline on the current
+ * {@link ngModel.NgModelController#$modelValue $modelValue}.
+ *
+ * The following actions are performed by this method:
+ *
+ * - the `$modelValue` is run through the {@link ngModel.NgModelController#$formatters $formatters}
+ * and the result is set to the {@link ngModel.NgModelController#$viewValue $viewValue}
+ * - the `ng-empty` or `ng-not-empty` class is set on the element
+ * - if the `$viewValue` has changed:
+ * - {@link ngModel.NgModelController#$render $render} is called on the control
+ * - the {@link ngModel.NgModelController#$validators $validators} are run and
+ * the validation status is set.
+ *
+ * This method is called by ngModel internally when the bound scope value changes.
+ * Application developers usually do not have to call this function themselves.
+ *
+ * This function can be used when the `$viewValue` or the rendered DOM value are not correctly
+ * formatted and the `$modelValue` must be run through the `$formatters` again.
+ *
+ * @example
+ * Consider a text input with an autocomplete list (for fruit), where the items are
+ * objects with a name and an id.
+ * A user enters `ap` and then selects `Apricot` from the list.
+ * Based on this, the autocomplete widget will call `$setViewValue({name: 'Apricot', id: 443})`,
+ * but the rendered value will still be `ap`.
+ * The widget can then call `ctrl.$processModelValue()` to run the model -> view
+ * pipeline again, which formats the object to the string `Apricot`,
+ * then updates the `$viewValue`, and finally renders it in the DOM.
+ *
+ *
+
+
+
+ Search Fruit:
+
+
+
+ Model:
+
{{selectedFruit | json}}
+
+
- * In any case, the value passed to the method should always reflect the current value
- * of the control. For example, if you are calling `$setViewValue` for an input element,
- * you should pass the input DOM value. Otherwise, the control and the scope model become
- * out of sync. It's also important to note that `$setViewValue` does not call `$render` or change
- * the control's DOM value in any way. If we want to change the control's DOM value
- * programmatically, we should update the `ngModel` scope expression. Its new value will be
- * picked up by the model controller, which will run it through the `$formatters`, `$render` it
- * to update the DOM, and finally call `$validate` on it.
- *
- *
- * @param {*} value value from the view.
- * @param {string} trigger Event that triggered the update.
+ * Change the validity state, and notify the form.
+ *
+ * This method can be called within $parsers/$formatters or a custom validation implementation.
+ * However, in most cases it should be sufficient to use the `ngModel.$validators` and
+ * `ngModel.$asyncValidators` collections which will call `$setValidity` automatically.
+ *
+ * @param {string} validationErrorKey Name of the validator. The `validationErrorKey` will be assigned
+ * to either `$error[validationErrorKey]` or `$pending[validationErrorKey]`
+ * (for unfulfilled `$asyncValidators`), so that it is available for data-binding.
+ * The `validationErrorKey` should be in camelCase and will get converted into dash-case
+ * for class name. Example: `myError` will result in `ng-valid-my-error` and `ng-invalid-my-error`
+ * classes and can be bound to as `{{ someForm.someControl.$error.myError }}`.
+ * @param {boolean} isValid Whether the current state is valid (true), invalid (false), pending (undefined),
+ * or skipped (null). Pending is used for unfulfilled `$asyncValidators`.
+ * Skipped is used by Angular when validators do not run because of parse errors and
+ * when `$asyncValidators` do not run because any of the `$validators` failed.
*/
- $setViewValue: function(value, trigger) {
- this.$viewValue = value;
- if (this.$options.getOption('updateOnDefault')) {
- this.$$debounceViewValueCommit(trigger);
- }
- },
-
- $$debounceViewValueCommit: function(trigger) {
- var debounceDelay = this.$options.getOption('debounce');
-
- if (isNumber(debounceDelay[trigger])) {
- debounceDelay = debounceDelay[trigger];
- } else if (isNumber(debounceDelay['default'])) {
- debounceDelay = debounceDelay['default'];
- }
-
- this.$$timeout.cancel(this.$$pendingDebounce);
- var that = this;
- if (debounceDelay > 0) { // this fails if debounceDelay is an object
- this.$$pendingDebounce = this.$$timeout(function() {
- that.$commitViewValue();
- }, debounceDelay);
- } else if (this.$$scope.$root.$$phase) {
- this.$commitViewValue();
- } else {
- this.$$scope.$apply(function() {
- that.$commitViewValue();
- });
+ addSetValidityMethod({
+ clazz: NgModelController,
+ set: function set(object, property) {
+ object[property] = true;
+ },
+ unset: function unset(object, property) {
+ delete object[property];
}
- },
+ });
/**
- * @ngdoc method
- *
- * @name ngModel.NgModelController#$overrideModelOptions
+ * @ngdoc directive
+ * @name ngModel
+ * @restrict A
+ * @priority 1
+ * @param {expression} ngModel assignable {@link guide/expression Expression} to bind to.
*
* @description
+ * The `ngModel` directive binds an `input`,`select`, `textarea` (or custom form control) to a
+ * property on the scope using {@link ngModel.NgModelController NgModelController},
+ * which is created and exposed by this directive.
+ *
+ * `ngModel` is responsible for:
+ *
+ * - Binding the view into the model, which other directives such as `input`, `textarea` or `select`
+ * require.
+ * - Providing validation behavior (i.e. required, number, email, url).
+ * - Keeping the state of the control (valid/invalid, dirty/pristine, touched/untouched, validation errors).
+ * - Setting related css classes on the element (`ng-valid`, `ng-invalid`, `ng-dirty`, `ng-pristine`, `ng-touched`,
+ * `ng-untouched`, `ng-empty`, `ng-not-empty`) including animations.
+ * - Registering the control with its parent {@link ng.directive:form form}.
+ *
+ * Note: `ngModel` will try to bind to the property given by evaluating the expression on the
+ * current scope. If the property doesn't already exist on this scope, it will be created
+ * implicitly and added to the scope.
+ *
+ * For best practices on using `ngModel`, see:
+ *
+ * - [Understanding Scopes](https://github.com/angular/angular.js/wiki/Understanding-Scopes)
+ *
+ * For basic examples, how to use `ngModel`, see:
+ *
+ * - {@link ng.directive:input input}
+ * - {@link input[text] text}
+ * - {@link input[checkbox] checkbox}
+ * - {@link input[radio] radio}
+ * - {@link input[number] number}
+ * - {@link input[email] email}
+ * - {@link input[url] url}
+ * - {@link input[date] date}
+ * - {@link input[datetime-local] datetime-local}
+ * - {@link input[time] time}
+ * - {@link input[month] month}
+ * - {@link input[week] week}
+ * - {@link ng.directive:select select}
+ * - {@link ng.directive:textarea textarea}
+ *
+ * ## Complex Models (objects or collections)
+ *
+ * By default, `ngModel` watches the model by reference, not value. This is important to know when
+ * binding inputs to models that are objects (e.g. `Date`) or collections (e.g. arrays). If only properties of the
+ * object or collection change, `ngModel` will not be notified and so the input will not be re-rendered.
+ *
+ * The model must be assigned an entirely new object or collection before a re-rendering will occur.
+ *
+ * Some directives have options that will cause them to use a custom `$watchCollection` on the model expression
+ * - for example, `ngOptions` will do so when a `track by` clause is included in the comprehension expression or
+ * if the select is given the `multiple` attribute.
+ *
+ * The `$watchCollection()` method only does a shallow comparison, meaning that changing properties deeper than the
+ * first level of the object (or only changing the properties of an item in the collection if it's an array) will still
+ * not trigger a re-rendering of the model.
+ *
+ * ## CSS classes
+ * The following CSS classes are added and removed on the associated input/select/textarea element
+ * depending on the validity of the model.
+ *
+ * - `ng-valid`: the model is valid
+ * - `ng-invalid`: the model is invalid
+ * - `ng-valid-[key]`: for each valid key added by `$setValidity`
+ * - `ng-invalid-[key]`: for each invalid key added by `$setValidity`
+ * - `ng-pristine`: the control hasn't been interacted with yet
+ * - `ng-dirty`: the control has been interacted with
+ * - `ng-touched`: the control has been blurred
+ * - `ng-untouched`: the control hasn't been blurred
+ * - `ng-pending`: any `$asyncValidators` are unfulfilled
+ * - `ng-empty`: the view does not contain a value or the value is deemed "empty", as defined
+ * by the {@link ngModel.NgModelController#$isEmpty} method
+ * - `ng-not-empty`: the view contains a non-empty value
+ *
+ * Keep in mind that ngAnimate can detect each of these classes when added and removed.
+ *
+ * @animations
+ * Animations within models are triggered when any of the associated CSS classes are added and removed
+ * on the input element which is attached to the model. These classes include: `.ng-pristine`, `.ng-dirty`,
+ * `.ng-invalid` and `.ng-valid` as well as any other validations that are performed on the model itself.
+ * The animations that are triggered within ngModel are similar to how they work in ngClass and
+ * animations can be hooked into using CSS transitions, keyframes as well as JS animations.
+ *
+ * The following example shows a simple way to utilize CSS transitions to style an input element
+ * that has been rendered as invalid after it has been validated:
*
- * Override the current model options settings programmatically.
+ *
+ * //be sure to include ngAnimate as a module to hook into more
+ * //advanced animations
+ * .my-input {
+ * transition:0.5s linear all;
+ * background: white;
+ * }
+ * .my-input.ng-invalid {
+ * background: red;
+ * color:white;
+ * }
+ *
*
- * The previous `ModelOptions` value will not be modified. Instead, a
- * new `ModelOptions` object will inherit from the previous one overriding
- * or inheriting settings that are defined in the given parameter.
+ * @example
+ * ### Basic Usage
+ *
+
+
+
+
+ Update input to see transitions when valid/invalid.
+ Integer is a valid value.
+
+
+
+ *
*
- * See {@link ngModelOptions} for information about what options can be specified
- * and how model option inheritance works.
+ * @example
+ * ### Binding to a getter/setter
*
- *
- * **Note:** this function only affects the options set on the `ngModelController`,
- * and not the options on the {@link ngModelOptions} directive from which they might have been
- * obtained initially.
- *
+ * Sometimes it's helpful to bind `ngModel` to a getter/setter function. A getter/setter is a
+ * function that returns a representation of the model when called with zero arguments, and sets
+ * the internal state of a model when called with an argument. It's sometimes useful to use this
+ * for models that have an internal representation that's different from what the model exposes
+ * to the view.
*
- *
- * **Note:** it is not possible to override the `getterSetter` option.
+ *
+ * **Best Practice:** It's best to keep getters fast because Angular is likely to call them more
+ * frequently than other parts of your code.
*
*
- * @param {Object} options a hash of settings to override the previous options
- *
- */
- $overrideModelOptions: function(options) {
- this.$options = this.$options.createChild(options);
- this.$$setUpdateOnEvents();
- },
-
- /**
- * @ngdoc method
- *
- * @name ngModel.NgModelController#$processModelValue
-
- * @description
- *
- * Runs the model -> view pipeline on the current
- * {@link ngModel.NgModelController#$modelValue $modelValue}.
- *
- * The following actions are performed by this method:
+ * You use this behavior by adding `ng-model-options="{ getterSetter: true }"` to an element that
+ * has `ng-model` attached to it. You can also add `ng-model-options="{ getterSetter: true }"` to
+ * a `
- 
-