javascript - 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>");