Question

有没有办法将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) => {

        }];

。我-CSS-CLASS-I-WANT-TO-CHANGE-THE-CONTENT-OF

content: "\f059";

Answer 1

您可以将FontAwesome类传递给自定义指令以应用于模板。

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

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

将css的内容传递给指令

1 个答案: