如何在装饰器中访问ngStyle键和值？

Question

我的应用程序中有一个颜色名称列表.

let colours = {
  mango: '#e59c09',
  midnight: '#1476a0'
};

我想扩展ngStyle指令,以便能够理解我的自定义颜色名称.我做这个装饰的ngStyle指令.但是,我在装饰者的编译功能上遇到了一场艰苦的战斗.我可以访问元素的ngStyle属性,但它是一个字符串(可以理解).JSON.parse()不起作用,因为它不总是一个有效的JSON字符串,因为绑定一次等...

我只想进入,迭代所有样式键,如果它包含color,我想检查值 - 如果它是上述自定义颜色之一,则替换为十六进制.

我似乎无法访问任何ngStyle内部函数,源代码令人困惑和简短; 它似乎只是设置元素CSS - $ parse在哪里完成它的工作？例如,当ng-style="{color: ctrl.textColor}"- 在ngStyle源代码中没有任何内容可以提取值ctrl.textColour.我在找错了地方吗？

无论如何,如何访问ng样式的键值,以便我可以将自定义颜色更改为其十六进制代码？

这是我在装饰者中到目前为止所得到的:

$provide.decorator('ngStyleDirective', function($delegate) {

    let directive = $delegate[0];
    let link = directive.link;

    directive.compile = function(element, attrs) {

        // Expression here is a string property
        let expression = attrs.ngStyle;

        return function(scope, elem, attr) {

          // How do I iterate over and update style values here?

          // Run original function
          link.apply(this, arguments);

        }

      }

      return $delegate;

});

我尝试使用正则表达式来提取模式等并检查元素,但是,似乎错误的方法来解决问题,因为我必须手动更新字符串并将其传递给基本链接功能.

这是一个plnkr的例子.

如果有更好的方法来做我想做的事,请告诉我.

Answer 1

不管怎样，我如何访问 ng 风格的键值，以便我可以将自定义颜色更改为其十六进制代码？

ngStyle属性可以在编译函数中重写：

directive.compile = function(element, attrs) {
  let expression = getExpressions(attrs.ngStyle);
  attrs.ngStyle = expression;

  return function(scope, elem, attr) {
    // Run original function
    link.apply(this, arguments);  
  }
}

JSON.parse()

如果更新了 HTML，则可以使用JSON.parse()，以便键被双引号包围，这意味着ng-style属性需要用单引号分隔（尽管如果真的想要，可以尝试转义）双引号...)

<p ng-style='{ "color": "#e59c09" }'>Hello {{name}}!</p>
<p ng-style='{ "padding": "20px 10px", "background-color": "#1476a0", "color": "#ddd" }'>It is dark here</p>

然后解析该字符串应该会产生一个有效的对象，并且可以使用Object.keys()来迭代键，检查单词color。如果键包含color，则可以使用Array.indexOf检查颜色数组中是否存在该值。如果数组中确实存在，则可以使用String.replace()替换变量的值（即color中的键）。

function getExpressions(str) {
    var parsed = JSON.parse(str);
    Object.keys(parsed).forEach(function(key) {
        if (key.indexOf('color') > -1) {
            if (Object.keys(colours).indexOf(parsed[key]) > -1) {
                str = str.replace(parsed[key], colours[parsed[key]])
            }
         }
    });
    return str;
}

请参阅下面示例中的演示。顺便说一句，我必须删除在函数getExpressions()范围内声明的未使用的变量颜色，因为它隐藏了对上面第 3 行定义的变量的访问。这是一个更新的 plunker。

directive.compile = function(element, attrs) {
  let expression = getExpressions(attrs.ngStyle);
  attrs.ngStyle = expression;

  return function(scope, elem, attr) {
    // Run original function
    link.apply(this, arguments);  
  }
}

<p ng-style='{ "color": "#e59c09" }'>Hello {{name}}!</p>
<p ng-style='{ "padding": "20px 10px", "background-color": "#1476a0", "color": "#ddd" }'>It is dark here</p>

function getExpressions(str) {
    var parsed = JSON.parse(str);
    Object.keys(parsed).forEach(function(key) {
        if (key.indexOf('color') > -1) {
            if (Object.keys(colours).indexOf(parsed[key]) > -1) {
                str = str.replace(parsed[key], colours[parsed[key]])
            }
         }
    });
    return str;
}