AngularJS：在指令中获取KeyValuePairs

Question

我目前正在编写AngularJS指令，当我将鼠标悬停在特定元素上时，该指令允许我设置某些类。

因此，我创建了以下指令：

OfficeUIModule.directive('toggleStyleAttributeOnHover', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attributes){
            var toggleStyleAttributes =     attributes['toggleStyleAttributeOnHover'];

            element.bind('mouseenter', function() {
                console.log(toggleStyleAttributes);
            });
        }
    }
})

创建HTML时，我确实将属性传递给了元素，从而允许执行该指令。

如下所示：

data-toggle-style-attribute-on-hover="{'color': {{contextualGroup.GroupTextColor}}}"

当我现在执行页面时，在浏览器的控制台窗口中，确实看到以下输出： {'color': #cf5c0a}

因此，这看起来不错，但是现在我需要解析此对象，以便可以添加样式属性，说颜色应该是＃cf5c0a

当然，该指令可能会接受几个参数，这意味着应将它们全部考虑在内。

我在这里迷路了。

Answer 1

在这种情况下，当您传递键值配对对象时，您可以简单地调用JSON.parse然后采用color属性。

JSON.parse(toggleStyleAttributes).color

如果您指的是ngClass指令的工作方式，它将在后台使用scope.$eval 。 您可以利用它，但是为了进行这项工作，您需要从表达式中删除花括号，例如：

data-toggle-style-attribute-on-hover="{'color':contextualGroup.GroupTextColor}"

然后，您应该能够访问color属性，就像使用JSON.parse的情况一样。

Answer 2

为了将字符串解析为对象，我认为您应该像这样格式化字符串：

{"color": "#cf5c0a"}

将键和值放入“”。

Answer 3

使用2向绑定而不是属性

angular.module('MyApp', []).directive('toggleStyleAttributeOnHover', function() {
    return {
        restrict: 'A',
        scope: {
            config: '=toggleStyleAttributeOnHover'
        },
        link: function(scope, element){
            element.bind('mouseenter', function() {
                element.css('color', scope.config.color);
            });
        }
    }
})