javascript - 如何访问装饰器中的 ngStyle 键和值？

Question

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

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

我想扩展 ngStyle 指令以便能够理解我的自定义颜色名称。我正在通过 decorating 进行此操作ngStyle 指令。然而，我在装饰器的编译函数上遇到了一场艰苦的战斗。我可以访问元素的 ngStyle 属性，但它以字符串形式出现(可以理解)。 JSON.parse() 对其不起作用，因为由于绑定(bind)一次等原因，它并不总是有效的 JSON 字符串...

我只是想介入，遍历所有样式键，如果它包含 color，我想检查值 - 如果它是上述自定义之一，则用十六进制替换颜色。

我似乎无法访问任何 ngStyle 内部函数，以及 source code令人困惑且简短；它似乎只是设置元素 CSS - $parse 在哪里完成它的工作？例如，当 ng-style="{color: ctrl.textColor}" - ngStyle 源代码中没有任何东西可以提取 ctrl 的值。文字颜色。我看错地方了吗？

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

这是我目前在装饰器中得到的:

$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 example .

如果有更好的方法来完成我想做的事情，请告诉我。

Answer 1

Anyway, how do I access ng-style key values so that I can change custom colours to its hex codes please?

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.解析()

JSON.parse()可以在 HTML 更新时使用，以便键被双引号包围，这意味着 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。如果键包含颜色，Array.indexOf可用于检查值是否存在于 colors 数组中。如果它确实存在于数组中，则 String.replace()可用于替换变量的值(即 colours 中的键)。

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() 范围内声明的未使用变量 colours，因为它隐藏了对上面第 3 行定义的变量的访问. Here is an updated plunker .

let app = angular.module('plunker', []);
let colours = {
  mango: '#e59c09',
  midnight: '#1476a0'
};
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});
app.config(function($provide) {
  // Extract colour values from the string
  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;
  }

  $provide.decorator('ngStyleDirective', function($delegate) {
    let directive = $delegate[0];
    let link = directive.link;

    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);
      }
    }
    return $delegate;
  });
});

div + div {
  margin-top: 60px;
}

.comment { 
  font-family: courier;
  font-size: 12px;
  margin: 15px 0;
}

<script src="https://code.angularjs.org/1.4.12/angular.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
  <div>
    <p class="comment">--- with hex --</p>
    <p ng-style='{ "color": "#e59c09" }'>Hello {{name}}!</p>
    <p ng-style='{ "padding": "20px 10px", "background-color": "#1476a0", "color": "#ddd" }'>It is dark here</p>
  </div>

  <div>
    <p class="comment">--- with custom colours --</p>
    <p ng-style='{ "color": "mango" }'>Hello {{name}}!</p>
    <p ng-style='{ "padding": "20px 10px", "background-color": "midnight", "color": "#ddd" }'>It is dark here</p>
  </div>
</div>