Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 54a7caf

Browse files
committed
docs(*): document the breaking change in 7ceb5f6
1 parent eba7c28 commit 54a7caf

File tree

2 files changed

+131
-0
lines changed

2 files changed

+131
-0
lines changed

CHANGELOG.md

+88
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,9 @@ consolidating all the changes shown in the previous 1.6.0 release candidates.**
172172
([369fb7](https://github.com/angular/angular.js/commit/369fb7f4f73664bcdab0350701552d8bef6f605e))
173173
- don't throw for elements with missing `getAttribute`
174174
([4e6c14](https://github.com/angular/angular.js/commit/4e6c14dcae4a9a30b3610a288ef8d20db47c4417))
175+
- don't get/set properties when getting/setting boolean attributes
176+
([7ceb5f](https://github.com/angular/angular.js/commit/7ceb5f6fcc43d35d1b66c3151ce6a71c60309304),
177+
[#14126](https://github.com/angular/angular.js/issues/14126))
175178
- don't remove a boolean attribute for `.attr(attrName, '')`
176179
([3faf45](https://github.com/angular/angular.js/commit/3faf4505732758165083c9d21de71fa9b6983f4a))
177180
- remove the attribute for `.attr(attribute, null)`
@@ -651,6 +654,48 @@ var bgColor = elem.css('background-color');
651654
var bgColor = elem.css('backgroundColor');
652655
```
653656

657+
- **[7ceb5f](https://github.com/angular/angular.js/commit/7ceb5f6fcc43d35d1b66c3151ce6a71c60309304)**: don't get/set properties when getting/setting boolean attributes
658+
659+
Previously, all boolean attributes were reflected into the corresponding property when calling a
660+
setter and from the corresponding property when calling a getter, even on elements that don't treat
661+
those attributes in a special way. Now Angular doesn't do it by itself, but relies on browsers to
662+
know when to reflect the property. Note that this browser-level conversion differs between browsers;
663+
if you need to dynamically change the state of an element, you should modify the property, not the
664+
attribute. See https://jquery.com/upgrade-guide/1.9/#attr-versus-prop- for a more detailed
665+
description about a related change in jQuery 1.9.
666+
667+
This change aligns jqLite with jQuery 3. To migrate the code follow the example below:
668+
669+
Before:
670+
671+
CSS:
672+
673+
```css
674+
input[checked="checked"] { ... }
675+
```
676+
677+
JS:
678+
679+
```js
680+
elem1.attr('checked', 'checked');
681+
elem2.attr('checked', false);
682+
```
683+
684+
After:
685+
686+
CSS:
687+
688+
```css
689+
input:checked { ... }
690+
```
691+
692+
JS:
693+
694+
```js
695+
elem1.prop('checked', true);
696+
elem2.prop('checked', false);
697+
```
698+
654699
- **[3faf45](https://github.com/angular/angular.js/commit/3faf4505732758165083c9d21de71fa9b6983f4a)**:
655700
don't remove a boolean attribute for `.attr(attrName, '')`
656701

@@ -1851,6 +1896,7 @@ Please read the [Sandbox Removal Blog Post](http://angularjs.blogspot.com/2016/0
18511896
- **jqLite:**
18521897
- implement `jqLite(f)` as an alias to `jqLite(document).ready(f)` ([369fb7](https://github.com/angular/angular.js/commit/369fb7f4f73664bcdab0350701552d8bef6f605e))
18531898
- don't throw for elements with missing `getAttribute` ([4e6c14](https://github.com/angular/angular.js/commit/4e6c14dcae4a9a30b3610a288ef8d20db47c4417))
1899+
- don't get/set properties when getting/setting boolean attributes ([7ceb5f](https://github.com/angular/angular.js/commit/7ceb5f6fcc43d35d1b66c3151ce6a71c60309304), [#14126](https://github.com/angular/angular.js/issues/14126))
18541900
- don't remove a boolean attribute for `.attr(attrName, '')` ([3faf45](https://github.com/angular/angular.js/commit/3faf4505732758165083c9d21de71fa9b6983f4a))
18551901
- remove the attribute for `.attr(attribute, null)` ([4e3624](https://github.com/angular/angular.js/commit/4e3624552284d0e725bf6262b2e468cd2c7682fa))
18561902
- return `[]` for `.val()` on `<select multiple>` with no selection ([d882fd](https://github.com/angular/angular.js/commit/d882fde2e532216e7cf424495db1ccb5be1789f8))
@@ -2028,6 +2074,48 @@ var bgColor = elem.css('background-color');
20282074
var bgColor = elem.css('backgroundColor');
20292075
```
20302076

2077+
- **[7ceb5f](https://github.com/angular/angular.js/commit/7ceb5f6fcc43d35d1b66c3151ce6a71c60309304)**: don't get/set properties when getting/setting boolean attributes
2078+
2079+
Previously, all boolean attributes were reflected into the corresponding property when calling a
2080+
setter and from the corresponding property when calling a getter, even on elements that don't treat
2081+
those attributes in a special way. Now Angular doesn't do it by itself, but relies on browsers to
2082+
know when to reflect the property. Note that this browser-level conversion differs between browsers;
2083+
if you need to dynamically change the state of an element, you should modify the property, not the
2084+
attribute. See https://jquery.com/upgrade-guide/1.9/#attr-versus-prop- for a more detailed
2085+
description about a related change in jQuery 1.9.
2086+
2087+
This change aligns jqLite with jQuery 3. To migrate the code follow the example below:
2088+
2089+
Before:
2090+
2091+
CSS:
2092+
2093+
```css
2094+
input[checked="checked"] { ... }
2095+
```
2096+
2097+
JS:
2098+
2099+
```js
2100+
elem1.attr('checked', 'checked');
2101+
elem2.attr('checked', false);
2102+
```
2103+
2104+
After:
2105+
2106+
CSS:
2107+
2108+
```css
2109+
input:checked { ... }
2110+
```
2111+
2112+
JS:
2113+
2114+
```js
2115+
elem1.prop('checked', true);
2116+
elem2.prop('checked', false);
2117+
```
2118+
20312119
- **[3faf45](https://github.com/angular/angular.js/commit/3faf4505732758165083c9d21de71fa9b6983f4a)**: don't remove a boolean attribute for `.attr(attrName, '')`
20322120

20332121
Before, using the `attr` method with an empty string as a value

docs/content/guide/migration.ngdoc

+43
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ commits for more info.
9090
(see [details](guide/migration#migrate1.5to1.6-ng-misc-jqLite) below):
9191
- Keys passed to `.data()` and `.css()` are now camelCased in the same way as the jQuery methods
9292
do.
93+
- Getting/setting boolean attributes no longer takes the corresponding properties into account.
9394
- Setting boolean attributes to empty string no longer removes the attribute.
9495
- Calling `.val()` on a multiple select will always return an array, even if no option is
9596
selected.
@@ -881,6 +882,48 @@ var bgColor = elem.css('background-color');
881882
var bgColor = elem.css('backgroundColor');
882883
```
883884

885+
<hr />
886+
<major />
887+
**Due to [7ceb5f](https://github.com/angular/angular.js/commit/7ceb5f6fcc43d35d1b66c3151ce6a71c60309304)**,
888+
getting/setting boolean attributes will no longer take the corresponding properties into account.
889+
Previously, all boolean attributes were reflected into the corresponding property when calling a
890+
setter and from the corresponding property when calling a getter, even on elements that don't treat
891+
those attributes in a special way. Now Angular doesn't do it by itself, but relies on browsers to
892+
know when to reflect the property. Note that this browser-level conversion differs between browsers;
893+
if you need to dynamically change the state of an element, you should modify the property, not the
894+
attribute. See https://jquery.com/upgrade-guide/1.9/#attr-versus-prop- for a more detailed
895+
description about a related change in jQuery 1.9.
896+
897+
This change aligns jqLite with jQuery 3. To migrate the code follow the example below:
898+
899+
Before:
900+
901+
```css
902+
/* CSS */
903+
904+
input[checked="checked"] { ... }
905+
```
906+
```js
907+
// JS
908+
909+
elem1.attr('checked', 'checked');
910+
elem2.attr('checked', false);
911+
```
912+
913+
After:
914+
915+
```css
916+
/* CSS */
917+
918+
input:checked { ... }
919+
```
920+
```js
921+
// JS
922+
923+
elem1.prop('checked', true);
924+
elem2.prop('checked', false);
925+
```
926+
884927
<hr />
885928
<major />
886929
**Due to [3faf45](https://github.com/angular/angular.js/commit/3faf4505732758165083c9d21de71fa9b6983f4a)**,

0 commit comments

Comments
 (0)