綁定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希望它可以幫助您解決問題。