diff --git a/docs/content/guide/interpolation.ngdoc b/docs/content/guide/interpolation.ngdoc index f1d07df1ca69..168790b9342f 100644 --- a/docs/content/guide/interpolation.ngdoc +++ b/docs/content/guide/interpolation.ngdoc @@ -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: Disabled ``` @@ -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: Disabled ``` @@ -106,6 +106,19 @@ can be used with `ngAttr` instead. The following is a list of known problematic - **type** in `` in Internet Explorer 11 (see [issue 14117](https://github.com/angular/angular.js/issues/5025)) - **value** in `` 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 diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js index c7e2c2835687..e84bd1d47fea 100644 --- a/src/ng/directive/ngClass.js +++ b/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 | * |----------------------------------|-------------------------------------| diff --git a/src/ng/directive/ngStyle.js b/src/ng/directive/ngStyle.js index 16da9bec496b..27ee73b3c6a4 100644 --- a/src/ng/directive/ngStyle.js +++ b/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 *