CSSはIoniconをどのように変換できますか？

Question

私はbouncy-arrowディレクティブをビルドしようとしています。このディレクティブは、マークアップで配置および回転が可能です。

angular.module('directives').directive("bouncyArrow", function ($compile) { 

    return { 
     replace: true, 
     restrict: 'E', 
     template: '<span class="ion-arrow-right-c"></span>', 
     scope: { 
      heading: '=' 
     }, 
     link: function (scope, element, attrs) { 

      element.css('transform', 'rotate('+attrs.heading+'deg)'); 
      element.css('-webkit-transform', 'rotate('+attrs.heading+'deg)'); 

      element.css('background-color', 'red'); 

     } 
    }; 

}); 

これは私のテンプレートに表示されます。

<bouncy-arrow heading="15"></bouncy-arrow> 

赤の背景色で矢印が正しく表示されます。しかし、変換は効果がありません。 ioniconに変換を適用するにはどうすればよいですか？

UPDATE：ここで修正がある...

angular.module('directives').directive("bouncyArrow", function() { 

    return { 
     replace: true, 
     restrict: 'E', 
     template: '<span class="ion-arrow-right-c"></span>', 
     scope: { 
      heading: '=', 
      scale: '=', 
      positionx: '=', 
      positiony: '=' 
     }, 
     link: function (scope, element, attrs) { 

      var transforms = [ 
       'translate(' + attrs.positionx+'px,'+attrs.positiony + 'px)', 
       'scale(' + attrs.scale + ')', 
       'rotate(-'+attrs.heading+'deg)', 
      ]; 

      var css = { 
       selector: '.bouncy-arrow:before', 
       rules: [ 
        'transform: '+transforms.join(' '), 
        '-webkit-transform: '+transforms.join(' ') 
       ] 
      }; 


      var sheet = css.selector + ' {' + css.rules.join(';') + '}'; 
      angular.element(document).find('head').prepend('<style type="text/css">' + sheet + '</style>'); 

      element.addClass('bouncy-arrow'); 
     } 
    }; 

}); 

Answer 1

あなたがに変換を適用する必要があります： "イオン矢印右-C" の疑似クラスの前を

マイあなたの要素のカスタムクラスを作成してから、変換を行うためにCSSを使用することをお勧めします。そんなにクリーナー。