`) 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.
- **fix($compile): secure `link[href]` as a `RESOURCE_URL`s in `$sce`. ([04cad4](https://github.com/angular/angular.js/commit/04cad41d26ebaf44b5ee0c29a152d61f235f3efa))**:
`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 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:
```
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.)
` 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 Angular 1.3.x, setting `scope.x = 200` would select the `option` with the value 200 in the following `select`:
```
100
200
```
In Angular 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 expresison. 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