绑定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尝试解决你所描述的问题，但我可能错过了一些东西。

我怀疑你看到&而不是&，因为视图是html编码在服务器。

无论哪种方式，它是相当容易在JavaScript中decode html entities。考虑下面的例子：

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希望它可以帮助您解决问题。