|
39 | 39 | * </hljs>
|
40 | 40 | *
|
41 | 41 | */
|
42 |
| - function MdColorsService($mdTheming, $mdUtil, $parse, $log) { |
| 42 | + function MdColorsService($mdTheming, $mdUtil, $log) { |
43 | 43 | colorPalettes = colorPalettes || Object.keys($mdTheming.PALETTES);
|
44 | 44 |
|
45 | 45 | // Publish service instance
|
|
61 | 61 | * Then calculate the rgba() values based on the theme color parts
|
62 | 62 | *
|
63 | 63 | * @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'}`. |
68 | 66 | *
|
69 | 67 | * @usage
|
70 | 68 | * <hljs lang="js">
|
|
78 | 76 | * });
|
79 | 77 | * </hljs>
|
80 | 78 | */
|
81 |
| - function applyThemeColors(element, scope, colorExpression) { |
| 79 | + function applyThemeColors(element, colorExpression) { |
82 | 80 | 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 |
| - |
89 | 81 | // Assign the calculate RGBA color values directly as inline CSS
|
90 |
| - element.css(interpolateColors(themeColors)); |
| 82 | + element.css(interpolateColors(colorExpression)); |
91 | 83 | } catch( e ) {
|
92 | 84 | $log.error(e.message);
|
93 | 85 | }
|
|
265 | 257 | * </hljs>
|
266 | 258 | *
|
267 | 259 | */
|
268 |
| - function MdColorsDirective($mdColors, $mdUtil, $log) { |
| 260 | + function MdColorsDirective($mdColors, $mdUtil, $log, $parse) { |
269 | 261 | return {
|
270 | 262 | restrict: 'A',
|
271 | 263 | compile: function (tElem, tAttrs) {
|
272 | 264 | var shouldWatch = shouldColorsWatch();
|
273 | 265 |
|
274 | 266 | return function (scope, element, attrs) {
|
275 | 267 | 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); |
277 | 271 | };
|
278 | 272 |
|
279 | 273 | try {
|
280 | 274 | if (shouldWatch) {
|
281 | 275 | scope.$watch(colorExpression, angular.bind(this,
|
282 |
| - $mdColors.applyThemeColors, element, scope |
283 |
| - )); |
| 276 | + $mdColors.applyThemeColors, element |
| 277 | + ), true); |
284 | 278 | }
|
285 | 279 | else {
|
286 |
| - $mdColors.applyThemeColors(element, scope, colorExpression()); |
| 280 | + $mdColors.applyThemeColors(element, colorExpression()); |
287 | 281 | }
|
288 | 282 |
|
289 | 283 | }
|
|
0 commit comments