Inhalt von css in Richtlinie übergeben

Question

Gibt es eine Möglichkeit, den Inhalt von CSS für eine Richtlinie zu verwenden. Ich möchte eine Direktive wiederverwenden und dann in dieser Direktive die Klasse so einstellen, dass der Inhalt verschiedene Icons von FontAwesome sein kann?

Vorlage

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

Richtlinie

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

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

     }]; 

.my-CSS-CLASS-I-WANT-TO-CHANGE-THE-CONTENT-OF

content: "\f059"; 

Answer 1

können Sie übergeben die FontAwesome-Klasse für Ihre benutzerdefinierte Anweisung, die auf die Vorlage angewendet werden soll. In diesem Beispiel wird die FontAwesome-Klasse mit dem Attribut icon festgelegt.

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

Und in meiner Richtlinie, nehme ich diesen Wert und anwenden, die Klasse zu meinem <span>-Tag.

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

ist hier ein JSFiddle mit meinem Beispiel in Aktion: https://jsfiddle.net/cpgoette/ufgys7j0/