Angular Directive未能添加元素圖標

Question

我嘗試使用Angular指令動態生成按鈕。

這裏是我當前的代碼：

function rippleButton() { 
    return { 
     restrict: 'E', 
     compile: function (element, attributes) { 
      element.addClass('btn waves-effect waves-light'); 
      if (attributes.color) { 
       element.addClass('btn-' + attributes.color); 
      } 
      if (attributes.size) { 
       element.addClass('btn-' + attributes.size); 
      } 
      if (attributes.type == "Submit") { 
       element.addClass('btn-primary'); 
      } 
      if (attributes.icon) { 
       element.append("<i class=fa " + attributes.icon + "></i>"); 
      } 
     } 
    }; 
} 

和我的html： <ripple-button type="button" data-color="danger" icon="fa-search">Filter</ripple-button>

一切完美，除了圖標。當它呈現給瀏覽器，它變成了：

<ripple-button type="button" data-color="danger" icon="fa-search" class="btn waves-effect waves-light btn-danger">Filter<i class="fa" fa-search=""></i></ripple-button>

的fa-search不<i class="">結合。

我該怎麼做才能使它工作？

感謝

Answer 1

從來就測試下面的代碼，它的工作原理：

element.append("<i class='fa " + attributes.icon + "'></i>"); 

Answer 2

我還沒有測試這一點，但嘗試改變

element.append("<i class=fa " + attributes.icon + "></i>"); 

到

element.append("<i class='fa " + attributes.icon + "'></i>"); 

我認爲這可能做的伎倆。