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

Commit e9a1d4f

Browse files
EladBezalelThomasBurleson
authored andcommitted
fix(colors): parsed watched expression
- Moved expression parsing inside the watch, this way the watch could really trigger changes when the interpolated expression had changed fixes #8212 Closes #8235
1 parent d62bb5e commit e9a1d4f

File tree

2 files changed

+13
-19
lines changed

2 files changed

+13
-19
lines changed

src/components/colors/colors.js

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
* </hljs>
4040
*
4141
*/
42-
function MdColorsService($mdTheming, $mdUtil, $parse, $log) {
42+
function MdColorsService($mdTheming, $mdUtil, $log) {
4343
colorPalettes = colorPalettes || Object.keys($mdTheming.PALETTES);
4444

4545
// Publish service instance
@@ -61,10 +61,8 @@
6161
* Then calculate the rgba() values based on the theme color parts
6262
*
6363
* @param {DOMElement} element the element to apply the styles on.
64-
* @param {scope} scope a scope is needed in case there are interpolated values in the expression.
65-
* @param {string|object} colorExpression json object, keys are css properties and values are string of the wanted color,
66-
* for example: `{color: 'red-A200-0.3'}`. Note that the color keys must be upperCamelCase instead of snake-case.
67-
* e.g. `{background-color: 'grey-300'}` --> `{backgroundColor: 'grey-300'}`
64+
* @param {object} colorExpression json object, keys are css properties and values are string of the wanted color,
65+
* for example: `{color: 'red-A200-0.3'}`.
6866
*
6967
* @usage
7068
* <hljs lang="js">
@@ -78,16 +76,10 @@
7876
* });
7977
* </hljs>
8078
*/
81-
function applyThemeColors(element, scope, colorExpression) {
79+
function applyThemeColors(element, colorExpression) {
8280
try {
83-
// Json.parse() does not work because the keys are not quoted;
84-
// use $parse to convert to a hash map
85-
// NOTE: keys cannot be snake-case, upperCamelCase are required
86-
// e.g. {background-color: 'grey-300'} --> {backgroundColor: 'grey-300'}
87-
var themeColors = $parse(colorExpression)(scope);
88-
8981
// Assign the calculate RGBA color values directly as inline CSS
90-
element.css(interpolateColors(themeColors));
82+
element.css(interpolateColors(colorExpression));
9183
} catch( e ) {
9284
$log.error(e.message);
9385
}
@@ -265,25 +257,27 @@
265257
* </hljs>
266258
*
267259
*/
268-
function MdColorsDirective($mdColors, $mdUtil, $log) {
260+
function MdColorsDirective($mdColors, $mdUtil, $log, $parse) {
269261
return {
270262
restrict: 'A',
271263
compile: function (tElem, tAttrs) {
272264
var shouldWatch = shouldColorsWatch();
273265

274266
return function (scope, element, attrs) {
275267
var colorExpression = function () {
276-
return attrs.mdColors;
268+
// Json.parse() does not work because the keys are not quoted;
269+
// use $parse to convert to a hash map
270+
return $parse(attrs.mdColors)(scope);
277271
};
278272

279273
try {
280274
if (shouldWatch) {
281275
scope.$watch(colorExpression, angular.bind(this,
282-
$mdColors.applyThemeColors, element, scope
283-
));
276+
$mdColors.applyThemeColors, element
277+
), true);
284278
}
285279
else {
286-
$mdColors.applyThemeColors(element, scope, colorExpression());
280+
$mdColors.applyThemeColors(element, colorExpression());
287281
}
288282

289283
}

src/components/colors/colors.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -398,7 +398,7 @@ describe('md-colors', function () {
398398
var color = $mdColorPalette['red']['200'].value;
399399
var expectedRGB = supplant('rgb({0}, {1}, {2})', [color[0], color[1], color[2]]);
400400

401-
$mdColors.applyThemeColors(element, scope, '{background: \'red-200\'}');
401+
$mdColors.applyThemeColors(element, { background: 'red-200' });
402402
expect(element[0].style.background).toContain( expectedRGB );
403403
}));
404404

0 commit comments

Comments
 (0)