angularjs - 将 CSS 内容传入指令

有没有一种方法可以在指令中使用 CSS 的内容。我想重用一个指令，然后在该指令中设置类，这样内容就可以显示来自 FontAwesome 的不同图标？

模板

 <div class="modal-tooltip" tabindex="-1">
        <span class="CSS-CLASS-I-WANT-TO-PASS-IN"></span>
        <div class="tooltip-body">
            <span ng-transclude></span>
        </div>
    </div>

指令

restrict = "E";
        scope = {
            alignment: "@"
        };

        template = Templates.toolTip;
        transclude = true;
        controller = ["$scope", ($scope) => {

        }];

.MY-CSS-CLASS-我-想-更改-内容-的

content: "\f059";

答案＃1

你可以将 FontAwesome 类传递给你的自定义指令以应用到模板上。

在我的例子中，FontAwesome 类是使用 icon 属性设置的。

 <custom-button icon="fa fa-facebook"> Facebook</custom-button>

在我的指令中，我获取这个值并将类应用到我的 <span> 标签上。

app.directive('customButton', function() {
        return {
           restrict: 'E',
           transclude: true,
           scope: {
              icon: '@'
           },
           template: "<button>" +
                        "<span class={{icon}}>" +
                        "</span>" + 
                        "<strong ng-transclude>" +
                        "</strong>" +
                     "</button>"
           } 
});

这是一个包含我示例的 JSFiddle 链接：https://jsfiddle.net/cpgoette/ufgys7j0/