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然后获取颜色属性。

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

使用双向绑定而不是属性

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);
            });
        }
    }
})

AngularJS：在Directive中获取KeyValuePairs

3 个答案: