![](/img/trans.png)
[英]using filters in component binding html attribute in angularjs (causing $digest() errors)
[英]Binding HTML attribute in angularjs
我有这个代码:
<span data-icon="{{table.addIcon || ''}}"></span>
该跨度创建了一个这样的图标:
但是,我想让开发人员使用这个指令,定义一个新图标的可能性。 然而,这是有效的,我有的问题是,假设我有这个:
$scope.table.addIcon = ""
而不是创建元素
<span data-icon=""></span>
它会创造它
<span data-icon="&#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 || ''}}"></span>
我已经创建了一个示例jsfiddle来尝试你描述的问题,但我可能遗漏了一些东西。
我怀疑你正在看到&
而不是&
因为视图是在服务器上进行html编码的 。
无论哪种方式,在javascript中解码html实体都相当容易。 考虑以下示例:
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);
}
};
});
你可以在这里玩它希望它有助于解决你的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.