javascript - 在 angularjs 中绑定(bind) HTML 属性

Question

我有这个代码:

<span data-icon="{{table.addIcon || '&#xe603;'}}"></span>

该跨度创建一个如下所示的图标:

但是，我想为使用此指令的开发人员提供定义新图标的可能性。它正在工作，但是，我遇到的问题是，假设我有这个:

$scope.table.addIcon = ""

而不是创建元素

<span data-icon="&#xe070;"></span> 

它会创建它

<span data-icon="&amp;#xe070;"></span>

这将无法添加图标，所以不要看到这个:

我的是这样的:

有没有办法避免将 & 转换为 &？

添加解决方案

感谢 miensol，解决方案是这样的:

.directive("changeIcon", function() {
    var d = document.createElement("div");
    return {
        restrict: "A",
        link: function($scope, $ele, $attrs) {
            log($attrs);
            var originalIcon;
            $scope.decodedIcon = $attrs.icon;
            do {
                originalIcon = $scope.decodedIcon;
                d.innerHTML = originalIcon;
                $scope.decodedIcon = d.firstChild.nodeValue;
            } while (originalIcon != $scope.decodedIcon);
            $attrs.$set('data-icon', $scope.decodedIcon);
        }
    }
})

它是这样使用的:

<span change-icon icon="{{table.addIcon || '&#xe603;'}}"></span>

Answer 1

我创建了一个示例 jsfiddle尝试您描述的问题，但我可能遗漏了一些东西。

我怀疑您看到的是 & 而不是 & 因为 View 是服务器上的 html 编码。

无论哪种方式，decode html entities 都相当容易在javascript中。考虑以下示例:

m.directive('icon', function(){
    var div = document.createElement('div');

    return {
        scope: {
            icon:'='
        },
        link: function($scope,$element,$attrs){            
            var originalIcon;
            $scope.decodedIcon = $scope.icon;
            do {
                originalIcon = $scope.decodedIcon;
                div.innerHTML = originalIcon;
                $scope.decodedIcon = div.firstChild.nodeValue;
            } while (originalIcon != $scope.decodedIcon); 
            console.log('data-icon', $scope.decodedIcon);
            $attrs.$set('data-icon', $scope.decodedIcon);
        }
    };
});

你可以玩玩它here希望它能帮助解决您的问题。