Angular Directive无法添加元素图标

Question

I try using Angular directive to make a button dynamically.

Here is my current code:

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

and my html: <ripple-button type="button" data-color="danger" icon="fa-search">Filter</ripple-button>

everything works perfectly except for the icon. When it render to browser it became:

<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>

The fa-search not combining with <i class=""> .

What should i do to make it work?

Thanks

Answer 1

I havent tested this, but try to change

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

to

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

I think that might do the trick.

Answer 2

我已经测试了以下代码，并且可以正常工作：

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