我尝试使用 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="">
结合。
我应该怎么做才能让它发挥作用?
谢谢
最佳答案
我已经测试了下面的代码,它可以工作:
element.append("<i class='fa " + attributes.icon + "'></i>");
关于javascript - Angular Directive 未能添加元素图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34921941/