将 css 的内容传入指令

【问题标题】：pass in content of css into directive将 css 的内容传入指令
【发布时间】：2016-11-11 07:54:59
【问题描述】：

有没有办法将 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-I-WANT-TO-CHANGE-THE-CONTENT-OF

content: "\f059";

【问题讨论】：

标签： css angularjs angularjs-directive typescript

【解决方案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/

【讨论】：