*
*
User comments
* By default, HTML that isn't explicitly trusted (e.g. Alice's comment) is sanitized when
@@ -15456,17 +13821,17 @@ function $SceDelegateProvider() {
*
*
*
- * angular.module('mySceApp', ['ngSanitize'])
- * .controller('AppController', ['$http', '$templateCache', '$sce',
- * function($http, $templateCache, $sce) {
- * var self = this;
- * $http.get("test_data.json", {cache: $templateCache}).success(function(userComments) {
- * self.userComments = userComments;
- * });
- * self.explicitlyTrustedHtml = $sce.trustAsHtml(
- * 'Hover over this text. ');
- * }]);
+ * var mySceApp = angular.module('mySceApp', ['ngSanitize']);
+ *
+ * mySceApp.controller("myAppController", function myAppController($http, $templateCache, $sce) {
+ * var self = this;
+ * $http.get("test_data.json", {cache: $templateCache}).success(function(userComments) {
+ * self.userComments = userComments;
+ * });
+ * self.explicitlyTrustedHtml = $sce.trustAsHtml(
+ * 'Hover over this text. ');
+ * });
*
*
*
@@ -15534,7 +13899,7 @@ function $SceProvider() {
* @description
* Enables/disables SCE and returns the current value.
*/
- this.enabled = function(value) {
+ this.enabled = function (value) {
if (arguments.length) {
enabled = !!value;
}
@@ -15588,13 +13953,13 @@ function $SceProvider() {
* sce.js and sceSpecs.js would need to be aware of this detail.
*/
- this.$get = ['$parse', '$sceDelegate', function(
- $parse, $sceDelegate) {
- // Prereq: Ensure that we're not running in IE<11 quirks mode. In that mode, IE < 11 allow
+ this.$get = ['$parse', '$sniffer', '$sceDelegate', function(
+ $parse, $sniffer, $sceDelegate) {
+ // Prereq: Ensure that we're not running in IE8 quirks mode. In that mode, IE allows
// the "expression(javascript expression)" syntax which is insecure.
- if (enabled && msie < 8) {
+ if (enabled && $sniffer.msie && $sniffer.msieDocumentMode < 8) {
throw $sceMinErr('iequirks',
- 'Strict Contextual Escaping does not support Internet Explorer version < 11 in quirks ' +
+ 'Strict Contextual Escaping does not support Internet Explorer version < 9 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.');
}
@@ -15612,7 +13977,7 @@ function $SceProvider() {
* @description
* Returns a boolean indicating if SCE is enabled.
*/
- sce.isEnabled = function() {
+ sce.isEnabled = function () {
return enabled;
};
sce.trustAs = $sceDelegate.trustAs;
@@ -15648,9 +14013,9 @@ function $SceProvider() {
if (parsed.literal && parsed.constant) {
return parsed;
} else {
- return $parse(expr, function(value) {
- return sce.getTrusted(type, value);
- });
+ return function sceParseAsTrusted(self, locals) {
+ return sce.getTrusted(type, parsed(self, locals));
+ };
}
};
@@ -15817,7 +14182,7 @@ function $SceProvider() {
*
* @description
* Shorthand method. `$sce.parseAsHtml(expression string)` →
- * {@link ng.$sce#parseAs `$sce.parseAs($sce.HTML, value)`}
+ * {@link ng.$sce#parse `$sce.parseAs($sce.HTML, value)`}
*
* @param {string} expression String expression to compile.
* @returns {function(context, locals)} a function which represents the compiled expression:
@@ -15834,7 +14199,7 @@ function $SceProvider() {
*
* @description
* Shorthand method. `$sce.parseAsCss(value)` →
- * {@link ng.$sce#parseAs `$sce.parseAs($sce.CSS, value)`}
+ * {@link ng.$sce#parse `$sce.parseAs($sce.CSS, value)`}
*
* @param {string} expression String expression to compile.
* @returns {function(context, locals)} a function which represents the compiled expression:
@@ -15851,7 +14216,7 @@ function $SceProvider() {
*
* @description
* Shorthand method. `$sce.parseAsUrl(value)` →
- * {@link ng.$sce#parseAs `$sce.parseAs($sce.URL, value)`}
+ * {@link ng.$sce#parse `$sce.parseAs($sce.URL, value)`}
*
* @param {string} expression String expression to compile.
* @returns {function(context, locals)} a function which represents the compiled expression:
@@ -15868,7 +14233,7 @@ function $SceProvider() {
*
* @description
* Shorthand method. `$sce.parseAsResourceUrl(value)` →
- * {@link ng.$sce#parseAs `$sce.parseAs($sce.RESOURCE_URL, value)`}
+ * {@link ng.$sce#parse `$sce.parseAs($sce.RESOURCE_URL, value)`}
*
* @param {string} expression String expression to compile.
* @returns {function(context, locals)} a function which represents the compiled expression:
@@ -15885,7 +14250,7 @@ function $SceProvider() {
*
* @description
* Shorthand method. `$sce.parseAsJs(value)` →
- * {@link ng.$sce#parseAs `$sce.parseAs($sce.JS, value)`}
+ * {@link ng.$sce#parse `$sce.parseAs($sce.JS, value)`}
*
* @param {string} expression String expression to compile.
* @returns {function(context, locals)} a function which represents the compiled expression:
@@ -15901,15 +14266,15 @@ function $SceProvider() {
getTrusted = sce.getTrusted,
trustAs = sce.trustAs;
- forEach(SCE_CONTEXTS, function(enumValue, name) {
+ forEach(SCE_CONTEXTS, function (enumValue, name) {
var lName = lowercase(name);
- sce[camelCase("parse_as_" + lName)] = function(expr) {
+ sce[camelCase("parse_as_" + lName)] = function (expr) {
return parse(enumValue, expr);
};
- sce[camelCase("get_trusted_" + lName)] = function(value) {
+ sce[camelCase("get_trusted_" + lName)] = function (value) {
return getTrusted(enumValue, value);
};
- sce[camelCase("trust_as_" + lName)] = function(value) {
+ sce[camelCase("trust_as_" + lName)] = function (value) {
return trustAs(enumValue, value);
};
});
@@ -15926,6 +14291,7 @@ function $SceProvider() {
* @requires $document
*
* @property {boolean} history Does the browser support html5 history api ?
+ * @property {boolean} hashchange Does the browser support hashchange event ?
* @property {boolean} transitions Does the browser support CSS transition events ?
* @property {boolean} animations Does the browser support CSS animation events ?
*
@@ -15939,30 +14305,31 @@ function $SnifferProvider() {
int((/android (\d+)/.exec(lowercase(($window.navigator || {}).userAgent)) || [])[1]),
boxee = /Boxee/i.test(($window.navigator || {}).userAgent),
document = $document[0] || {},
+ documentMode = document.documentMode,
vendorPrefix,
- vendorRegex = /^(Moz|webkit|ms)(?=[A-Z])/,
+ vendorRegex = /^(Moz|webkit|O|ms)(?=[A-Z])/,
bodyStyle = document.body && document.body.style,
transitions = false,
animations = false,
match;
if (bodyStyle) {
- for (var prop in bodyStyle) {
- if (match = vendorRegex.exec(prop)) {
+ for(var prop in bodyStyle) {
+ if(match = vendorRegex.exec(prop)) {
vendorPrefix = match[0];
vendorPrefix = vendorPrefix.substr(0, 1).toUpperCase() + vendorPrefix.substr(1);
break;
}
}
- if (!vendorPrefix) {
+ if(!vendorPrefix) {
vendorPrefix = ('WebkitOpacity' in bodyStyle) && 'webkit';
}
transitions = !!(('transition' in bodyStyle) || (vendorPrefix + 'Transition' in bodyStyle));
animations = !!(('animation' in bodyStyle) || (vendorPrefix + 'Animation' in bodyStyle));
- if (android && (!transitions || !animations)) {
+ if (android && (!transitions||!animations)) {
transitions = isString(document.body.style.webkitTransition);
animations = isString(document.body.style.webkitAnimation);
}
@@ -15981,13 +14348,14 @@ function $SnifferProvider() {
// jshint -W018
history: !!($window.history && $window.history.pushState && !(android < 4) && !boxee),
// jshint +W018
+ hashchange: 'onhashchange' in $window &&
+ // IE8 compatible mode lies
+ (!documentMode || documentMode > 7),
hasEvent: function(event) {
// 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 <= 11) return false;
+ if (event == 'input' && msie == 9) return false;
if (isUndefined(eventSupport[event])) {
var divElm = document.createElement('div');
@@ -15998,192 +14366,18 @@ function $SnifferProvider() {
},
csp: csp(),
vendorPrefix: vendorPrefix,
- transitions: transitions,
- animations: animations,
- android: android
+ transitions : transitions,
+ animations : animations,
+ android: android,
+ msie : msie,
+ msieDocumentMode: documentMode
};
}];
}
-var $compileMinErr = minErr('$compile');
-
-/**
- * @ngdoc service
- * @name $templateRequest
- *
- * @description
- * The `$templateRequest` service 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).
- *
- * @param {string} 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} the HTTP Promise for the given.
- *
- * @property {number} totalPendingRequests total amount of pending template requests being downloaded.
- */
-function $TemplateRequestProvider() {
- this.$get = ['$templateCache', '$http', '$q', function($templateCache, $http, $q) {
- function handleRequestFn(tpl, ignoreRequestError) {
- handleRequestFn.totalPendingRequests++;
-
- var transformResponse = $http.defaults && $http.defaults.transformResponse;
-
- if (isArray(transformResponse)) {
- transformResponse = transformResponse.filter(function(transformer) {
- return transformer !== defaultHttpResponseTransform;
- });
- } else if (transformResponse === defaultHttpResponseTransform) {
- transformResponse = null;
- }
-
- var httpOptions = {
- cache: $templateCache,
- transformResponse: transformResponse
- };
-
- return $http.get(tpl, httpOptions)
- .finally(function() {
- handleRequestFn.totalPendingRequests--;
- })
- .then(function(response) {
- return response.data;
- }, handleError);
-
- function handleError(resp) {
- if (!ignoreRequestError) {
- throw $compileMinErr('tpload', 'Failed to load template: {0}', tpl);
- }
- return $q.reject(resp);
- }
- }
-
- handleRequestFn.totalPendingRequests = 0;
-
- return handleRequestFn;
- }];
-}
-
-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#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;
- };
-
- /**
- * @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;
- }];
-}
-
function $TimeoutProvider() {
- this.$get = ['$rootScope', '$browser', '$q', '$$q', '$exceptionHandler',
- function($rootScope, $browser, $q, $$q, $exceptionHandler) {
+ this.$get = ['$rootScope', '$browser', '$q', '$exceptionHandler',
+ function($rootScope, $browser, $q, $exceptionHandler) {
var deferreds = {};
@@ -16213,15 +14407,15 @@ function $TimeoutProvider() {
*
*/
function timeout(fn, delay, invokeApply) {
- var skipApply = (isDefined(invokeApply) && !invokeApply),
- deferred = (skipApply ? $$q : $q).defer(),
+ var deferred = $q.defer(),
promise = deferred.promise,
+ skipApply = (isDefined(invokeApply) && !invokeApply),
timeoutId;
timeoutId = $browser.defer(function() {
try {
deferred.resolve(fn());
- } catch (e) {
+ } catch(e) {
deferred.reject(e);
$exceptionHandler(e);
}
@@ -16272,7 +14466,7 @@ function $TimeoutProvider() {
// exactly the behavior needed here. There is little value is mocking these out for this
// service.
var urlParsingNode = document.createElement("a");
-var originUrl = urlResolve(window.location.href);
+var originUrl = urlResolve(window.location.href, true);
/**
@@ -16327,7 +14521,7 @@ var originUrl = urlResolve(window.location.href);
* | pathname | The pathname, beginning with "/"
*
*/
-function urlResolve(url) {
+function urlResolve(url, base) {
var href = url;
if (msie) {
@@ -16387,7 +14581,7 @@ function urlIsSameOrigin(requestUrl) {
@@ -17378,25 +15502,19 @@ var uppercaseFilter = valueFn(uppercase);
Output numbers: {{ numbers | limitTo:numLimit }}
Limit {{letters}} to:
Output letters: {{ letters | limitTo:letterLimit }}
- Limit {{longNumber}} to:
-
Output long number: {{ longNumber | limitTo:longNumberLimit }}
var numLimitInput = element(by.model('numLimit'));
var letterLimitInput = element(by.model('letterLimit'));
- var longNumberLimitInput = element(by.model('longNumberLimit'));
var limitedNumbers = element(by.binding('numbers | limitTo:numLimit'));
var limitedLetters = element(by.binding('letters | limitTo:letterLimit'));
- var limitedLongNumber = element(by.binding('longNumber | limitTo:longNumberLimit'));
it('should limit the number array to first three items', function() {
expect(numLimitInput.getAttribute('value')).toBe('3');
expect(letterLimitInput.getAttribute('value')).toBe('3');
- expect(longNumberLimitInput.getAttribute('value')).toBe('3');
expect(limitedNumbers.getText()).toEqual('Output numbers: [1,2,3]');
expect(limitedLetters.getText()).toEqual('Output letters: abc');
- expect(limitedLongNumber.getText()).toEqual('Output long number: 234');
});
// There is a bug in safari and protractor that doesn't like the minus key
@@ -17405,11 +15523,8 @@ var uppercaseFilter = valueFn(uppercase);
// numLimitInput.sendKeys('-3');
// letterLimitInput.clear();
// letterLimitInput.sendKeys('-3');
- // longNumberLimitInput.clear();
- // longNumberLimitInput.sendKeys('-3');
// expect(limitedNumbers.getText()).toEqual('Output numbers: [7,8,9]');
// expect(limitedLetters.getText()).toEqual('Output letters: ghi');
- // expect(limitedLongNumber.getText()).toEqual('Output long number: 342');
// });
it('should not exceed the maximum size of input array', function() {
@@ -17417,18 +15532,14 @@ var uppercaseFilter = valueFn(uppercase);
numLimitInput.sendKeys('100');
letterLimitInput.clear();
letterLimitInput.sendKeys('100');
- longNumberLimitInput.clear();
- longNumberLimitInput.sendKeys('100');
expect(limitedNumbers.getText()).toEqual('Output numbers: [1,2,3,4,5,6,7,8,9]');
expect(limitedLetters.getText()).toEqual('Output letters: abcdefghi');
- expect(limitedLongNumber.getText()).toEqual('Output long number: 2345432342');
});
-*/
-function limitToFilter() {
+ */
+function limitToFilter(){
return function(input, limit) {
- if (isNumber(input)) input = input.toString();
if (!isArray(input) && !isString(input)) return input;
if (Math.abs(Number(limit)) === Infinity) {
@@ -17437,12 +15548,37 @@ function limitToFilter() {
limit = int(limit);
}
- //NaN check on limit
- if (limit) {
- return limit > 0 ? input.slice(0, limit) : input.slice(limit);
- } else {
- return isString(input) ? "" : [];
+ if (isString(input)) {
+ //NaN check on limit
+ if (limit) {
+ return limit >= 0 ? input.slice(0, limit) : input.slice(limit, input.length);
+ } else {
+ return "";
+ }
}
+
+ var out = [],
+ i, n;
+
+ // if abs(limit) exceeds maximum length, trim it
+ if (limit > input.length)
+ limit = input.length;
+ else if (limit < -input.length)
+ limit = -input.length;
+
+ if (limit > 0) {
+ i = 0;
+ n = limit;
+ } else {
+ i = input.length + limit;
+ n = input.length;
+ }
+
+ for (; i
*/
orderByFilter.$inject = ['$parse'];
-function orderByFilter($parse) {
+function orderByFilter($parse){
return function(array, sortPredicate, reverseOrder) {
if (!(isArrayLike(array))) return array;
- sortPredicate = isArray(sortPredicate) ? sortPredicate : [sortPredicate];
+ sortPredicate = isArray(sortPredicate) ? sortPredicate: [sortPredicate];
if (sortPredicate.length === 0) { sortPredicate = ['+']; }
- sortPredicate = sortPredicate.map(function(predicate) {
+ sortPredicate = map(sortPredicate, function(predicate){
var descending = false, get = predicate || identity;
if (isString(predicate)) {
if ((predicate.charAt(0) == '+' || predicate.charAt(0) == '-')) {
descending = predicate.charAt(0) == '-';
predicate = predicate.substring(1);
}
- if (predicate === '') {
+ if ( predicate === '' ) {
// Effectively no predicate was passed so we compare identity
- return reverseComparator(compare, descending);
+ return reverseComparator(function(a,b) {
+ return compare(a, b);
+ }, descending);
}
get = $parse(predicate);
if (get.constant) {
var key = get();
- return reverseComparator(function(a, b) {
+ return reverseComparator(function(a,b) {
return compare(a[key], b[key]);
}, descending);
}
}
- return reverseComparator(function(a, b) {
+ return reverseComparator(function(a,b){
return compare(get(a),get(b));
}, descending);
});
return slice.call(array).sort(reverseComparator(comparator, reverseOrder));
- function comparator(o1, o2) {
- for (var i = 0; i < sortPredicate.length; i++) {
+ function comparator(o1, o2){
+ for ( var i = 0; i < sortPredicate.length; i++) {
var comp = sortPredicate[i](o1, o2);
if (comp !== 0) return comp;
}
return 0;
}
function reverseComparator(comp, descending) {
- return descending
- ? function(a, b) {return comp(b,a);}
+ return toBoolean(descending)
+ ? function(a,b){return comp(b,a);}
: comp;
}
-
- function isPrimitive(value) {
- switch (typeof value) {
- case 'number': /* falls through */
- case 'boolean': /* falls through */
- case 'string':
- return true;
- default:
- return false;
- }
- }
-
- function objectToString(value) {
- if (value === null) return 'null';
- if (typeof value.valueOf === 'function') {
- value = value.valueOf();
- if (isPrimitive(value)) return value;
- }
- if (typeof value.toString === 'function') {
- value = value.toString();
- if (isPrimitive(value)) return value;
- }
- return '';
- }
-
- function compare(v1, v2) {
+ function compare(v1, v2){
var t1 = typeof v1;
var t2 = typeof v2;
- if (t1 === t2 && t1 === "object") {
- v1 = objectToString(v1);
- v2 = objectToString(v2);
- }
- if (t1 === t2) {
- if (t1 === "string") {
+ if (t1 == t2) {
+ if (isDate(v1) && isDate(v2)) {
+ v1 = v1.valueOf();
+ v2 = v2.valueOf();
+ }
+ if (t1 == "string") {
v1 = v1.toLowerCase();
v2 = v2.toLowerCase();
}
@@ -17676,15 +15789,28 @@ function ngDirective(directive) {
var htmlAnchorDirective = valueFn({
restrict: 'E',
compile: function(element, attr) {
+
+ if (msie <= 8) {
+
+ // turn link into a stylable link in IE
+ // but only if it doesn't have name attribute, in which case it's an anchor
+ if (!attr.href && !attr.name) {
+ attr.$set('href', '');
+ }
+
+ // add a comment node to anchors to workaround IE bug that causes element content to be reset
+ // to new attribute content if attribute is updated with value containing @ and element also
+ // contains value with @
+ // see issue #1949
+ element.append(document.createComment('IE fix'));
+ }
+
if (!attr.href && !attr.xlinkHref && !attr.name) {
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) {
+ element.on('click', function(event){
// if we have no href url, then don't navigate anywhere.
if (!element.attr(href)) {
event.preventDefault();
@@ -17711,12 +15837,12 @@ var htmlAnchorDirective = valueFn({
*
* The wrong way to write it:
* ```html
- * link1
+ *
* ```
*
* The correct way to write it:
* ```html
- * link1
+ *
* ```
*
* @element A
@@ -17854,23 +15980,20 @@ var htmlAnchorDirective = valueFn({
*
* @description
*
- * This directive sets the `disabled` attribute on the element 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. The following example would make the button enabled on Chrome/Firefox
- * but not on older IEs:
- *
+ * We shouldn't do this, because it will make the button enabled on Chrome/Firefox but not on IE8 and older IEs:
* ```html
- *
- *
Disabled
+ *
+ * Disabled
*
* ```
*
- * This is because the HTML specification does not require browsers to preserve the values of
- * boolean attributes such as `disabled` (Their presence means true and their absence means false.)
+ * The HTML specification does not require browsers to preserve the values of boolean attributes
+ * such as disabled. (Their presence means true and their absence means false.)
* If we put an Angular interpolation expression into such an attribute then the
* binding information would be lost when the browser removes the attribute.
+ * The `ngDisabled` directive solves this problem for the `disabled` attribute.
+ * This complementary directive is not removed by the browser and so provides
+ * a permanent reliable place to store the binding information.
*
* @example
@@ -17889,7 +16012,7 @@ var htmlAnchorDirective = valueFn({
*
* @element INPUT
* @param {expression} ngDisabled If the {@link guide/expression expression} is truthy,
- * then the `disabled` attribute will be set on the element
+ * then special attribute "disabled" will be set on the element
*/
@@ -18048,7 +16171,6 @@ forEach(BOOLEAN_ATTR, function(propName, attrName) {
var normalized = directiveNormalize('ng-' + attrName);
ngAttributeAliasDirectives[normalized] = function() {
return {
- restrict: 'A',
priority: 100,
link: function(scope, element, attr) {
scope.$watch(attr[normalized], function ngBooleanAttrWatchAction(value) {
@@ -18059,29 +16181,6 @@ forEach(BOOLEAN_ATTR, function(propName, attrName) {
};
});
-// 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) {
@@ -18121,22 +16220,14 @@ forEach(['src', 'srcset', 'href'], function(attrName) {
};
});
-/* global -nullFormCtrl, -SUBMITTED_CLASS, addSetValidityMethod: true
- */
+/* global -nullFormCtrl */
var nullFormCtrl = {
$addControl: noop,
- $$renameControl: nullFormRenameControl,
$removeControl: noop,
$setValidity: noop,
$setDirty: noop,
- $setPristine: noop,
- $setSubmitted: noop
-},
-SUBMITTED_CLASS = 'ng-submitted';
-
-function nullFormRenameControl(control, name) {
- control.$name = name;
-}
+ $setPristine: noop
+};
/**
* @ngdoc type
@@ -18146,13 +16237,13 @@ function nullFormRenameControl(control, name) {
* @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} $error Is an object hash, containing references to controls or
- * forms with failing validators, where:
+ * @property {Object} $error Is an object hash, containing references to all invalid controls or
+ * forms, where:
*
* - keys are validation tokens (error names),
- * - values are arrays of controls or forms that have a failing validator for given error name.
+ * - values are arrays of controls or forms that are invalid for given error name.
+ *
*
* Built-in validation tokens:
*
@@ -18165,11 +16256,6 @@ function nullFormRenameControl(control, name) {
* - `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,
@@ -18180,59 +16266,34 @@ function nullFormRenameControl(control, name) {
*
*/
//asks for $scope to fool the BC controller module
-FormController.$inject = ['$element', '$attrs', '$scope', '$animate', '$interpolate'];
-function FormController(element, attrs, $scope, $animate, $interpolate) {
+FormController.$inject = ['$element', '$attrs', '$scope', '$animate'];
+function FormController(element, attrs, $scope, $animate) {
var form = this,
+ parentForm = element.parent().controller('form') || nullFormCtrl,
+ invalidCount = 0, // used to easily determine if we are valid
+ errors = form.$error = {},
controls = [];
- var parentForm = form.$$parentForm = element.parent().controller('form') || nullFormCtrl;
-
// init state
- form.$error = {};
- form.$$success = {};
- form.$pending = undefined;
- form.$name = $interpolate(attrs.name || attrs.ngForm || '')($scope);
+ form.$name = attrs.name || attrs.ngForm;
form.$dirty = false;
form.$pristine = true;
form.$valid = true;
form.$invalid = false;
- form.$submitted = false;
parentForm.$addControl(form);
- /**
- * @ngdoc method
- * @name form.FormController#$rollbackViewValue
- *
- * @description
- * Rollback all form controls pending updates 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 typically needed by the reset button of
- * a form that uses `ng-model-options` to pend updates.
- */
- form.$rollbackViewValue = function() {
- forEach(controls, function(control) {
- control.$rollbackViewValue();
- });
- };
+ // Setup initial state of the control
+ element.addClass(PRISTINE_CLASS);
+ toggleValidCss(true);
- /**
- * @ngdoc method
- * @name form.FormController#$commitViewValue
- *
- * @description
- * Commit all form controls pending updates 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.
- */
- form.$commitViewValue = function() {
- forEach(controls, function(control) {
- control.$commitViewValue();
- });
- };
+ // convenience method for easy toggling of classes
+ function toggleValidCss(isValid, validationErrorKey) {
+ validationErrorKey = validationErrorKey ? '-' + snake_case(validationErrorKey, '-') : '';
+ $animate.setClass(element,
+ (isValid ? VALID_CLASS : INVALID_CLASS) + validationErrorKey,
+ (isValid ? INVALID_CLASS : VALID_CLASS) + validationErrorKey);
+ }
/**
* @ngdoc method
@@ -18254,17 +16315,6 @@ function FormController(element, attrs, $scope, $animate, $interpolate) {
}
};
- // Private API: rename a form control
- form.$$renameControl = function(control, newName) {
- var oldName = control.$name;
-
- if (form[oldName] === control) {
- delete form[oldName];
- }
- form[newName] = control;
- control.$name = newName;
- };
-
/**
* @ngdoc method
* @name form.FormController#$removeControl
@@ -18278,20 +16328,13 @@ function FormController(element, attrs, $scope, $animate, $interpolate) {
if (control.$name && form[control.$name] === control) {
delete form[control.$name];
}
- forEach(form.$pending, function(value, name) {
- form.$setValidity(name, null, control);
- });
- forEach(form.$error, function(value, name) {
- form.$setValidity(name, null, control);
- });
- forEach(form.$$success, function(value, name) {
- form.$setValidity(name, null, control);
+ forEach(errors, function(queue, validationToken) {
+ form.$setValidity(validationToken, true, control);
});
arrayRemove(controls, control);
};
-
/**
* @ngdoc method
* @name form.FormController#$setValidity
@@ -18301,33 +16344,43 @@ function FormController(element, attrs, $scope, $animate, $interpolate) {
*
* This method will also propagate to parent forms.
*/
- addSetValidityMethod({
- ctrl: this,
- $element: element,
- 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);
+ form.$setValidity = function(validationToken, isValid, control) {
+ var queue = errors[validationToken];
+
+ if (isValid) {
+ if (queue) {
+ arrayRemove(queue, control);
+ if (!queue.length) {
+ invalidCount--;
+ if (!invalidCount) {
+ toggleValidCss(isValid);
+ form.$valid = true;
+ form.$invalid = false;
+ }
+ errors[validationToken] = false;
+ toggleValidCss(true, validationToken);
+ parentForm.$setValidity(validationToken, true, form);
}
}
- },
- unset: function(object, property, controller) {
- var list = object[property];
- if (!list) {
- return;
+
+ } else {
+ if (!invalidCount) {
+ toggleValidCss(isValid);
}
- arrayRemove(list, controller);
- if (list.length === 0) {
- delete object[property];
+ if (queue) {
+ if (includes(queue, control)) return;
+ } else {
+ errors[validationToken] = queue = [];
+ invalidCount++;
+ toggleValidCss(false, validationToken);
+ parentForm.$setValidity(validationToken, false, form);
}
- },
- parentForm: parentForm,
- $animate: $animate
- });
+ queue.push(control);
+
+ form.$valid = false;
+ form.$invalid = true;
+ }
+ };
/**
* @ngdoc method
@@ -18361,49 +16414,18 @@ function FormController(element, attrs, $scope, $animate, $interpolate) {
* Setting a form back to a pristine state is often useful when we want to 'reuse' a form after
* saving or resetting it.
*/
- form.$setPristine = function() {
- $animate.setClass(element, PRISTINE_CLASS, DIRTY_CLASS + ' ' + SUBMITTED_CLASS);
+ form.$setPristine = function () {
+ $animate.removeClass(element, DIRTY_CLASS);
+ $animate.addClass(element, PRISTINE_CLASS);
form.$dirty = false;
form.$pristine = true;
- form.$submitted = false;
forEach(controls, function(control) {
control.$setPristine();
});
};
-
- /**
- * @ngdoc method
- * @name form.FormController#$setUntouched
- *
- * @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).
- *
- * Setting a form controls back to their untouched state is often useful when setting the form
- * back to its pristine state.
- */
- form.$setUntouched = function() {
- forEach(controls, function(control) {
- control.$setUntouched();
- });
- };
-
- /**
- * @ngdoc method
- * @name form.FormController#$setSubmitted
- *
- * @description
- * Sets the form to its submitted state.
- */
- form.$setSubmitted = function() {
- $animate.addClass(element, SUBMITTED_CLASS);
- form.$submitted = true;
- parentForm.$setSubmitted();
- };
}
+
/**
* @ngdoc directive
* @name ngForm
@@ -18452,7 +16474,6 @@ function FormController(element, attrs, $scope, $animate, $interpolate) {
* - `ng-invalid` is set if the form is invalid.
* - `ng-pristine` is set if the form is pristine.
* - `ng-dirty` is set if the form is dirty.
- * - `ng-submitted` is set if the form was submitted.
*
* Keep in mind that ngAnimate can detect each of these classes when added and removed.
*
@@ -18486,9 +16507,6 @@ function FormController(element, attrs, $scope, $animate, $interpolate) {
* hitting enter in any of the input fields will trigger the click handler on the *first* button or
* input[type=submit] (`ngClick`) *and* a submit handler on the enclosing form (`ngSubmit`)
*
- * Any pending `ngModelOptions` changes will take place immediately when an enclosing form is
- * submitted. Note that `ngClick` events will occur before the model is updated. Use `ngSubmit`
- * to have access to the updated model.
*
* ## Animation Hooks
*
@@ -18575,60 +16593,48 @@ var formDirectiveFactory = function(isNgForm) {
name: 'form',
restrict: isNgForm ? 'EAC' : 'E',
controller: FormController,
- compile: function ngFormCompile(formElement) {
- // Setup initial state of the control
- formElement.addClass(PRISTINE_CLASS).addClass(VALID_CLASS);
-
+ compile: function() {
return {
- pre: function ngFormPreLink(scope, formElement, attr, controller) {
- // if `action` attr is not present on the form, prevent the default action (submission)
- if (!('action' in attr)) {
+ pre: function(scope, formElement, attr, controller) {
+ if (!attr.action) {
// we can't use jq events because if a form is destroyed during submission the default
// action is not prevented. see #1238
//
// IE 9 is not affected because it doesn't fire a submit event and try to do a full
// page reload if the form was destroyed by submission of the form via a click handler
// on a button in the form. Looks like an IE9 specific bug.
- var handleFormSubmission = function(event) {
- scope.$apply(function() {
- controller.$commitViewValue();
- controller.$setSubmitted();
- });
-
- event.preventDefault();
+ var preventDefaultListener = function(event) {
+ event.preventDefault
+ ? event.preventDefault()
+ : event.returnValue = false; // IE
};
- addEventListenerFn(formElement[0], 'submit', handleFormSubmission);
+ addEventListenerFn(formElement[0], 'submit', preventDefaultListener);
// unregister the preventDefault listener so that we don't not leak memory but in a
// way that will achieve the prevention of the default action.
formElement.on('$destroy', function() {
$timeout(function() {
- removeEventListenerFn(formElement[0], 'submit', handleFormSubmission);
+ removeEventListenerFn(formElement[0], 'submit', preventDefaultListener);
}, 0, false);
});
}
- var parentFormCtrl = controller.$$parentForm,
- alias = controller.$name;
+ var parentFormCtrl = formElement.parent().controller('form'),
+ alias = attr.name || attr.ngForm;
if (alias) {
- setter(scope, null, alias, controller, alias);
- attr.$observe(attr.name ? 'name' : 'ngForm', function(newValue) {
- if (alias === newValue) return;
- setter(scope, null, alias, undefined, alias);
- alias = newValue;
- setter(scope, null, alias, controller, alias);
- parentFormCtrl.$$renameControl(controller, alias);
+ setter(scope, alias, controller, alias);
+ }
+ if (parentFormCtrl) {
+ formElement.on('$destroy', function() {
+ parentFormCtrl.$removeControl(controller);
+ if (alias) {
+ setter(scope, alias, undefined, alias);
+ }
+ extend(controller, nullFormCtrl); //stop propagating child destruction handlers upwards
});
}
- formElement.on('$destroy', function() {
- parentFormCtrl.$removeControl(controller);
- if (alias) {
- setter(scope, null, alias, undefined, alias);
- }
- extend(controller, nullFormCtrl); //stop propagating child destruction handlers upwards
- });
}
};
}
@@ -18641,25 +16647,15 @@ var formDirectiveFactory = function(isNgForm) {
var formDirective = formDirectiveFactory();
var ngFormDirective = formDirectiveFactory(true);
-/* global VALID_CLASS: false,
- INVALID_CLASS: false,
- PRISTINE_CLASS: false,
- DIRTY_CLASS: false,
- UNTOUCHED_CLASS: false,
- TOUCHED_CLASS: false,
- $ngModelMinErr: false,
+/* global VALID_CLASS: true,
+ INVALID_CLASS: true,
+ PRISTINE_CLASS: true,
+ DIRTY_CLASS: true
*/
-// Regex code is obtained from SO: https://stackoverflow.com/questions/3143070/javascript-regex-iso-datetime#answer-3143231
-var ISO_DATE_REGEXP = /\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+([+-][0-2]\d:[0-5]\d|Z)/;
var URL_REGEXP = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/;
var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
var NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))\s*$/;
-var DATE_REGEXP = /^(\d{4})-(\d{2})-(\d{2})$/;
-var DATETIMELOCAL_REGEXP = /^(\d{4})-(\d\d)-(\d\d)T(\d\d):(\d\d)(?::(\d\d)(\.\d{1,3})?)?$/;
-var WEEK_REGEXP = /^(\d{4})-W(\d\d)$/;
-var MONTH_REGEXP = /^(\d{4})-(\d\d)$/;
-var TIME_REGEXP = /^(\d\d):(\d\d)(?::(\d\d)(\.\d{1,3})?)?$/;
var inputType = {
@@ -18670,6 +16666,7 @@ var inputType = {
* @description
* Standard HTML text input with angular data binding, inherited by most of the `input` elements.
*
+ * *NOTE* Not every feature offered is available for all input types.
*
* @param {string} ngModel Assignable angular expression to data-bind to.
* @param {string=} name Property name of the form under which the control is published.
@@ -18680,16 +16677,10 @@ var inputType = {
* @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 value 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 is 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$')`.
+ * maxlength.
+ * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the
+ * RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for
+ * patterns defined as scope expressions.
* @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.
@@ -18702,21 +16693,19 @@ var inputType = {
- var text = element(by.binding('example.text'));
+ var text = element(by.binding('text'));
var valid = element(by.binding('myForm.input.$valid'));
- var input = element(by.model('example.text'));
+ var input = element(by.model('text'));
it('should initialize to model', function() {
expect(text.getText()).toContain('guest');
@@ -18752,473 +16741,6 @@ var inputType = {
*/
'text': textInputType,
- /**
- * @ngdoc input
- * @name input[date]
- *
- * @description
- * Input with date validation and transformation. In browsers that do not yet support
- * the HTML5 date input, a text element will be used. In that case, text must be entered in a valid ISO-8601
- * date format (yyyy-MM-dd), for example: `2009-01-06`. Since many
- * modern browsers do not yet support this input type, it is important to provide cues to users on the
- * expected input format via a placeholder or label.
- *
- * The model must always be a Date object, otherwise Angular will throw an error.
- * Invalid `Date` objects (dates whose `getTime()` is `NaN`) will be rendered as an empty string.
- *
- * The timezone to be used to read/write the `Date` instance in the model can be defined using
- * {@link ng.directive:ngModelOptions ngModelOptions}. By default, this is the timezone of the browser.
- *
- * @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 error key if the value entered is less than `min`. This must be a
- * valid ISO date string (yyyy-MM-dd).
- * @param {string=} max Sets the `max` validation error key if the value entered is greater than `max`. This must be
- * a valid ISO date string (yyyy-MM-dd).
- * @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 {string=} ngChange Angular expression to be executed when input changes due to user
- * interaction with the input element.
- *
- * @example
-
-
-
-
-
-
- var value = element(by.binding('example.value | date: "yyyy-MM-dd"'));
- var valid = element(by.binding('myForm.input.$valid'));
- var input = element(by.model('example.value'));
-
- // currently protractor/webdriver does not support
- // sending keys to all known HTML5 input controls
- // for various browsers (see https://github.com/angular/protractor/issues/562).
- function setInput(val) {
- // set the value of the element and force validation.
- var scr = "var ipt = document.getElementById('exampleInput'); " +
- "ipt.value = '" + val + "';" +
- "angular.element(ipt).scope().$apply(function(s) { s.myForm[ipt.name].$setViewValue('" + val + "'); });";
- browser.executeScript(scr);
- }
-
- it('should initialize to model', function() {
- expect(value.getText()).toContain('2013-10-22');
- expect(valid.getText()).toContain('myForm.input.$valid = true');
- });
-
- it('should be invalid if empty', function() {
- setInput('');
- expect(value.getText()).toEqual('value =');
- expect(valid.getText()).toContain('myForm.input.$valid = false');
- });
-
- it('should be invalid if over max', function() {
- setInput('2015-01-01');
- expect(value.getText()).toContain('');
- expect(valid.getText()).toContain('myForm.input.$valid = false');
- });
-
-
- */
- 'date': createDateInputType('date', DATE_REGEXP,
- createDateParser(DATE_REGEXP, ['yyyy', 'MM', 'dd']),
- 'yyyy-MM-dd'),
-
- /**
- * @ngdoc input
- * @name input[datetime-local]
- *
- * @description
- * Input with datetime validation and transformation. In browsers that do not yet support
- * the HTML5 date input, a text element will be used. In that case, the text must be entered in a valid ISO-8601
- * local datetime format (yyyy-MM-ddTHH:mm:ss), for example: `2010-12-28T14:57:00`.
- *
- * The model must always be a Date object, otherwise Angular will throw an error.
- * Invalid `Date` objects (dates whose `getTime()` is `NaN`) will be rendered as an empty string.
- *
- * The timezone to be used to read/write the `Date` instance in the model can be defined using
- * {@link ng.directive:ngModelOptions ngModelOptions}. By default, this is the timezone of the browser.
- *
- * @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 error key if the value entered is less than `min`. This must be a
- * valid ISO datetime format (yyyy-MM-ddTHH:mm:ss).
- * @param {string=} max Sets the `max` validation error key if the value entered is greater than `max`. This must be
- * a valid ISO datetime format (yyyy-MM-ddTHH:mm:ss).
- * @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 {string=} ngChange Angular expression to be executed when input changes due to user
- * interaction with the input element.
- *
- * @example
-
-
-
-
-
-
- var value = element(by.binding('example.value | date: "yyyy-MM-ddTHH:mm:ss"'));
- var valid = element(by.binding('myForm.input.$valid'));
- var input = element(by.model('example.value'));
-
- // currently protractor/webdriver does not support
- // sending keys to all known HTML5 input controls
- // for various browsers (https://github.com/angular/protractor/issues/562).
- function setInput(val) {
- // set the value of the element and force validation.
- var scr = "var ipt = document.getElementById('exampleInput'); " +
- "ipt.value = '" + val + "';" +
- "angular.element(ipt).scope().$apply(function(s) { s.myForm[ipt.name].$setViewValue('" + val + "'); });";
- browser.executeScript(scr);
- }
-
- it('should initialize to model', function() {
- expect(value.getText()).toContain('2010-12-28T14:57:00');
- expect(valid.getText()).toContain('myForm.input.$valid = true');
- });
-
- it('should be invalid if empty', function() {
- setInput('');
- expect(value.getText()).toEqual('value =');
- expect(valid.getText()).toContain('myForm.input.$valid = false');
- });
-
- it('should be invalid if over max', function() {
- setInput('2015-01-01T23:59:00');
- expect(value.getText()).toContain('');
- expect(valid.getText()).toContain('myForm.input.$valid = false');
- });
-
-
- */
- 'datetime-local': createDateInputType('datetimelocal', DATETIMELOCAL_REGEXP,
- createDateParser(DATETIMELOCAL_REGEXP, ['yyyy', 'MM', 'dd', 'HH', 'mm', 'ss', 'sss']),
- 'yyyy-MM-ddTHH:mm:ss.sss'),
-
- /**
- * @ngdoc input
- * @name input[time]
- *
- * @description
- * Input with time validation and transformation. In browsers that do not yet support
- * the HTML5 date input, a text element will be used. In that case, the text must be entered in a valid ISO-8601
- * local time format (HH:mm:ss), for example: `14:57:00`. Model must be a Date object. This binding will always output a
- * Date object to the model of January 1, 1970, or local date `new Date(1970, 0, 1, HH, mm, ss)`.
- *
- * The model must always be a Date object, otherwise Angular will throw an error.
- * Invalid `Date` objects (dates whose `getTime()` is `NaN`) will be rendered as an empty string.
- *
- * The timezone to be used to read/write the `Date` instance in the model can be defined using
- * {@link ng.directive:ngModelOptions ngModelOptions}. By default, this is the timezone of the browser.
- *
- * @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 error key if the value entered is less than `min`. This must be a
- * valid ISO time format (HH:mm:ss).
- * @param {string=} max Sets the `max` validation error key if the value entered is greater than `max`. This must be a
- * valid ISO time format (HH:mm:ss).
- * @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 {string=} ngChange Angular expression to be executed when input changes due to user
- * interaction with the input element.
- *
- * @example
-
-
-
-
-
-
- var value = element(by.binding('example.value | date: "HH:mm:ss"'));
- var valid = element(by.binding('myForm.input.$valid'));
- var input = element(by.model('example.value'));
-
- // currently protractor/webdriver does not support
- // sending keys to all known HTML5 input controls
- // for various browsers (https://github.com/angular/protractor/issues/562).
- function setInput(val) {
- // set the value of the element and force validation.
- var scr = "var ipt = document.getElementById('exampleInput'); " +
- "ipt.value = '" + val + "';" +
- "angular.element(ipt).scope().$apply(function(s) { s.myForm[ipt.name].$setViewValue('" + val + "'); });";
- browser.executeScript(scr);
- }
-
- it('should initialize to model', function() {
- expect(value.getText()).toContain('14:57:00');
- expect(valid.getText()).toContain('myForm.input.$valid = true');
- });
-
- it('should be invalid if empty', function() {
- setInput('');
- expect(value.getText()).toEqual('value =');
- expect(valid.getText()).toContain('myForm.input.$valid = false');
- });
-
- it('should be invalid if over max', function() {
- setInput('23:59:00');
- expect(value.getText()).toContain('');
- expect(valid.getText()).toContain('myForm.input.$valid = false');
- });
-
-
- */
- 'time': createDateInputType('time', TIME_REGEXP,
- createDateParser(TIME_REGEXP, ['HH', 'mm', 'ss', 'sss']),
- 'HH:mm:ss.sss'),
-
- /**
- * @ngdoc input
- * @name input[week]
- *
- * @description
- * Input with week-of-the-year validation and transformation to Date. In browsers that do not yet support
- * the HTML5 week input, a text element will be used. In that case, the text must be entered in a valid ISO-8601
- * week format (yyyy-W##), for example: `2013-W02`.
- *
- * The model must always be a Date object, otherwise Angular will throw an error.
- * Invalid `Date` objects (dates whose `getTime()` is `NaN`) will be rendered as an empty string.
- *
- * The timezone to be used to read/write the `Date` instance in the model can be defined using
- * {@link ng.directive:ngModelOptions ngModelOptions}. By default, this is the timezone of the browser.
- *
- * @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 error key if the value entered is less than `min`. This must be a
- * valid ISO week format (yyyy-W##).
- * @param {string=} max Sets the `max` validation error key if the value entered is greater than `max`. This must be
- * a valid ISO week format (yyyy-W##).
- * @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 {string=} ngChange Angular expression to be executed when input changes due to user
- * interaction with the input element.
- *
- * @example
-
-
-
-
-
-
- var value = element(by.binding('example.value | date: "yyyy-Www"'));
- var valid = element(by.binding('myForm.input.$valid'));
- var input = element(by.model('example.value'));
-
- // currently protractor/webdriver does not support
- // sending keys to all known HTML5 input controls
- // for various browsers (https://github.com/angular/protractor/issues/562).
- function setInput(val) {
- // set the value of the element and force validation.
- var scr = "var ipt = document.getElementById('exampleInput'); " +
- "ipt.value = '" + val + "';" +
- "angular.element(ipt).scope().$apply(function(s) { s.myForm[ipt.name].$setViewValue('" + val + "'); });";
- browser.executeScript(scr);
- }
-
- it('should initialize to model', function() {
- expect(value.getText()).toContain('2013-W01');
- expect(valid.getText()).toContain('myForm.input.$valid = true');
- });
-
- it('should be invalid if empty', function() {
- setInput('');
- expect(value.getText()).toEqual('value =');
- expect(valid.getText()).toContain('myForm.input.$valid = false');
- });
-
- it('should be invalid if over max', function() {
- setInput('2015-W01');
- expect(value.getText()).toContain('');
- expect(valid.getText()).toContain('myForm.input.$valid = false');
- });
-
-
- */
- 'week': createDateInputType('week', WEEK_REGEXP, weekParser, 'yyyy-Www'),
-
- /**
- * @ngdoc input
- * @name input[month]
- *
- * @description
- * Input with month validation and transformation. In browsers that do not yet support
- * the HTML5 month input, a text element will be used. In that case, the text must be entered in a valid ISO-8601
- * month format (yyyy-MM), for example: `2009-01`.
- *
- * The model must always be a Date object, otherwise Angular will throw an error.
- * Invalid `Date` objects (dates whose `getTime()` is `NaN`) will be rendered as an empty string.
- * If the model is not set to the first of the month, the next view to model update will set it
- * to the first of the month.
- *
- * The timezone to be used to read/write the `Date` instance in the model can be defined using
- * {@link ng.directive:ngModelOptions ngModelOptions}. By default, this is the timezone of the browser.
- *
- * @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 error key if the value entered is less than `min`. This must be
- * a valid ISO month format (yyyy-MM).
- * @param {string=} max Sets the `max` validation error key if the value entered is greater than `max`. This must
- * be a valid ISO month format (yyyy-MM).
- * @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 {string=} ngChange Angular expression to be executed when input changes due to user
- * interaction with the input element.
- *
- * @example
-
-
-
-
-
-
- var value = element(by.binding('example.value | date: "yyyy-MM"'));
- var valid = element(by.binding('myForm.input.$valid'));
- var input = element(by.model('example.value'));
-
- // currently protractor/webdriver does not support
- // sending keys to all known HTML5 input controls
- // for various browsers (https://github.com/angular/protractor/issues/562).
- function setInput(val) {
- // set the value of the element and force validation.
- var scr = "var ipt = document.getElementById('exampleInput'); " +
- "ipt.value = '" + val + "';" +
- "angular.element(ipt).scope().$apply(function(s) { s.myForm[ipt.name].$setViewValue('" + val + "'); });";
- browser.executeScript(scr);
- }
-
- it('should initialize to model', function() {
- expect(value.getText()).toContain('2013-10');
- expect(valid.getText()).toContain('myForm.input.$valid = true');
- });
-
- it('should be invalid if empty', function() {
- setInput('');
- expect(value.getText()).toEqual('value =');
- expect(valid.getText()).toContain('myForm.input.$valid = false');
- });
-
- it('should be invalid if over max', function() {
- setInput('2015-01');
- expect(value.getText()).toContain('');
- expect(valid.getText()).toContain('myForm.input.$valid = false');
- });
-
-
- */
- 'month': createDateInputType('month', MONTH_REGEXP,
- createDateParser(MONTH_REGEXP, ['yyyy', 'MM']),
- 'yyyy-MM'),
/**
* @ngdoc input
@@ -19228,8 +16750,6 @@ var inputType = {
* Text input with number validation and transformation. Sets the `number` validation
* error if not a valid number.
*
- * The model must always be a number, otherwise Angular will throw an error.
- *
* @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 error key if the value entered is less than `min`.
@@ -19241,16 +16761,10 @@ var inputType = {
* @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 value 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 is 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$')`.
+ * maxlength.
+ * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the
+ * RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for
+ * patterns defined as scope expressions.
* @param {string=} ngChange Angular expression to be executed when input changes due to user
* interaction with the input element.
*
@@ -19260,19 +16774,17 @@ var inputType = {
- var value = element(by.binding('example.value'));
+ var value = element(by.binding('value'));
var valid = element(by.binding('myForm.input.$valid'));
- var input = element(by.model('example.value'));
+ var input = element(by.model('value'));
it('should initialize to model', function() {
expect(value.getText()).toContain('12');
@@ -19316,12 +16828,6 @@ var inputType = {
* 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.
@@ -19331,16 +16837,10 @@ var inputType = {
* @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 value 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 is 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$')`.
+ * maxlength.
+ * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the
+ * RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for
+ * patterns defined as scope expressions.
* @param {string=} ngChange Angular expression to be executed when input changes due to user
* interaction with the input element.
*
@@ -19350,18 +16850,16 @@ var inputType = {
- var text = element(by.binding('url.text'));
+ var text = element(by.binding('text'));
var valid = element(by.binding('myForm.input.$valid'));
- var input = element(by.model('url.text'));
+ var input = element(by.model('text'));
it('should initialize to model', function() {
expect(text.getText()).toContain('http://google.com');
@@ -19407,12 +16905,6 @@ var inputType = {
* 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.
@@ -19422,16 +16914,10 @@ var inputType = {
* @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 value 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 is 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$')`.
+ * maxlength.
+ * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the
+ * RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for
+ * patterns defined as scope expressions.
* @param {string=} ngChange Angular expression to be executed when input changes due to user
* interaction with the input element.
*
@@ -19441,18 +16927,16 @@ var inputType = {
- var text = element(by.binding('email.text'));
+ var text = element(by.binding('text'));
var valid = element(by.binding('myForm.input.$valid'));
- var input = element(by.model('email.text'));
+ var input = element(by.model('text'));
it('should initialize to model', function() {
expect(text.getText()).toContain('me@example.com');
@@ -19510,9 +16994,7 @@ var inputType = {
Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
it('should change state', function() {
- var color = element(by.binding('color.name'));
+ var color = element(by.binding('color'));
expect(color.getText()).toContain('blue');
- element.all(by.model('color.name')).get(0).click();
+ element.all(by.model('color')).get(0).click();
expect(color.getText()).toContain('red');
});
@@ -19552,8 +17034,8 @@ var inputType = {
*
* @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=} ngTrueValue The value to which the expression should be set when selected.
+ * @param {string=} 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.
*
@@ -19563,30 +17045,28 @@ var inputType = {
it('should change state', function() {
- var value1 = element(by.binding('checkboxModel.value1'));
- var value2 = element(by.binding('checkboxModel.value2'));
+ var value1 = element(by.binding('value1'));
+ var value2 = element(by.binding('value2'));
expect(value1.getText()).toContain('true');
expect(value2.getText()).toContain('YES');
- element(by.model('checkboxModel.value1')).click();
- element(by.model('checkboxModel.value2')).click();
+ element(by.model('value1')).click();
+ element(by.model('value2')).click();
expect(value1.getText()).toContain('false');
expect(value2.getText()).toContain('NO');
@@ -19603,19 +17083,50 @@ var inputType = {
'file': noop
};
-function stringBasedInputType(ctrl) {
- ctrl.$formatters.push(function(value) {
- return ctrl.$isEmpty(value) ? value : value.toString();
- });
+// A helper function to call $setValidity and return the value / undefined,
+// a pattern that is repeated a lot in the input validation logic.
+function validate(ctrl, validatorName, validity, value){
+ ctrl.$setValidity(validatorName, validity);
+ return validity ? value : undefined;
+}
+
+function testFlags(validity, flags) {
+ var i, flag;
+ if (flags) {
+ for (i=0; i= minVal;
+ if (pattern) {
+ var validateRegex = function(regexp, value) {
+ return validate(ctrl, 'pattern', ctrl.$isEmpty(value) || regexp.test(value), value);
+ };
+ match = pattern.match(/^\/(.*)\/([gim]*)$/);
+ if (match) {
+ pattern = new RegExp(match[1], match[2]);
+ patternValidator = function(value) {
+ return validateRegex(pattern, value);
};
- attr.$observe('min', function(val) {
- minVal = parseObservedDateValue(val);
- ctrl.$validate();
- });
- }
+ } else {
+ patternValidator = function(value) {
+ var patternObj = scope.$eval(pattern);
- if (isDefined(attr.max) || attr.ngMax) {
- var maxVal;
- ctrl.$validators.max = function(value) {
- return !isValidDate(value) || isUndefined(maxVal) || parseDate(value) <= maxVal;
+ if (!patternObj || !patternObj.test) {
+ throw minErr('ngPattern')('noregexp',
+ 'Expected {0} to be a RegExp but was {1}. Element: {2}', pattern,
+ patternObj, startingTag(element));
+ }
+ return validateRegex(patternObj, value);
};
- attr.$observe('max', function(val) {
- maxVal = parseObservedDateValue(val);
- ctrl.$validate();
- });
}
- function isValidDate(value) {
- // Invalid Date: getTime() returns NaN
- return value && !(value.getTime && value.getTime() !== value.getTime());
- }
+ ctrl.$formatters.push(patternValidator);
+ ctrl.$parsers.push(patternValidator);
+ }
- function parseObservedDateValue(val) {
- return isDefined(val) ? (isDate(val) ? val : parseDate(val)) : undefined;
- }
- };
-}
+ // min length validator
+ if (attr.ngMinlength) {
+ var minlength = int(attr.ngMinlength);
+ var minLengthValidator = function(value) {
+ return validate(ctrl, 'minlength', ctrl.$isEmpty(value) || value.length >= minlength, value);
+ };
-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) || {};
- // Detect bug in FF35 for input[email] (https://bugzilla.mozilla.org/show_bug.cgi?id=1064430):
- // - also sets validity.badInput (should only be validity.typeMismatch).
- // - see http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#e-mail-state-(type=email)
- // - can ignore this case as we can still read out the erroneous email...
- return validity.badInput && !validity.typeMismatch ? undefined : value;
- });
+ ctrl.$parsers.push(minLengthValidator);
+ ctrl.$formatters.push(minLengthValidator);
+ }
+
+ // max length validator
+ if (attr.ngMaxlength) {
+ var maxlength = int(attr.ngMaxlength);
+ var maxLengthValidator = function(value) {
+ return validate(ctrl, 'maxlength', ctrl.$isEmpty(value) || value.length <= maxlength, value);
+ };
+
+ ctrl.$parsers.push(maxLengthValidator);
+ ctrl.$formatters.push(maxLengthValidator);
}
}
+var numberBadFlags = ['badInput'];
+
function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
- badInputChecker(scope, element, attr, ctrl);
- baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
+ textInputType(scope, element, attr, ctrl, $sniffer, $browser);
- ctrl.$$parserName = 'number';
ctrl.$parsers.push(function(value) {
- if (ctrl.$isEmpty(value)) return null;
- if (NUMBER_REGEXP.test(value)) return parseFloat(value);
- return undefined;
+ var empty = ctrl.$isEmpty(value);
+ if (empty || NUMBER_REGEXP.test(value)) {
+ ctrl.$setValidity('number', true);
+ return value === '' ? null : (empty ? value : parseFloat(value));
+ } else {
+ ctrl.$setValidity('number', false);
+ return undefined;
+ }
});
+ addNativeHtml5Validators(ctrl, 'number', numberBadFlags, null, ctrl.$$validityState);
+
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;
+ return ctrl.$isEmpty(value) ? '' : '' + value;
});
- if (isDefined(attr.min) || attr.ngMin) {
- var minVal;
- ctrl.$validators.min = function(value) {
- return ctrl.$isEmpty(value) || isUndefined(minVal) || value >= minVal;
+ if (attr.min) {
+ var minValidator = function(value) {
+ var min = parseFloat(attr.min);
+ return validate(ctrl, 'min', ctrl.$isEmpty(value) || value >= min, value);
};
- attr.$observe('min', function(val) {
- if (isDefined(val) && !isNumber(val)) {
- val = parseFloat(val, 10);
- }
- minVal = isNumber(val) && !isNaN(val) ? val : undefined;
- // TODO(matsko): implement validateLater to reduce number of validations
- ctrl.$validate();
- });
+ ctrl.$parsers.push(minValidator);
+ ctrl.$formatters.push(minValidator);
}
- if (isDefined(attr.max) || attr.ngMax) {
- var maxVal;
- ctrl.$validators.max = function(value) {
- return ctrl.$isEmpty(value) || isUndefined(maxVal) || value <= maxVal;
+ if (attr.max) {
+ var maxValidator = function(value) {
+ var max = parseFloat(attr.max);
+ return validate(ctrl, 'max', ctrl.$isEmpty(value) || value <= max, value);
};
- attr.$observe('max', function(val) {
- if (isDefined(val) && !isNumber(val)) {
- val = parseFloat(val, 10);
- }
- maxVal = isNumber(val) && !isNaN(val) ? val : undefined;
- // TODO(matsko): implement validateLater to reduce number of validations
- ctrl.$validate();
- });
+ ctrl.$parsers.push(maxValidator);
+ ctrl.$formatters.push(maxValidator);
}
+
+ ctrl.$formatters.push(function(value) {
+ return validate(ctrl, 'number', ctrl.$isEmpty(value) || isNumber(value), 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);
+ textInputType(scope, element, attr, ctrl, $sniffer, $browser);
- ctrl.$$parserName = 'url';
- ctrl.$validators.url = function(modelValue, viewValue) {
- var value = modelValue || viewValue;
- return ctrl.$isEmpty(value) || URL_REGEXP.test(value);
+ var urlValidator = function(value) {
+ return validate(ctrl, 'url', ctrl.$isEmpty(value) || URL_REGEXP.test(value), value);
};
+
+ ctrl.$formatters.push(urlValidator);
+ ctrl.$parsers.push(urlValidator);
}
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);
+ textInputType(scope, element, attr, ctrl, $sniffer, $browser);
- ctrl.$$parserName = 'email';
- ctrl.$validators.email = function(modelValue, viewValue) {
- var value = modelValue || viewValue;
- return ctrl.$isEmpty(value) || EMAIL_REGEXP.test(value);
+ var emailValidator = function(value) {
+ return validate(ctrl, 'email', ctrl.$isEmpty(value) || EMAIL_REGEXP.test(value), value);
};
+
+ ctrl.$formatters.push(emailValidator);
+ ctrl.$parsers.push(emailValidator);
}
function radioInputType(scope, element, attr, ctrl) {
@@ -19956,13 +17349,13 @@ function radioInputType(scope, element, attr, ctrl) {
element.attr('name', nextUid());
}
- var listener = function(ev) {
+ element.on('click', function() {
if (element[0].checked) {
- ctrl.$setViewValue(attr.value, ev && ev.type);
+ scope.$apply(function() {
+ ctrl.$setViewValue(attr.value);
+ });
}
- };
-
- element.on('click', listener);
+ });
ctrl.$render = function() {
var value = attr.value;
@@ -19972,42 +17365,30 @@ function radioInputType(scope, element, attr, ctrl) {
attr.$observe('value', ctrl.$render);
}
-function parseConstantExpr($parse, context, name, expression, fallback) {
- var parseFn;
- if (isDefined(expression)) {
- parseFn = $parse(expression);
- if (!parseFn.constant) {
- throw minErr('ngModel')('constexpr', 'Expected constant expression for `{0}`, but saw ' +
- '`{1}`.', name, expression);
- }
- return parseFn(context);
- }
- return fallback;
-}
+function checkboxInputType(scope, element, attr, ctrl) {
+ var trueValue = attr.ngTrueValue,
+ falseValue = attr.ngFalseValue;
-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);
+ if (!isString(trueValue)) trueValue = true;
+ if (!isString(falseValue)) falseValue = false;
- var listener = function(ev) {
- ctrl.$setViewValue(element[0].checked, ev && ev.type);
- };
-
- element.on('click', listener);
+ element.on('click', function() {
+ scope.$apply(function() {
+ ctrl.$setViewValue(element[0].checked);
+ });
+ });
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.
+ // Override the standard `$isEmpty` because a value of `false` means empty in a checkbox.
ctrl.$isEmpty = function(value) {
- return value === false;
+ return value !== trueValue;
};
ctrl.$formatters.push(function(value) {
- return equals(value, trueValue);
+ return value === trueValue;
});
ctrl.$parsers.push(function(value) {
@@ -20035,8 +17416,7 @@ function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filt
* @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.
+ * maxlength.
* @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the
* RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for
* patterns defined as scope expressions.
@@ -20052,14 +17432,10 @@ function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filt
* @restrict E
*
* @description
- * HTML input element control. When used together with {@link ngModel `ngModel`}, it provides data-binding,
- * input state control, and validation.
- * Input control follows HTML5 input types and polyfills the HTML5 validation behavior for older browsers.
+ * HTML input element control with angular data-binding. Input control follows HTML5 input types
+ * and polyfills the HTML5 validation behavior for older browsers.
*
- *
- * **Note:** Not every feature offered is available for all input types.
- * Specifically, data binding and event handling via `ng-model` is unsupported for `input[file]`.
- *
+ * *NOTE* Not every feature offered is available for all input types.
*
* @param {string} ngModel Assignable angular expression to data-bind to.
* @param {string=} name Property name of the form under which the control is published.
@@ -20068,8 +17444,7 @@ function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filt
* @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.
+ * maxlength.
* @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the
* RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for
* patterns defined as scope expressions.
@@ -20113,7 +17488,7 @@ function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filt
- var user = element(by.exactBinding('user'));
+ var user = element(by.binding('{{user}}'));
var userNameValid = element(by.binding('myForm.userName.$valid'));
var lastNameValid = element(by.binding('myForm.lastName.$valid'));
var lastNameError = element(by.binding('myForm.lastName.$error'));
@@ -20167,22 +17542,682 @@ function checkboxInputType(scope, element, attr, ctrl, $sniffer, $browser, $filt
*/
-var inputDirective = ['$browser', '$sniffer', '$filter', '$parse',
- function($browser, $sniffer, $filter, $parse) {
+var inputDirective = ['$browser', '$sniffer', function($browser, $sniffer) {
return {
restrict: 'E',
- require: ['?ngModel'],
- link: {
- pre: function(scope, element, attr, ctrls) {
- if (ctrls[0]) {
- (inputType[lowercase(attr.type)] || inputType.text)(scope, element, attr, ctrls[0], $sniffer,
- $browser, $filter, $parse);
- }
+ require: '?ngModel',
+ link: function(scope, element, attr, ctrl) {
+ if (ctrl) {
+ (inputType[lowercase(attr.type)] || inputType.text)(scope, element, attr, ctrl, $sniffer,
+ $browser);
}
}
};
}];
+var VALID_CLASS = 'ng-valid',
+ INVALID_CLASS = 'ng-invalid',
+ PRISTINE_CLASS = 'ng-pristine',
+ DIRTY_CLASS = 'ng-dirty';
+
+/**
+ * @ngdoc type
+ * @name ngModel.NgModelController
+ *
+ * @property {string} $viewValue Actual string value in the view.
+ * @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 reads value from the DOM. Each function is called, in turn, passing the value
+ through to the next. The last return value is used to populate the model.
+ Used to sanitize / convert the value as well as validation. For validation,
+ the parsers should update the validity state using
+ {@link ngModel.NgModelController#$setValidity $setValidity()},
+ and return `undefined` for invalid values.
+
+ *
+ * @property {Array.} $formatters Array of functions to execute, as a pipeline, whenever
+ the model value changes. Each function is called, in turn, passing the value through to the
+ next. Used to format / convert values for display in the control and validation.
+ * ```js
+ * function formatter(value) {
+ * if (value) {
+ * return value.toUpperCase();
+ * }
+ * }
+ * ngModel.$formatters.push(formatter);
+ * ```
+ *
+ * @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 errors as keys.
+ *
+ * @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.
+ *
+ * @description
+ *
+ * `NgModelController` provides API for the `ng-model` 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.
+ *
+ * ## 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.
+ *
+ * Note that `contenteditable` is an HTML5 attribute, which tells the browser to let the element
+ * contents be edited in place by the user. This will not work on older browsers.
+ *
+ * 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/);
+ });
+
+ *
+ *
+ *
+ */
+var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$parse', '$animate',
+ function($scope, $exceptionHandler, $attr, $element, $parse, $animate) {
+ this.$viewValue = Number.NaN;
+ this.$modelValue = Number.NaN;
+ this.$parsers = [];
+ this.$formatters = [];
+ this.$viewChangeListeners = [];
+ this.$pristine = true;
+ this.$dirty = false;
+ this.$valid = true;
+ this.$invalid = false;
+ this.$name = $attr.name;
+
+ var ngModelGet = $parse($attr.ngModel),
+ ngModelSet = ngModelGet.assign;
+
+ if (!ngModelSet) {
+ throw minErr('ngModel')('nonassign', "Expression '{0}' is non-assignable. Element: {1}",
+ $attr.ngModel, startingTag($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.
+ */
+ this.$render = noop;
+
+ /**
+ * @ngdoc method
+ * @name ngModel.NgModelController#$isEmpty
+ *
+ * @description
+ * This is called when we need to determine if the value of the 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 to the
+ * default. The `checkboxInputType` directive does this because in its case a value of `false`
+ * implies empty.
+ *
+ * @param {*} value Reference to check.
+ * @returns {boolean} True if `value` is empty.
+ */
+ this.$isEmpty = function(value) {
+ return isUndefined(value) || value === '' || value === null || value !== value;
+ };
+
+ var parentForm = $element.inheritedData('$formController') || nullFormCtrl,
+ invalidCount = 0, // used to easily determine if we are valid
+ $error = this.$error = {}; // keep invalid keys here
+
+
+ // Setup initial state of the control
+ $element.addClass(PRISTINE_CLASS);
+ toggleValidCss(true);
+
+ // convenience method for easy toggling of classes
+ function toggleValidCss(isValid, validationErrorKey) {
+ validationErrorKey = validationErrorKey ? '-' + snake_case(validationErrorKey, '-') : '';
+ $animate.removeClass($element, (isValid ? INVALID_CLASS : VALID_CLASS) + validationErrorKey);
+ $animate.addClass($element, (isValid ? VALID_CLASS : INVALID_CLASS) + validationErrorKey);
+ }
+
+ /**
+ * @ngdoc method
+ * @name ngModel.NgModelController#$setValidity
+ *
+ * @description
+ * Change the validity state, and notifies the form when the control changes validity. (i.e. it
+ * does not notify form if given validator is already marked as invalid).
+ *
+ * This method should be called by validators - i.e. the parser or formatter functions.
+ *
+ * @param {string} validationErrorKey Name of the validator. the `validationErrorKey` will assign
+ * to `$error[validationErrorKey]=!isValid` 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`
+ * class and can be bound to as `{{someForm.someControl.$error.myError}}` .
+ * @param {boolean} isValid Whether the current state is valid (true) or invalid (false).
+ */
+ this.$setValidity = function(validationErrorKey, isValid) {
+ // Purposeful use of ! here to cast isValid to boolean in case it is undefined
+ // jshint -W018
+ if ($error[validationErrorKey] === !isValid) return;
+ // jshint +W018
+
+ if (isValid) {
+ if ($error[validationErrorKey]) invalidCount--;
+ if (!invalidCount) {
+ toggleValidCss(true);
+ this.$valid = true;
+ this.$invalid = false;
+ }
+ } else {
+ toggleValidCss(false);
+ this.$invalid = true;
+ this.$valid = false;
+ invalidCount++;
+ }
+
+ $error[validationErrorKey] = !isValid;
+ toggleValidCss(isValid, validationErrorKey);
+
+ parentForm.$setValidity(validationErrorKey, isValid, this);
+ };
+
+ /**
+ * @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).
+ */
+ this.$setPristine = function () {
+ this.$dirty = false;
+ this.$pristine = true;
+ $animate.removeClass($element, DIRTY_CLASS);
+ $animate.addClass($element, PRISTINE_CLASS);
+ };
+
+ /**
+ * @ngdoc method
+ * @name ngModel.NgModelController#$setViewValue
+ *
+ * @description
+ * Update the view value.
+ *
+ * This method should be called when the view value changes, typically from within a DOM event handler.
+ * For example {@link ng.directive:input input} and
+ * {@link ng.directive:select select} directives call it.
+ *
+ * It will update the $viewValue, then pass this value through each of the functions in `$parsers`,
+ * which includes any validators. The value that comes out of this `$parsers` pipeline, be applied to
+ * `$modelValue` and the **expression** specified in the `ng-model` attribute.
+ *
+ * Lastly, all the registered change listeners, in the `$viewChangeListeners` list, are called.
+ *
+ * Note that calling this function does not trigger a `$digest`.
+ *
+ * @param {string} value Value from the view.
+ */
+ this.$setViewValue = function(value) {
+ this.$viewValue = value;
+
+ // change to dirty
+ if (this.$pristine) {
+ this.$dirty = true;
+ this.$pristine = false;
+ $animate.removeClass($element, PRISTINE_CLASS);
+ $animate.addClass($element, DIRTY_CLASS);
+ parentForm.$setDirty();
+ }
+
+ forEach(this.$parsers, function(fn) {
+ value = fn(value);
+ });
+
+ if (this.$modelValue !== value) {
+ this.$modelValue = value;
+ ngModelSet($scope, value);
+ forEach(this.$viewChangeListeners, function(listener) {
+ try {
+ listener();
+ } catch(e) {
+ $exceptionHandler(e);
+ }
+ });
+ }
+ };
+
+ // model -> value
+ var ctrl = this;
+
+ $scope.$watch(function ngModelWatch() {
+ var value = ngModelGet($scope);
+
+ // if scope model value and ngModel value are out of sync
+ if (ctrl.$modelValue !== value) {
+
+ var formatters = ctrl.$formatters,
+ idx = formatters.length;
+
+ ctrl.$modelValue = value;
+ while(idx--) {
+ value = formatters[idx](value);
+ }
+
+ if (ctrl.$viewValue !== value) {
+ ctrl.$viewValue = value;
+ ctrl.$render();
+ }
+ }
+
+ return value;
+ });
+}];
+
+
+/**
+ * @ngdoc directive
+ * @name ngModel
+ *
+ * @element input
+ *
+ * @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, validation errors).
+ * - Setting related css classes on the element (`ng-valid`, `ng-invalid`, `ng-dirty`, `ng-pristine`) 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 ng.directive:select select}
+ * - {@link ng.directive:textarea textarea}
+ *
+ * # 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` is set if the model is valid.
+ * - `ng-invalid` is set if the model is invalid.
+ * - `ng-pristine` is set if the model is pristine.
+ * - `ng-dirty` is set if the model is dirty.
+ *
+ * Keep in mind that ngAnimate can detect each of these classes when added and removed.
+ *
+ * ## Animation Hooks
+ *
+ * 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 are: `.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:
+ *
+ *
+ * //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;
+ * }
+ *
+ *
+ * @example
+ *
+
+
+
+ Update input to see transitions when valid/invalid.
+ Integer is a valid value.
+
+
+
+
+ *
+ */
+var ngModelDirective = function() {
+ return {
+ require: ['ngModel', '^?form'],
+ controller: NgModelController,
+ link: function(scope, element, attr, ctrls) {
+ // notify others, especially parent forms
+
+ var modelCtrl = ctrls[0],
+ formCtrl = ctrls[1] || nullFormCtrl;
+
+ formCtrl.$addControl(modelCtrl);
+
+ scope.$on('$destroy', function() {
+ formCtrl.$removeControl(modelCtrl);
+ });
+ }
+ };
+};
+
+
+/**
+ * @ngdoc directive
+ * @name ngChange
+ *
+ * @description
+ * Evaluate the given expression when the user changes the input.
+ * The expression is evaluated immediately, unlike the JavaScript onchange event
+ * which only triggers at the end of a change (usually, when the user leaves the
+ * form element or presses the return key).
+ * The expression is not evaluated when the value change is coming from the model.
+ *
+ * Note, this directive requires `ngModel` to be present.
+ *
+ * @element input
+ * @param {expression} ngChange {@link guide/expression Expression} to evaluate upon change
+ * in input value.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ *
+ *
+ * Confirmed
+ * debug = {{confirmed}}
+ * counter = {{counter}}
+ *
+ *
+ *
+ * var counter = element(by.binding('counter'));
+ * var debug = element(by.binding('confirmed'));
+ *
+ * it('should evaluate the expression if changing from view', function() {
+ * expect(counter.getText()).toContain('0');
+ *
+ * element(by.id('ng-change-example1')).click();
+ *
+ * expect(counter.getText()).toContain('1');
+ * expect(debug.getText()).toContain('true');
+ * });
+ *
+ * it('should not evaluate the expression if changing from model', function() {
+ * element(by.id('ng-change-example2')).click();
+
+ * expect(counter.getText()).toContain('0');
+ * expect(debug.getText()).toContain('true');
+ * });
+ *
+ *
+ */
+var ngChangeDirective = valueFn({
+ require: 'ngModel',
+ link: function(scope, element, attr, ctrl) {
+ ctrl.$viewChangeListeners.push(function() {
+ scope.$eval(attr.ngChange);
+ });
+ }
+});
+
+
+var requiredDirective = function() {
+ return {
+ require: '?ngModel',
+ link: function(scope, elm, attr, ctrl) {
+ if (!ctrl) return;
+ attr.required = true; // force truthy in case we are on non input element
+
+ var validator = function(value) {
+ if (attr.required && ctrl.$isEmpty(value)) {
+ ctrl.$setValidity('required', false);
+ return;
+ } else {
+ ctrl.$setValidity('required', true);
+ return value;
+ }
+ };
+
+ ctrl.$formatters.push(validator);
+ ctrl.$parsers.unshift(validator);
+
+ attr.$observe('required', function() {
+ validator(ctrl.$viewValue);
+ });
+ }
+ };
+};
+
+
+/**
+ * @ngdoc directive
+ * @name ngList
+ *
+ * @description
+ * Text input that converts between a delimited string and an array of strings. The delimiter
+ * can be a fixed string (by default a comma) or a regular expression.
+ *
+ * @element input
+ * @param {string=} ngList optional delimiter that should be used to split the value. If
+ * specified in form `/something/` then the value will be converted into a regular expression.
+ *
+ * @example
+
+
+
+
+ List:
+
+ Required!
+
+ names = {{names}}
+ myForm.namesInput.$valid = {{myForm.namesInput.$valid}}
+ myForm.namesInput.$error = {{myForm.namesInput.$error}}
+ myForm.$valid = {{myForm.$valid}}
+ myForm.$error.required = {{!!myForm.$error.required}}
+
+
+
+ var listInput = element(by.model('names'));
+ var names = element(by.binding('{{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('["igor","misko","vojta"]');
+ 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'); });
+
+
+ */
+var ngListDirective = function() {
+ return {
+ require: 'ngModel',
+ link: function(scope, element, attr, ctrl) {
+ var match = /\/(.*)\//.exec(attr.ngList),
+ separator = match && new RegExp(match[1]) || attr.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(trim(value));
+ });
+ }
+
+ return list;
+ };
+
+ ctrl.$parsers.push(parse);
+ ctrl.$formatters.push(function(value) {
+ if (isArray(value)) {
+ return value.join(', ');
+ }
+
+ return undefined;
+ });
+
+ // Override the standard $isEmpty because an empty array means the input is empty.
+ ctrl.$isEmpty = function(value) {
+ return !value || !value.length;
+ };
+ }
+ };
+};
var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/;
@@ -20191,17 +18226,12 @@ var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/;
* @name ngValue
*
* @description
- * Binds the given expression to the value of `` or {@link input[radio] `input[radio]`},
- * so that when the element is selected, the {@link ngModel `ngModel`} of that element is set to
- * the bound value.
+ * Binds the given expression to the value of `input[select]` or `input[radio]`, so
+ * that when the element is selected, the `ngModel` of that element is set to the
+ * bound value.
*
- * `ngValue` is useful when dynamically generating lists of radio buttons using
- * {@link ngRepeat `ngRepeat`}, as shown below.
- *
- * Likewise, `ngValue` can be used to generate ` ` elements for
- * the {@link select `select`} element. In that case however, only strings are supported
- * for the `value `attribute, so the resulting `ngModel` will always be a string.
- * Support for `select` models with non-string values is available via `ngOptions`.
+ * `ngValue` is useful when dynamically generating lists of radio buttons using `ng-repeat`, as
+ * shown below.
*
* @element input
* @param {string=} ngValue angular expression, whose value will be bound to the `value` attribute
@@ -20245,7 +18275,6 @@ var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/;
*/
var ngValueDirective = function() {
return {
- restrict: 'A',
priority: 100,
compile: function(tpl, tplAttr) {
if (CONSTANT_VALUE_REGEXP.test(tplAttr.ngValue)) {
@@ -20314,21 +18343,20 @@ var ngValueDirective = function() {
*/
-var ngBindDirective = ['$compile', function($compile) {
- return {
- restrict: 'AC',
- compile: function ngBindCompile(templateElement) {
- $compile.$$addBindingClass(templateElement);
- return function ngBindLink(scope, element, attr) {
- $compile.$$addBindingInfo(element, attr.ngBind);
- element = element[0];
- scope.$watch(attr.ngBind, function ngBindWatchAction(value) {
- element.textContent = value === undefined ? '' : value;
- });
- };
- }
- };
-}];
+var ngBindDirective = ngDirective({
+ compile: function(templateElement) {
+ templateElement.addClass('ng-binding');
+ return function (scope, element, attr) {
+ element.data('$binding', attr.ngBind);
+ scope.$watch(attr.ngBind, function ngBindWatchAction(value) {
+ // We are purposefully using == here rather than === because we want to
+ // catch when value is "null or undefined"
+ // jshint -W041
+ element.text(value == undefined ? '' : value);
+ });
+ };
+ }
+});
/**
@@ -20353,7 +18381,7 @@ var ngBindDirective = ['$compile', function($compile) {
- *
- *
- *
- * Confirmed
- * debug = {{confirmed}}
- * counter = {{counter}}
- *
- *
- *
- * var counter = element(by.binding('counter'));
- * var debug = element(by.binding('confirmed'));
- *
- * it('should evaluate the expression if changing from view', function() {
- * expect(counter.getText()).toContain('0');
- *
- * element(by.id('ng-change-example1')).click();
- *
- * expect(counter.getText()).toContain('1');
- * expect(debug.getText()).toContain('true');
- * });
- *
- * it('should not evaluate the expression if changing from model', function() {
- * element(by.id('ng-change-example2')).click();
-
- * expect(counter.getText()).toContain('0');
- * expect(debug.getText()).toContain('true');
- * });
- *
- *
- */
-var ngChangeDirective = valueFn({
- restrict: 'A',
- require: 'ngModel',
- link: function(scope, element, attr, ctrl) {
- ctrl.$viewChangeListeners.push(function() {
- scope.$eval(attr.ngChange);
- });
- }
-});
-
function classDirective(name, selector) {
name = 'ngClass' + name;
return ['$animate', function($animate) {
@@ -20584,10 +18530,10 @@ function classDirective(name, selector) {
attr.$removeClass(newClasses);
}
- function digestClassCounts(classes, count) {
+ function digestClassCounts (classes, count) {
var classCounts = element.data('$classCounts') || {};
var classesToUpdate = [];
- forEach(classes, function(className) {
+ forEach(classes, function (className) {
if (count > 0 || classCounts[className]) {
classCounts[className] = (classCounts[className] || 0) + count;
if (classCounts[className] === +(count > 0)) {
@@ -20599,16 +18545,18 @@ function classDirective(name, selector) {
return classesToUpdate.join(' ');
}
- function updateClasses(oldClasses, newClasses) {
+ function updateClasses (oldClasses, newClasses) {
var toAdd = arrayDifference(newClasses, oldClasses);
var toRemove = arrayDifference(oldClasses, newClasses);
- toAdd = digestClassCounts(toAdd, 1);
toRemove = digestClassCounts(toRemove, -1);
- if (toAdd && toAdd.length) {
- $animate.addClass(element, toAdd);
- }
- if (toRemove && toRemove.length) {
+ toAdd = digestClassCounts(toAdd, 1);
+
+ if (toAdd.length === 0) {
$animate.removeClass(element, toRemove);
+ } else if (toRemove.length === 0) {
+ $animate.addClass(element, toAdd);
+ } else {
+ $animate.setClass(element, toAdd, toRemove);
}
}
@@ -20631,23 +18579,23 @@ function classDirective(name, selector) {
var values = [];
outer:
- for (var i = 0; i < tokens1.length; i++) {
+ for(var i = 0; i < tokens1.length; i++) {
var token = tokens1[i];
- for (var j = 0; j < tokens2.length; j++) {
- if (token == tokens2[j]) continue outer;
+ for(var j = 0; j < tokens2.length; j++) {
+ if(token == tokens2[j]) continue outer;
}
values.push(token);
}
return values;
}
- function arrayClasses(classVal) {
+ function arrayClasses (classVal) {
if (isArray(classVal)) {
return classVal;
} else if (isString(classVal)) {
return classVal.split(' ');
} else if (isObject(classVal)) {
- var classes = [];
+ var classes = [], i = 0;
forEach(classVal, function(v, k) {
if (v) {
classes = classes.concat(k.split(' '));
@@ -20687,9 +18635,8 @@ function classDirective(name, selector) {
* new classes are added.
*
* @animations
- * **add** - happens just before the class is applied to the elements
- *
- * **remove** - happens just before the class is removed from the element
+ * add - happens just before the class is applied to the element
+ * remove - happens just before the class is removed from the element
*
* @element ANY
* @param {expression} ngClass {@link guide/expression Expression} to eval. The result
@@ -20802,8 +18749,8 @@ function classDirective(name, selector) {
The ngClass directive still supports CSS3 Transitions/Animations even if they do not follow the ngAnimate CSS naming structure.
Upon animation ngAnimate will apply supplementary CSS classes to track the start and end of an animation, but this will not hinder
any pre-existing CSS transitions already on the element. To get an idea of what happens during a class-based animation, be sure
- to view the step by step details of {@link ng.$animate#addClass $animate.addClass} and
- {@link ng.$animate#removeClass $animate.removeClass}.
+ to view the step by step details of {@link ngAnimate.$animate#addclass $animate.addClass} and
+ {@link ngAnimate.$animate#removeclass $animate.removeClass}.
*/
var ngClassDirective = classDirective('', true);
@@ -20990,16 +18937,10 @@ var ngCloakDirective = ngDirective({
* @element ANY
* @scope
* @priority 500
- * @param {expression} ngController Name of a constructor function registered with the current
- * {@link ng.$controllerProvider $controllerProvider} or an {@link guide/expression expression}
- * that on the current scope evaluates to a constructor function.
- *
- * The controller instance can be published into a scope property by specifying
- * `ng-controller="as propertyName"`.
- *
- * If the current `$controllerProvider` is configured to use globals (via
- * {@link ng.$controllerProvider#allowGlobals `$controllerProvider.allowGlobals()` }), this may
- * also be the name of a globally accessible constructor function (not recommended).
+ * @param {expression} ngController Name of a globally accessible constructor function or an
+ * {@link guide/expression expression} that on the current scope evaluates to a
+ * constructor function. The controller instance can be published into a scope property
+ * by specifying `as propertyName`.
*
* @example
* Here is a simple form for editing user contact information. Adding, removing, clearing, and
@@ -21194,7 +19135,6 @@ var ngCloakDirective = ngDirective({
*/
var ngControllerDirective = [function() {
return {
- restrict: 'A',
scope: true,
controller: '@',
priority: 500
@@ -21209,7 +19149,7 @@ var ngControllerDirective = [function() {
* @description
* Enables [CSP (Content Security Policy)](https://developer.mozilla.org/en/Security/CSP) support.
*
- * This is necessary when developing things like Google Chrome Extensions or Universal Windows Apps.
+ * This is necessary when developing things like Google Chrome Extensions.
*
* CSP forbids apps to use `eval` or `Function(string)` generated functions (among other things).
* For Angular to be CSP compatible there are only two things that we need to do differently:
@@ -21250,125 +19190,7 @@ var ngControllerDirective = [function() {
...