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

Closes #12813

Closes #14825

docs/content/guide/interpolation.ngdoc

@@ -46,7 +46,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>
 ```
@@ -58,7 +58,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>
 ```
@@ -115,6 +115,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">

src/ng/directive/ngClass.js

@@ -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                              |
  * |----------------------------------|-------------------------------------|

src/ng/directive/ngStyle.js

@@ -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
  *