`) will now throw
the "nodomevents" error at compile time.
Previously the nodomevents was thrown at link time. The new behavior makes it consistent with
the "selmulti" error.
The breaking change should be rare, as it relates to incorrect API use that should not make it to
production apps in the first place.
- **[04cad4](https://github.com/angular/angular.js/commit/04cad41d26ebaf44b5ee0c29a152d61f235f3efa)**:
secure `link[href]` as a `RESOURCE_URL` in `$sce`
`link[href]` attributes are now protected via `$sce`, which prevents interpolated
values that fail the `RESOURCE_URL` context tests from being used in interpolation.
For example if the application is running at `https://docs.angularjs.org` then the
following will fail:
```
I respond to `click` and `keypress` (not `keydown`)
```
After:
```html
I respond to `click` and `keypress` (not `keydown`)
I respond to `click` and `keydown` (not `keypress`)
```
Finally, it is possible that this change affects your unit or end-to-end tests. If you are currently
expecting your custom buttons to automatically respond to the `keypress` event (due to `ngAria`),
you need to change the tests to trigger `keydown` events instead.
- **[9978de](https://github.com/angular/angular.js/commit/9978de11b7295fec1a2f4cb8fbeb9b62b54cb711)**:
don't add roles to native control elements
ngAria will no longer add the "role" attribute to native control elements
(textarea, button, select, summary, details, a, and input). Previously, "role" was not added to
input, but all others in the list.
This should not affect accessibility, because native inputs are accessible by default, but it might
affect applications that relied on the "role" attribute being present (e.g. for styling or as
directive attributes).
### `$resource` due to:
- **[acb545](https://github.com/angular/angular.js/commit/acb545ec3ebf099db68561033645941c900973b5)**:
pass all extra, owned properties as params
All owned properties of the `params` object that are not used to replace URL params, will be passed
to `$http` as `config.params` (to be used as query parameters in the URL), even if
`Object.prototype` has a property with the same name. E.g.:
Before:
```js
var Foo = $resource('/foo/:id');
Foo.get({id: 42, bar: 'baz', toString: 'hmm'});
// URL: /foo/42?bar=baz
// Note that `toString` is _not_ included in the query,
// because `Object.prototype.toString` is defined :(
```
After:
```js
var Foo = $resource('/foo/:id');
Foo.get({id: 42, bar: 'baz', toString: 'hmm'});
// URL: /foo/42?bar=baz&toString=hmm
// Note that `toString` _is_ included in the query, as expected :)
```
- **[2456ab](https://github.com/angular/angular.js/commit/2456ab63a613902d21c151445f9c697a76ab43b3)**:
add semicolon to whitelist of delimiters to unencode in URL params
Although it shouldn't matter in practice (since both the encoded and the unencoded `;` character would
be interpreted identically by the server), this change could break some tests: For example, where
`$httpBackend` was set up to expect an encoded `;` character, but the request is made to the URL with an
unencoded `;` character.
### `select` due to:
- **[f02b70](https://github.com/angular/angular.js/commit/f02b707b5e4a5ffd1e1a20d910754cfabfc19622)**:
support values of any type added with `ngValue`
`` elements added to `` via `ngValue` now add their values in hash form, i.e.
`` becomes ` `.
This is done to support binding options with values of any type to selects.
This should rarely affect applications, as the values of options are usually not relevant to the
application logic, but it's possible that option values are checked in tests.
- **[e8c2e1](https://github.com/angular/angular.js/commit/e8c2e119758e58e18fe43932d09a8ff9f506aa9d)**:
don't register options when select has no `ngModel`
Option elements will no longer set their value attribute from their text value when their select
element has no ngModel associated. Setting the value is only needed for the select directive to
match model values and options. If no ngModel is present, the select directive doesn't need it.
This should not affect many applications as the behavior was undocumented and not part of a public
API. It also has no effect on the usual HTML5 behavior that sets the select value to the option text
if the option does not provide a value attribute.
### `ngBind` due to:
- **[fa80a6](https://github.com/angular/angular.js/commit/fa80a61a05a3b49a2c770d5544cb8480907a18d3)**:
use same string representation as $interpolate
`ngBind` now uses the same logic as $interpolate (i.e. {{myString}}) when
binding, which means values other than strings are now transformed as following:
- null / undefined become empty string
- with an object's custom toString() function, except if the object is a Date, Array, or Number
- otherwise with JSON.stringify
Previously, ngBind would always use toString().
The following examples show the different output:
```js
$scope.myPlainObject = {a: 1, b: 2};
$scope.myCustomObject = {a: 1, b: 2, toString: function() {return 'a+b';}};
```
Plain Object:
```html
[object Object]
{'a':1,'b':2}
```
Object with custom toString():
```html
[object Object]
a+b
```
If you want the output of `toString()`, you can use it directly on the value in ngBind:
```html
[object Object]
```
### `$interpolate` due to:
- **[a5fd2e](https://github.com/angular/angular.js/commit/a5fd2e4c0376676fa317e09a8d8be4966b82cbfe)**:
use custom `toString()` function if present
When converting values to strings, interpolation now uses a custom toString() function on objects
that are not Number, Array or Date (custom means that the `toString` function is not the same as
`Object.prototype.toString`). Otherwise, interpolation uses JSON.stringify() as usual.
Should you have a custom toString() function but still want the output of JSON.stringify(),
migrate as shown in the following examples:
Before:
```html
{{myObject}}
```
After - use the `json` filter to stringify the object:
```html
{{myObject | json}}
```
### `loader` due to:
- **[6a2ebd](https://github.com/angular/angular.js/commit/6a2ebdba5df27e789e3cb10f11eedf90f7b9b97e)**:
module.decorator order of operations is now irrelevant
`module.decorator` declarations are now processed as part of the `module.config`
queue and may result in providers being decorated in a different order if
`module.config` blocks are also used to decorate providers via
`$provide.decorator`.
For example, consider the following declaration order in which 'theFactory' is
decorated by both a `module.decorator` and a `$provide.decorator`:
```js
angular
.module('theApp', [])
.factory('theFactory', theFactoryFn)
.config(function($provide) {
$provide.decorator('theFactory', provideDecoratorFn);
})
.decorator('theFactory', moduleDecoratorFn);
```
Prior to this fix, 'theFactory' provider would be decorated in the following
order:
1. moduleDecoratorFn
2. provideDecoratorFn
The result of this fix changes the order in which 'theFactory' is decorated
because now `module.decorator` declarations are processed in the same order as
`module.config` declarations:
1. provideDecoratorFn
2. moduleDecoratorFn
### `$location` due to:
- **[aa077e](https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52)**:
default hashPrefix to '!'
The hash-prefix for `$location` hash-bang URLs has changed from the empty
string "" to the bang "!". If your application does not use HTML5 mode
or is being run on browsers that do not support HTML5 mode, and you have
not specified your own hash-prefix then client side URLs will now contain
a "!" prefix. For example, rather than `mydomain.com/#/a/b/c` will become
`mydomain.com/#!/a/b/c`.
If you actually wanted to have no hash-prefix then you should configure
this by adding a configuration block to you application:
```js
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
```
### `input[type=range]` due to:
- **[913016](https://github.com/angular/angular.js/commit/9130166767c4792c5d32d08a918fc7becf32c9a6)**:
add support for binding to `input[type=range]`
Due to the way that `input[type=range]` elements behave this feature modifies the behavior of such elements
when bound to `ngModel`:
- Like `input[type=number]`, it requires the model to be a Number, and will set the model to a Number
- it supports setting the min/max values only via the min/max attributes
- it follows the browser behavior of never allowing an invalid value. That means, when the browser
converts an invalid value (empty: `null`, `undefined`, `false` ..., out of bounds: greater than max, less than min)
to a valid value, the input will in turn set the model to this new valid value via `$setViewValue`.
- this means a range input will never be required and never have a non-Number model value, once the
ngModel directive is initialized.
- this behavior is supported when the model changes and when the min/max attributes change in a way
that prompts the browser to update the input value.
- browsers that do not support `input[type=range]` (IE9) handle the input like a number input (with validation etc.)
### `input[type=number]` due to:
- **[e1da4be](https://github.com/angular/angular.js/commit/e1da4bed8e291003d485a8ad346ab80bed8ae2e3)**:
add support for `step` to `input[type=number]`
Number inputs that use `ngModel` and specify a `step` constraint (via `step`/`ngStep` attributes)
will now have a new validator (`step`), which will verify that the current value is valid under the
`step` constraint (according to the [spec](https://www.w3.org/TR/html5/forms.html#the-step-attribute)).
Previously, the `step` constraint was ignored by `ngModel`, treating values as valid even when there
was a step-mismatch.
If you want to restore the previous behavior (use the `step` attribute while disabling step
validation), you can overwrite the built-in `step` validator with a custom directive. For example:
```js
// For all `input` elements...
.directive('input', function() {
return {
restrict: 'E',
require: '?ngModel',
link: function (scope, elem, attrs, ngModelCtrl) {
// ...that are of type "number" and have `ngModel`...
if ((attrs.type === 'number') && ngModelCtrl) {
// ...remove the `step` validator.
delete ngModelCtrl.$validators.step;
}
}
};
})
```
` with no selection ([d882fd](https://github.com/angular/angular.js/commit/d882fde2e532216e7cf424495db1ccb5be1789f8))
- **$compile:**
- add `preAssignBindingsEnabled` option
([dfb8cf](https://github.com/angular/angular.js/commit/dfb8cf6402678206132e5bc603764d21e0f986ef))
- throw error when directive name or factory function is invalid
([53a3bf](https://github.com/angular/angular.js/commit/53a3bf6634600c3aeff092eacc35edf399b27aec)
[#15056](https://github.com/angular/angular.js/issues/15056))
- **$http:**
- remove deprecated callback methods: `success()/error()` ([b54a39](https://github.com/angular/angular.js/commit/b54a39e2029005e0572fbd2ac0e8f6a4e5d69014))
- JSONP callback must be specified by `jsonpCallbackParam` config ([fb6634](https://github.com/angular/angular.js/commit/fb663418710736161a6b5da49c345e92edf58dcb) [#15161](https://github.com/angular/angular.js/issues/15161) [#11352](https://github.com/angular/angular.js/issues/11352))
- JSONP requests now require a trusted resource URL ([6476af](https://github.com/angular/angular.js/commit/6476af83cd0418c84e034a955b12a842794385c4) [#11352](https://github.com/angular/angular.js/issues/11352))
- **$anchorScroll:** convert numeric hash targets to string
([9062ba](https://github.com/angular/angular.js/commit/9062bae05c002934fe7bfd76043dcc3de9acfde6)
[#14680](https://github.com/angular/angular.js/issues/14680))
- **ngModelOptions:** allow options to be inherited from ancestor `ngModelOptions` ([87a2ff](https://github.com/angular/angular.js/commit/87a2ff76af5d0a9268d8eb84db5755077d27c84c) [#10922](https://github.com/angular/angular.js/issues/10922))
- **input:**
- add support for binding to `input[type=range]` ([913016](https://github.com/angular/angular.js/commit/9130166767c4792c5d32d08a918fc7becf32c9a6) [#5892](https://github.com/angular/angular.js/issues/5892) [#14870](https://github.com/angular/angular.js/issues/14870))
- add support for `step` to `input[type=number]` ([e1da4be](https://github.com/angular/angular.js/commit/e1da4bed8e291003d485a8ad346ab80bed8ae2e3) [#10597](https://github.com/angular/angular.js/issues/10597))
- allow `ngTrim` to work for `input[type=radio]` ([47724b](https://github.com/angular/angular.js/commit/47724baffe050269385b3481e9a9cf4ab3944b4b))
- **ngSwitch:** allow multiple case matches via optional attribute `ngSwitchWhenSeparator`
([0b221](https://github.com/angular/angular.js/commit/0b22173000596bf4b78f6a90083b994d46164d79)
[#3410](https://github.com/angular/angular.js/issues/3410)
[#3516](https://github.com/angular/angular.js/issues/3516))
- **ngRoute:** allow `ngView` to be included in an asynchronously loaded template ([c13c66](https://github.com/angular/angular.js/commit/c13c666728c1a1485ef18e92d7cb35118ce39609) [#1213](https://github.com/angular/angular.js/issues/1213))
- **select:** support values of any type added with `ngValue` ([f02b70](https://github.com/angular/angular.js/commit/f02b707b5e4a5ffd1e1a20d910754cfabfc19622) [#9842](https://github.com/angular/angular.js/issues/9842))
- **$interpolate:** use custom `toString()` function if present ([a5fd2e](https://github.com/angular/angular.js/commit/a5fd2e4c0376676fa317e09a8d8be4966b82cbfe) [#7317](https://github.com/angular/angular.js/issues/7317) [#11406](https://github.com/angular/angular.js/issues/11406))
- **$route:** implement `resolveRedirectTo` ([e98656](https://github.com/angular/angular.js/commit/e9865654b39c71be71034c38581a8c7bd16bc716) [#5150](https://github.com/angular/angular.js/issues/5150))
- **$q:** report promises with non rejection callback ([c9dffd](https://github.com/angular/angular.js/commit/c9dffde1cb167660120753181cb6d01dc1d1b3d0) [#13653](https://github.com/angular/angular.js/issues/13653) [#7992](https://github.com/angular/angular.js/issues/7992))
- **$resource:** pass `status`/`statusText` to success callbacks
([e3a378](https://github.com/angular/angular.js/commit/e3a378e7a329f60f6b48517f83a4f4c9efecb056)
[#8341](https://github.com/angular/angular.js/issues/8841)
[#8841](https://github.com/angular/angular.js/issues/8841))
- **$location:**
- default hashPrefix to `'!'`
([aa077e](https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52)
[#13812](https://github.com/angular/angular.js/issues/13812))
- add support for selectively rewriting links based on attribute
([3d686a](https://github.com/angular/angular.js/commit/3d686a988dc4373da094cff6905e5b0d8da6afa4))
- **$controller:** throw when requested controller is not registered
([eacfe4](https://github.com/angular/angular.js/commit/eacfe4148eb97e550117ed7fd3c37b58537a9f64)
[#14980](https://github.com/angular/angular.js/issues/14980))
## Performance Improvements
- **form, ngModel:** change controllers to use prototype methods ([9e24e7](https://github.com/angular/angular.js/commit/9e24e774a558143b3478536911a3a4c1714564ba))
- **select:** don't prepend unknown option if already prepended ([ba36bd](https://github.com/angular/angular.js/commit/ba36bde6736f0810ca670e10952a8e1c021de531))
- **$animate:** listen for document visibility changes ([d71dc2](https://github.com/angular/angular.js/commit/d71dc2f5afec230711351e9f160873a41eb60597))
- **injector:** cache the results of the native class detection check ([5ceb5d](https://github.com/angular/angular.js/commit/5ceb5dbfa6d9b6d15232a1f5c767b2f431325948))
- **$parse:** Inline constants ([bd7d5f](https://github.com/angular/angular.js/commit/bd7d5f6345439aa2d1da708ffee20b4c565131d4))
- **$compile:**
- use strict comparison for `controller === '@'`
([bbd3db](https://github.com/angular/angular.js/commit/bbd3db14f857aab996ad129f2f15ca6348e9fd9f))
- validate `directive.restrict` property on directive init
([11f273](https://github.com/angular/angular.js/commit/11f2731f72e932615e8ce15e6a73f4ac808cc7e7))
- **$parse:** remove Angular expression sandbox ([1547c7](https://github.com/angular/angular.js/commit/1547c751aa48efe7dbefef701c3df5983b04aa2e) [#15094](https://github.com/angular/angular.js/issues/15094))
## Breaking Changes
### **jqLite** due to:
- **[fc0c11](https://github.com/angular/angular.js/commit/fc0c11db845d53061430b7f05e773dcb3fb5b860)**: camelCase keys in `jqLite#data`
Previously, keys passed to the data method were left untouched.
Now they are internally camelCased similarly to how jQuery handles it, i.e.
only single (!) hyphens followed by a lowercase letter get converted to an
uppercase letter. This means keys `a-b` and `aB` represent the same data piece;
writing to one of them will also be reflected if you ask for the other one.
If you use Angular with jQuery, it already behaved in this way so no changes
are required on your part.
To migrate the code follow the examples below:
BEFORE:
```js
/* 1 */
elem.data('my-key', 2);
elem.data('myKey', 3);
/* 2 */
elem.data('foo-bar', 42);
elem.data()['foo-bar']; // 42
elem.data()['fooBar']; // undefined
/* 3 */
elem.data()['foo-bar'] = 1;
elem.data()['fooBar'] = 2;
elem.data('foo-bar'); // 1
```
AFTER:
```js
/* 1 */
// Rename one of the keys as they would now map to the same data slot.
elem.data('my-key', 2);
elem.data('my-key2', 3);
/* 2 */
elem.data('foo-bar', 42);
elem.data()['foo-bar']; // undefined
elem.data()['fooBar']; // 42
/* 3 */
elem.data()['foo-bar'] = 1;
elem.data()['fooBar'] = 2;
elem.data('foo-bar'); // 2
```
- **[73050c](https://github.com/angular/angular.js/commit/73050cdda04675bfa6705dc841ddbbb6919eb048)**: align jqLite camelCasing logic with JQuery
Before, when Angular was used without jQuery, the key passed
to the css method was more heavily camelCased; now only a single (!) hyphen
followed by a lowercase letter is getting transformed. This also affects APIs
that rely on the css method, like ngStyle.
If you use Angular with jQuery, it already behaved in this way so no changes
are needed on your part.
To migrate the code follow the example below:
Before:
HTML:
```html
// All five versions used to be equivalent.
```
JS:
```js
// All five versions used to be equivalent.
elem.css('background_color', 'blue');
elem.css('background:color', 'blue');
elem.css('background-color', 'blue');
elem.css('background--color', 'blue');
elem.css('backgroundColor', 'blue');
// All five versions used to be equivalent.
var bgColor = elem.css('background_color');
var bgColor = elem.css('background:color');
var bgColor = elem.css('background-color');
var bgColor = elem.css('background--color');
var bgColor = elem.css('backgroundColor');
```
After:
HTML:
```html
// Previous five versions are no longer equivalent but these two still are.
```
JS:
```js
// Previous five versions are no longer equivalent but these two still are.
elem.css('background-color', 'blue');
elem.css('backgroundColor', 'blue');
// Previous five versions are no longer equivalent but these two still are.
var bgColor = elem.css('background-color');
var bgColor = elem.css('backgroundColor');
```
- **[7ceb5f](https://github.com/angular/angular.js/commit/7ceb5f6fcc43d35d1b66c3151ce6a71c60309304)**: don't get/set properties when getting/setting boolean attributes
Previously, all boolean attributes were reflected into the corresponding property when calling a
setter and from the corresponding property when calling a getter, even on elements that don't treat
those attributes in a special way. Now Angular doesn't do it by itself, but relies on browsers to
know when to reflect the property. Note that this browser-level conversion differs between browsers;
if you need to dynamically change the state of an element, you should modify the property, not the
attribute. See https://jquery.com/upgrade-guide/1.9/#attr-versus-prop- for a more detailed
description about a related change in jQuery 1.9.
This change aligns jqLite with jQuery 3. To migrate the code follow the example below:
Before:
CSS:
```css
input[checked="checked"] { ... }
```
JS:
```js
elem1.attr('checked', 'checked');
elem2.attr('checked', false);
```
After:
CSS:
```css
input:checked { ... }
```
JS:
```js
elem1.prop('checked', true);
elem2.prop('checked', false);
```
- **[3faf45](https://github.com/angular/angular.js/commit/3faf4505732758165083c9d21de71fa9b6983f4a)**: don't remove a boolean attribute for `.attr(attrName, '')`
Before, using the `attr` method with an empty string as a value
would remove the boolean attribute. Now it sets it to its lowercase name as
was happening for every non-empty string so far. The only two values that remove
the boolean attribute are now null & false, just like in jQuery.
To migrate the code follow the example below:
Before:
```js
elem.attr(booleanAttrName, '');
```
After:
```js
elem.attr(booleanAttrName, false);
```
or:
```js
elem.attr(booleanAttrName, null);
```
- **[4e3624](https://github.com/angular/angular.js/commit/4e3624552284d0e725bf6262b2e468cd2c7682fa)**: remove the attribute for `.attr(attribute, null)`
Invoking `elem.attr(attributeName, null)` would set the
`attributeName` attribute value to a string `"null"`, now it removes the
attribute instead.
To migrate the code follow the example below:
Before:
```js
elem.attr(attributeName, null);
```
After:
```js
elem.attr(attributeName, "null");
```
- **[d882fd](https://github.com/angular/angular.js/commit/d882fde2e532216e7cf424495db1ccb5be1789f8)**: return [] for .val() on `` with no selection
For the jqLite element representing a select element in
the multiple variant with no options chosen the .val() getter used to return
null and now returns an empty array.
To migrate the code follow the example below:
Before:
HTML:
```html
value 1
value 2
```
JavaScript:
```js
var value = $element.val();
if (value) {
/* do something */
}
```
After:
HTML:
```html
value 1
value 2
```
JavaScript:
```js
var value = $element.val();
if (value.length > 0) {
/* do something */
}
```
### `ngModel` due to:
- **[7bc71a](https://github.com/angular/angular.js/commit/7bc71adc63bb6bb609b44dd2d3ea8fb0cd3f300b)**: treat synchronous validators as boolean always
Previously, only a literal `false` return would resolve as the
synchronous validator failing. Now, all falsy JavaScript values
are treated as failing the validator, as one would naturally expect.
Specifically, the values `0` (the number zero), `null`, `NaN` and `''` (the
empty string) used to be considered valid (passing) and they are now considered
invalid (failing). The value `undefined` was treated similarly to a pending
asynchronous validator, causing the validation to be pending. `undefined` is
also now considered invalid.
To migrate, make sure your synchronous validators are returning either a
literal `true` or a literal `false` value. For most code, we expect this to
already be the case. Only a very small subset of projects will be affected.
Namely, anyone using `undefined` or any falsy value as a return will now see
their validation failing, whereas previously falsy values other than `undefined`
would have been seen as passing and `undefined` would have been seen as pending.
- **[9e24e7](https://github.com/angular/angular.js/commit/9e24e774a558143b3478536911a3a4c1714564ba)**: change controllers to use prototype methods
The use of prototype methods instead of new methods per instance removes the ability to pass
NgModelController and FormController methods without context.
For example
```js
$scope.$watch('something', myNgModelCtrl.$render)
```
will no longer work because the `$render` method is passed without any context.
This must now be replaced with
```js
$scope.$watch('something', function() {
myNgModelCtrl.$render();
})
```
or possibly by using `Function.prototype.bind` or `angular.bind`.
### `aria/ngModel` due to:
- **[975a61](https://github.com/angular/angular.js/commit/975a6170efceb2a5e6377c57329731c0636eb8c8)**: do not overwrite the default `$isEmpty()` method for checkboxes
Custom `checkbox`-shaped controls (e.g. checkboxes, menuitemcheckboxes), no longer have a custom
`$isEmpty()` method on their `NgModelController` that checks for `value === false`. Unless
overwritten, the default `$isEmpty()` method will be used, which treats `undefined`, `null`, `NaN`
and `''` as "empty".
**Note:** The `$isEmpty()` method is used to determine if the checkbox is checked ("not empty" means
"checked") and thus it can indirectly affect other things, such as the control's validity
with respect to the `required` validator (e.g. "empty" + "required" --> "invalid").
Before:
```js
var template = '
{{
Nooot
'foo'}}
{{ <-- Two separate
'foo'}} <-- text nodes
foo <-- The text nodes were merged into `{{'foo'}}`, which was then interpolated
{{
Nooot
'foo'}}
{{ <-- Two separate
'foo'}} <-- nodes
```
- **[b89c21](https://github.com/angular/angular.js/commit/b89c2181a9a165e06c027390164e08635ec449f4)**: move check for interpolation of on-event attributes to compile time
Using interpolation in any on* event attributes (e.g. ``) will now throw
the "nodomevents" error at compile time.
Previously the nodomevents was thrown at link time. The new behavior makes it consistent with
the "selmulti" error.
The breaking change should be rare, as it relates to incorrect API use that should not make it to
production apps in the first place.
- **[04cad4](https://github.com/angular/angular.js/commit/04cad41d26ebaf44b5ee0c29a152d61f235f3efa)**: secure `link[href]` as a `RESOURCE_URL` in `$sce`
`link[href]` attributes are now protected via `$sce`, which prevents interpolated
values that fail the `RESOURCE_URL` context tests from being used in interpolation.
For example if the application is running at `https://docs.angularjs.org` then the
following will fail:
```
I respond to `click` and `keypress` (not `keydown`)
```
After:
```html
I respond to `click` and `keypress` (not `keydown`)
I respond to `click` and `keydown` (not `keypress`)
```
Finally, it is possible that this change affects your unit or end-to-end tests. If you are currently
expecting your custom buttons to automatically respond to the `keypress` event (due to `ngAria`),
you need to change the tests to trigger `keydown` events instead.
- **[9978de](https://github.com/angular/angular.js/commit/9978de11b7295fec1a2f4cb8fbeb9b62b54cb711)**: don't add roles to native control elements
ngAria will no longer add the "role" attribute to native control elements
(textarea, button, select, summary, details, a, and input). Previously, "role" was not added to
input, but all others in the list.
This should not affect accessibility, because native inputs are accessible by default, but it might
affect applications that relied on the "role" attribute being present (e.g. for styling or as
directive attributes).
### `$resource` due to:
- **[acb545](https://github.com/angular/angular.js/commit/acb545ec3ebf099db68561033645941c900973b5)**: pass all extra, owned properties as params
All owned properties of the `params` object that are not used to replace URL params, will be passed
to `$http` as `config.params` (to be used as query parameters in the URL), even if
`Object.prototype` has a property with the same name. E.g.:
Before:
```js
var Foo = $resource('/foo/:id');
Foo.get({id: 42, bar: 'baz', toString: 'hmm'});
// URL: /foo/42?bar=baz
// Note that `toString` is _not_ included in the query,
// because `Object.prototype.toString` is defined :(
```
After:
```js
var Foo = $resource('/foo/:id');
Foo.get({id: 42, bar: 'baz', toString: 'hmm'});
// URL: /foo/42?bar=baz&toString=hmm
// Note that `toString` _is_ included in the query, as expected :)
```
- **[2456ab](https://github.com/angular/angular.js/commit/2456ab63a613902d21c151445f9c697a76ab43b3)**: add semicolon to whitelist of delimiters to unencode in URL params
Although it shouldn't matter in practice (since both the encoded and the unencoded `;` character would
be interpreted identically by the server), this change could break some tests: For example, where
`$httpBackend` was set up to expect an encoded `;` character, but the request is made to the URL with an
unencoded `;` character.
### `select` due to:
- **[f02b70](https://github.com/angular/angular.js/commit/f02b707b5e4a5ffd1e1a20d910754cfabfc19622)**: support values of any type added with ngValue
`` elements added to `` via `ngValue` now add their values in hash form, i.e.
`` becomes ` `.
This is done to support binding options with values of any type to selects.
This should rarely affect applications, as the values of options are usually not relevant to the
application logic, but it's possible that option values are checked in tests.
- **[e8c2e1](https://github.com/angular/angular.js/commit/e8c2e119758e58e18fe43932d09a8ff9f506aa9d)**: don't register options when select has no ngModel
Option elements will no longer set their value attribute from their text value when their select
element has no ngModel associated. Setting the value is only needed for the select directive to
match model values and options. If no ngModel is present, the select directive doesn't need it.
This should not affect many applications as the behavior was undocumented and not part of a public
API. It also has no effect on the usual HTML5 behavior that sets the select value to the option text
if the option does not provide a value attribute.
### `ngBind` due to:
- **[fa80a6](https://github.com/angular/angular.js/commit/fa80a61a05a3b49a2c770d5544cb8480907a18d3)**: use same string representation as $interpolate
`ngBind` now uses the same logic as $interpolate (i.e. {{myString}}) when
binding, which means values other than strings are now transformed as following:
- null / undefined become empty string
- with an object's custom toString() function, except if the object is a Date, Array, or Number
- otherwise with JSON.stringify
Previously, ngBind would always use toString().
The following examples show the different output:
```js
$scope.myPlainObject = {a: 1, b: 2};
$scope.myCustomObject = {a: 1, b: 2, toString: function() {return 'a+b';}};
```
Plain Object:
```html
[object Object]
{'a':1,'b':2}
```
Object with custom toString():
```html
[object Object]
a+b
```
If you want the output of `toString()`, you can use it directly on the value in ngBind:
```html
[object Object]
```
### `$interpolate` due to:
- **[a5fd2e](https://github.com/angular/angular.js/commit/a5fd2e4c0376676fa317e09a8d8be4966b82cbfe)**: use custom toString() function if present
When converting values to strings, interpolation now uses a custom toString() function on objects
that are not Number, Array or Date (custom means that the `toString` function is not the same as
`Object.prototype.toString`). Otherwise, interpolation uses JSON.stringify() as usual.
Should you have a custom toString() function but still want the output of JSON.stringify(),
migrate as shown in the following examples:
Before:
```html
{{myObject}}
```
After - use the `json` filter to stringify the object:
```html
{{myObject | json}}
```
### `loader` due to:
- **[6a2ebd](https://github.com/angular/angular.js/commit/6a2ebdba5df27e789e3cb10f11eedf90f7b9b97e)**: module.decorator order of operations is now irrelevant
`module.decorator` declarations are now processed as part of the `module.config`
queue and may result in providers being decorated in a different order if
`module.config` blocks are also used to decorate providers via
`$provide.decorator`.
For example, consider the following declaration order in which 'theFactory' is
decorated by both a `module.decorator` and a `$provide.decorator`:
```js
angular
.module('theApp', [])
.factory('theFactory', theFactoryFn)
.config(function($provide) {
$provide.decorator('theFactory', provideDecoratorFn);
})
.decorator('theFactory', moduleDecoratorFn);
```
Prior to this fix, 'theFactory' provider would be decorated in the following
order:
1. moduleDecoratorFn
2. provideDecoratorFn
The result of this fix changes the order in which 'theFactory' is decorated
because now `module.decorator` declarations are processed in the same order as
`module.config` declarations:
1. provideDecoratorFn
2. moduleDecoratorFn
### `$location` due to:
- **[aa077e](https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52)**: default hashPrefix to '!'
The hash-prefix for `$location` hash-bang URLs has changed from the empty
string "" to the bang "!". If your application does not use HTML5 mode
or is being run on browsers that do not support HTML5 mode, and you have
not specified your own hash-prefix then client side URLs will now contain
a "!" prefix. For example, rather than `mydomain.com/#/a/b/c` will become
`mydomain.com/#!/a/b/c`.
If you actually wanted to have no hash-prefix then you should configure
this by adding a configuration block to you application:
```js
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
```
### `input[type=range]` due to:
- **[913016](https://github.com/angular/angular.js/commit/9130166767c4792c5d32d08a918fc7becf32c9a6)**: add support for binding to `input[type=range]`
Due to the way that `input[type=range]` elements behave this feature modifies the behavior of such elements
when bound to `ngModel`:
- Like `input[type=number]`, it requires the model to be a Number, and will set the model to a Number
- it supports setting the min/max values only via the min/max attributes
- it follows the browser behavior of never allowing an invalid value. That means, when the browser
converts an invalid value (empty: `null`, `undefined`, `false` ..., out of bounds: greater than max, less than min)
to a valid value, the input will in turn set the model to this new valid value via `$setViewValue`.
- this means a range input will never be required and never have a non-Number model value, once the
ngModel directive is initialized.
- this behavior is supported when the model changes and when the min/max attributes change in a way
that prompts the browser to update the input value.
- browsers that do not support `input[type=range]` (IE9) handle the input like a number input (with validation etc.)
### `input[type=number]` due to:
- **[e1da4be](https://github.com/angular/angular.js/commit/e1da4bed8e291003d485a8ad346ab80bed8ae2e3)**: add support for `step` to `input[type=number]`
Number inputs that use `ngModel` and specify a `step` constraint (via `step`/`ngStep` attributes)
will now have a new validator (`step`), which will verify that the current value is valid under the
`step` constraint (according to the [spec](https://www.w3.org/TR/html5/forms.html#the-step-attribute)).
Previously, the `step` constraint was ignored by `ngModel`, treating values as valid even when there
was a step-mismatch.
If you want to restore the previous behavior (use the `step` attribute while disabling step
validation), you can overwrite the built-in `step` validator with a custom directive. For example:
```js
// For all `input` elements...
.directive('input', function() {
return {
restrict: 'E',
require: '?ngModel',
link: function (scope, elem, attrs, ngModelCtrl) {
// ...that are of type "number" and have `ngModel`...
if ((attrs.type === 'number') && ngModelCtrl) {
// ...remove the `step` validator.
delete ngModelCtrl.$validators.step;
}
}
};
})
```
` elements
([7a668cdd](https://github.com/angular/angular.js/commit/7a668cdd7d08a7016883eb3c671cbcd586223ae8),
[#13453](https://github.com/angular/angular.js/issues/13453))
- **formatNumber:** cope with large and small number corner cases
([6a0686d4](https://github.com/angular/angular.js/commit/6a0686d434c41445c50b2d9669073802ede77b3b),
[#13394](https://github.com/angular/angular.js/issues/13394), [#8674](https://github.com/angular/angular.js/issues/8674), [#12709](https://github.com/angular/angular.js/issues/12709), [#8705](https://github.com/angular/angular.js/issues/8705), [#12707](https://github.com/angular/angular.js/issues/12707), [#10246](https://github.com/angular/angular.js/issues/10246), [#10252](https://github.com/angular/angular.js/issues/10252))
- **input:** add missing chars to URL validation regex
([e4bb8387](https://github.com/angular/angular.js/commit/e4bb8387952069cca9da06bbc5c87ae576c2bf6f),
[#13379](https://github.com/angular/angular.js/issues/13379), [#13460](https://github.com/angular/angular.js/issues/13460))
- **ngAnimate:**
- consider options.delay value for closing timeout
([7ffb2d3c](https://github.com/angular/angular.js/commit/7ffb2d3c17643303a51eb4e324c365af70fe3824),
[#13355](https://github.com/angular/angular.js/issues/13355), [#13363](https://github.com/angular/angular.js/issues/13363))
- ensure animate runner is the same with and without animations
([546a277d](https://github.com/angular/angular.js/commit/546a277d65a3e075178d9b6d7ea6abcebc4bc04b),
[#13205](https://github.com/angular/angular.js/issues/13205), [#13347](https://github.com/angular/angular.js/issues/13347))
- ignore children without animation data when closing them
([77419cf1](https://github.com/angular/angular.js/commit/77419cf19fe625b262e971d5453151c63ff52b34),
[#11992](https://github.com/angular/angular.js/issues/11992), [#13424](https://github.com/angular/angular.js/issues/13424))
- do not alter the provided options data
([193153c3](https://github.com/angular/angular.js/commit/193153c3d391338a859cb7788ef32a8af05fb920),
[#13040](https://github.com/angular/angular.js/issues/13040), [#13175](https://github.com/angular/angular.js/issues/13175))
- **ngMock:** clear out `$providerInjector` after each test
([a72c12bd](https://github.com/angular/angular.js/commit/a72c12bd7052da9f60da74625409374342b50b73),
[#13397](https://github.com/angular/angular.js/issues/13397), [#13416](https://github.com/angular/angular.js/issues/13416))
- **ngOptions:** don't $dirty multiple select after compilation
([c7a2028a](https://github.com/angular/angular.js/commit/c7a2028ab38cdfc4d956c50b6f41cbccef302165),
[#13211](https://github.com/angular/angular.js/issues/13211), [#13326](https://github.com/angular/angular.js/issues/13326))
- **ngTransclude:**
- don't replace existing content if no transcluded content exists
([c3ae6ed7](https://github.com/angular/angular.js/commit/c3ae6ed78e145a9b0c13de7ef95852ba3c467551),
[#11839](https://github.com/angular/angular.js/issues/11839))
- fix case where ngTransclude attribute value equals its key
([7ddbc9aa](https://github.com/angular/angular.js/commit/7ddbc9aa35119154acb649e8c5096babc1d43476),
[#12934](https://github.com/angular/angular.js/issues/12934), [#13383](https://github.com/angular/angular.js/issues/13383))
## Breaking Changes
- **$compile:** due to [c3a26911](https://github.com/angular/angular.js/commit/c3a2691115b92536fb3d213d0ca16ac68cf32415),
**This is only a breaking change to a feature that was added in beta 2. If you have not started
using multi-slot transclusion then this will not affect you.**
The keys and values for the `transclude` map of the directive definition have been swapped around
to be more consistent with the other maps, such as `scope` and `bindToController`.
Now the `key` is the slot name and the `value` is a normalized element selector.
- **$resource:** due to [98528be3](https://github.com/angular/angular.js/commit/98528be311b48269ba0e15ba4e3e2ad9b89693a9),
Using a promise as `timeout` is no longer supported and will log a
warning. It never worked the way it was supposed to anyway.
Before:
```js
var deferred = $q.defer();
var User = $resource('/api/user/:id', {id: '@id'}, {
get: {method: 'GET', timeout: deferred.promise}
});
var user = User.get({id: 1}); // sends a request
deferred.resolve(); // aborts the request
// Now, we need to re-define `User` passing a new promise as `timeout`
// or else all subsequent requests from `someAction` will be aborted
User = $resource(...);
user = User.get({id: 2});
```
After:
```js
var User = $resource('/api/user/:id', {id: '@id'}, {
get: {method: 'GET', cancellable: true}
});
var user = User.get({id: 1}); // sends a request
user.$cancelRequest(); // aborts the request
user = User.get({id: 2});
```
- **$sanitize:** due to [7a668cdd](https://github.com/angular/angular.js/commit/7a668cdd7d08a7016883eb3c671cbcd586223ae8),
The $sanitize service will now remove instances of the `` tag from the content passed to it.
This element is used to import external SVG resources, which is a security risk as the `$sanitize`
service does not have access to the resource in order to sanitize it.
- **ngView:** due to [983b0598](https://github.com/angular/angular.js/commit/983b0598121a8c5a3a51a30120e114d7e3085d4d),
A new property to access route resolves is now available on the scope of the route. The default name
for this property is `$resolve`. If your scope already contains a property with this name then it
will be hidden or overwritten.
In this case, you should choose a custom name for this property, that does not collide with other
properties on the scope, by specifying the `resolveAs` property on the route.
- **$parse:** due to [0ea53503](https://github.com/angular/angular.js/commit/0ea535035a3a1a992948490c3533bffb83235052),
A new property to access all the locals for an expression is now available on the scope. This property
is `$locals`.
* If `scope.$locals` already exists, the way to reference this property is now `this.$locals`.
* If the locals themselves include a property `$locals` then the way to reference that is now `$locals.$locals`.
```
```js
$scope.findTemplate = function(templateName) {
return $sce.trustAsResourceUrl(templateName);
};
```
To migrate, either cache the result of `trustAsResourceUrl()`, or put the template url in the resource
whitelist in the `config()` function:
After:
```js
var templateCache = {};
$scope.findTemplate = function(templateName) {
if (!templateCache[templateName]) {
templateCache[templateName] = $sce.trustAsResourceUrl(templateName);
}
return templateCache[templateName];
};
// Alternatively, use `$sceDelegateProvider.resourceUrlWhitelist()`:
angular.module('myApp', []).config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['self', 'https://example.com/**'])
});
```
...
```
would become
```html
...
```
where `ctrl.getMessages()`
```javascript
ctrl.getMessages = function($index) {
return ctrl.form['field_' + $index].$error;
}
```
- **$http:** due to [5da1256](https://github.com/angular/angular.js/commit/5da1256fc2812d5b28fb0af0de81256054856369),
`transformRequest` functions can no longer modify request headers.
Before this commit `transformRequest` could modify request headers, ex.:
```javascript
function requestTransform(data, headers) {
headers = angular.extend(headers(), {
'X-MY_HEADER': 'abcd'
});
}
return angular.toJson(data);
}
```
This behavior was unintended and undocumented, so the change should affect very few applications. If one
needs to dynamically add / remove headers it should be done in a header function, for example:
```javascript
$http.get(url, {
headers: {
'X-MY_HEADER': function(config) {
return 'abcd'; //you've got access to a request config object to specify header value dynamically
}
}
})
```
` element.
This commit changes the actual string used as the surrogate key. We now store a string that is computed
by calling `hashKey` on the item in the options collection; previously it was the index or key of the
item in the collection.
(This is in keeping with the way that the unknown option value is represented in the select directive.)
Before you might have seen:
```
a
b
c
d
```
Now it will be something like:
```
a
b
c
d
```
If your application code relied on this value, which it shouldn't, then you will need to modify your
application to accommodate this. You may find that you can use the `track by` feature of `ngOptions`
as this provides the ability to specify the key that is stored.
- **ngOptions:** due to [7fda214c](https://github.com/angular/angular.js/commit/7fda214c4f65a6a06b25cf5d5aff013a364e9cef),
When iterating over an object's properties using the `(key, value) in obj` syntax
the order of the elements used to be sorted alphabetically. This was an artificial
attempt to create a deterministic ordering since browsers don't guarantee the order.
But in practice this is not what people want and so this change iterates over properties
in the order they are returned by Object.keys(obj), which is almost always the order
in which the properties were defined.
- **ngOptions:** due to [7fda214c](https://github.com/angular/angular.js/commit/7fda214c4f65a6a06b25cf5d5aff013a364e9cef),
setting the ngOptions attribute expression after the element is compiled, will no longer trigger the ngOptions behavior.
This worked previously because the ngOptions logic was part of the select directive, while
it is now implemented in the ngOptions directive itself.
- **select:** due to [7fda214c](https://github.com/angular/angular.js/commit/7fda214c4f65a6a06b25cf5d5aff013a364e9cef),
the `select` directive will now use strict comparison of the `ngModel` scope value against `option`
values to determine which option is selected. This means `Number` scope values will not be matched
against numeric option strings.
In AngularJS 1.3.x, setting `scope.x = 200` would select the `option` with the value 200 in the following `select`:
```
100
200
```
In AngularJS 1.4.x, the 'unknown option' will be selected.
To remedy this, you can simply initialize the model as a string: `scope.x = '200'`, or if you want to
keep the model as a `Number`, you can do the conversion via `$formatters` and `$parsers` on `ngModel`:
```js
ngModelCtrl.$parsers.push(function(value) {
return parseInt(value, 10); // Convert option value to number
});
ngModelCtrl.$formatters.push(function(value) {
return value.toString(); // Convert scope value to string
});
```
`). This is to make it easy to scroll to anchors inside a document.
Related to #6162
Closes #8492
#### since 1.2.17 and 1.3.0-beta.10
In html5 mode without a ` ` and then on ` `
would produce `$location.path()==='/page1/page2'`. The code that introduced this behavior was removed
and Angular now also requires a `
```
If `$scope.value` is `4`, and `$scope.units` is `undefined`, the resulting markup is unchanged:
```html
```
However, if $scope.units is `""`, then the resulting markup is updated:
```html
```
Closes #8376
Closes #8399
- due to [0d608d04](https://github.com/angular/angular.js/commit/0d608d041f37a659d8d8ba7a9b688e132587035d),
element-transcluded directives now have an extra comment automatically appended to their cloned DOM
This comment is usually needed to keep track the end boundary in the event child directives modify the root node(s).
If not used for this purpose it can be safely ignored.
- due to [75c4cbf8](https://github.com/angular/angular.js/commit/75c4cbf81fcd6d49656d3cb044e59e5fd24e0479),
`directive.type` was renamed to `directive.templateNamespace`
This change is breaking only within 1.3.0-beta releases: `directive.type` was renamed to `directive.templateNamespace`
The property name `type` was too general.
- **$parse:** due to [8863b9d0](https://github.com/angular/angular.js/commit/8863b9d04c722b278fa93c5d66ad1e578ad6eb1f),
`this` in filters is now undefined and no longer the scope
It's a bad practice for filters to have hidden dependencies, so pulling stuff from scope directly
is not a good idea. Scope being the filter context was never documented as public API, so we don't
expect that any significant code depends on this behavior.
If an existing filter has a dependency on the scope instance, the scope reference can
be passed into the filter as a filter argument (this is highly discouraged for new code):
Before: `{{ user.name | customFilter }}`
After: `{{ user.name | customFilter:this }}`
- **Scope:** due to [0554c1aa](https://github.com/angular/angular.js/commit/0554c1aae49a81691154a77e70b602b0f24dca81),
`deregisterNotifier` callback for `$watch` is no longer available
This API was available only in the last few 1.3 beta versions and is not
very useful for applications, so we don't expect that anyone will be affected
by this change.
- **input:** due to [a7fb357f](https://github.com/angular/angular.js/commit/a7fb357fa122e0a056ce1de838a2dfaf1ebc2953),
by default, do not trim `input[type=password]` values.
Previously, `input[type=password]` would trim values by default, and would require an explicit `ng-trim="false"`
to disable the trimming behavior. After this change, `ng-trim` no longer affects `input[type=password]`, and will
never trim the password value.
Closes #8250
Closes #8230
` <---- my-foo attribute matched the directive
`
` <---- my-foo attribute matched the directive
`` like
elements unlikely.
Closes #8321
{{start}}
Grouped content
{{end}}
```
```javascript
.directive('fancyDirective', function() {
return {
link: angular.noop
};
})
```
After:
```html
{{start}}
Grouped content
{{end}}
```
```javascript
.directive('fancyDirective', function() {
return {
multiElement: true, // Explicitly mark as a multi-element directive.
link: angular.noop
};
})
```
Closes #5372
Closes #6574
Closes #5370
Closes #8044
Closes #7336
- **$rootScope:** due to [02c0ed27](https://github.com/angular/angular.js/commit/02c0ed27bc375d5352fefdd7e34aad9758621283),
Previously, it was possible for an action passed to $watch
to be a string, interpreted as an angular expression. This is no longer supported.
The action now has to be a function.
Passing an action to $watch is still optional.
Before:
```javascript
$scope.$watch('state', ' name="" ');
```
After:
```javascript
$scope.$watch('state', function () {
$scope.name = "";
});
```
Closes #8190
- **bootstrap:** due to [666a3835](https://github.com/angular/angular.js/commit/666a3835d231b3f77f907276be18b3c0086e5d12),
If using any of the mechanisms specified above, then migrate by
specifying the attribute `ng-app` to the root element. E.g.
```html
...
```
Closes #8147
- **ngList:** due to [c6c9d26e](https://github.com/angular/angular.js/commit/c6c9d26e3487ce24ece390c26994123964f805b0),
The `ngList` directive no longer supports splitting the view value
via a regular expression. We need to be able to re-join list items back
together and doing this when you can split with regular expressions can
lead to inconsistent behavior and would be much more complex to support.
If your application relies upon ngList splitting with a regular expression
then you should either try to convert the separator to a simple string or
you can implement your own version of this directive for you application.
Closes #4008
Closes #2561
Closes #4344
- **ngSwitch:** due to [4f32e3ee](https://github.com/angular/angular.js/commit/4f32e3eef152bcaab7f7ab151fc824e71a591473),
** Directive Priority Changed ** - this commit changes the priority
of `ngSwitchWhen` and `ngSwitchDefault` from `800` to `1200`. This makes their
priority higher than `ngRepeat`, which allows items to be repeated on
the switch case element reliably.
In general your directives should have a lower priority than these directives
if you want them to exist inside the case elements. If you relied on the
priority of these directives then you should check that your code still
operates correctly.
Closes #8235