2016-07-08 6 views
0

ディレクティブにcssの内容を使用する方法はありますか。私はディレクティブを再利用し、そのディレクティブで、コンテンツをFontAwesomeとは異なるアイコンにすることができるようにクラスを設定しますか?あなたが渡すことができは、cssの内容をディレクティブに渡します。

テンプレート

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

答えて

0

テンプレートに適用するカスタムディレクティブの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/

関連する問題