From 5483fca9c1e93ea2fa68d15ef1448b30f72d6487 Mon Sep 17 00:00:00 2001 From: Georgios Kalpakas Date: Sat, 25 Jun 2016 17:06:02 +0300 Subject: [PATCH 1/2] docs(guide/interpolation): add known issue (do not change the content of interpolated strings) Closes #12813 --- docs/content/guide/interpolation.ngdoc | 15 +++++++++++++-- src/ng/directive/ngClass.js | 5 +++++ src/ng/directive/ngStyle.js | 5 +++++ 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/docs/content/guide/interpolation.ngdoc b/docs/content/guide/interpolation.ngdoc index f1d07df1ca69..386a0da014e8 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: ``` @@ -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: ``` @@ -144,3 +144,14 @@ interpolation markup and not data. - It impacts performance, as interpolation adds another watcher to the scope. - Since this is not recommended usage, we do not test for this, and changes to Angular core may break your code. + +## Known Issues + +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`. 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 * From 7178c1fc4841829b04e5e003702044cc2f9c7eaf Mon Sep 17 00:00:00 2001 From: Georgios Kalpakas Date: Tue, 5 Jul 2016 00:06:51 +0300 Subject: [PATCH 2/2] fixup --- docs/content/guide/interpolation.ngdoc | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/docs/content/guide/interpolation.ngdoc b/docs/content/guide/interpolation.ngdoc index 386a0da014e8..168790b9342f 100644 --- a/docs/content/guide/interpolation.ngdoc +++ b/docs/content/guide/interpolation.ngdoc @@ -106,6 +106,19 @@ can be used with `ngAttr` instead. The following is a list of known problematic - **type** in `