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

docs(guide/interpolation): add known issue (do not change the content of interpolated strings) #14825

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions docs/content/guide/interpolation.ngdoc
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ would be lost, because the browser ignores the attribute value.
In the following example, the interpolation information would be ignored and the browser would simply
interpret the attribute as present, meaning that the button would always be disabled.

```html
```html
Disabled: <input type="checkbox" ng-model="isDisabled" />
<button disabled="{{isDisabled}}">Disabled</button>
```
Expand All @@ -49,7 +49,7 @@ For this reason, Angular provides special `ng`-prefixed directives for the follo
These directives take an expression inside the attribute, and set the corresponding boolean attribute
to true when the expression evaluates to truthy.

```html
```html
Disabled: <input type="checkbox" ng-model="isDisabled" />
<button ng-disabled="isDisabled">Disabled</button>
```
Expand Down Expand Up @@ -106,6 +106,19 @@ can be used with `ngAttr` instead. The following is a list of known problematic
- **type** in `<button>` in Internet Explorer 11 (see [issue 14117](https://github.com/angular/angular.js/issues/5025))
- **value** in `<progress>` in Internet Explorer = 11 (see [issue 7218](https://github.com/angular/angular.js/issues/7218))

## Known Issues

### Dynamically changing an interpolated value

You should avoid dynamically changing the content of an interpolated string (e.g. attribute value
or text node). Your changes are likely to be overwriten, when the original string gets evaluated.
This restriction applies to both directly changing the content via JavaScript or indirectly using a
directive.

For example, you should not use interpolation in the value of the `style` attribute (e.g.
`style="color: {{ 'orange' }}; font-weight: {{ 'bold' }};"`) **and** at the same time use a
directive that changes the content of that attributte, such as `ngStyle`.

### Embedding interpolation markup inside expressions

<div class="alert alert-danger">
Expand Down
5 changes: 5 additions & 0 deletions src/ng/directive/ngClass.js
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,11 @@ function classDirective(name, selector) {
* When the expression changes, the previously added classes are removed and only then are the
* new classes added.
*
* @knownIssue
* You should not use {@link guide/interpolation interpolation} in the value of the `class`
* attribute, when using the `ngClass` directive on the same element.
* See {@link guide/interpolation#known-issues here} for more info.
*
* @animations
* | Animation | Occurs |
* |----------------------------------|-------------------------------------|
Expand Down
5 changes: 5 additions & 0 deletions src/ng/directive/ngStyle.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@
* @description
* The `ngStyle` directive allows you to set CSS style on an HTML element conditionally.
*
* @knownIssue
* You should not use {@link guide/interpolation interpolation} in the value of the `style`
* attribute, when using the `ngStyle` directive on the same element.
* See {@link guide/interpolation#known-issues here} for more info.
*
* @element ANY
* @param {expression} ngStyle
*
Expand Down