AngularJS md-tab＆ng-repeat：特定のタブにカスタムスタイルを追加する

Question

いくつかのタブがカスタマイズされています。 は、ここで私が持っているものです。

<md-tabs> 
    <md-tab ng-repeat="tab in tabs" ng-class="tab.customClass"> 
     <md-tab-label ng-bind="tab.label"></md-tab-label> 
    </md-tab> 
</md-tabs> 

私の問題：唯一の生成に必要なのため置き換えられます：カスタムクラスは

NOTEコンパイルMD-タブの項目ではありませんタブボタンとペイン。

私はいくつのタブがあるのか​​分からないので、位置に基づいてCSSを書くことはできません。

アイデア？

Answer 1

タブ自体の上部の外観をカスタマイズする場合は、デコレータを使用してこれを行うことができます。これにより、実行時にディレクティブの動作を変更できます。あなたは、タブ自体のスタイルをしようとしている場合は、そのディレクティブは、「MD-タブ項目」になります例えば

(function() { 
'use strict'; 

MdTabItemDecorator.$inject = ['$provide']; 

angular.module('common').config(MdTabItemDecorator); 

function MdTabItemDecorator($provide) { 
    $provide.decorator('mdTabItemDirective', [ 
     '$delegate', 
     '$controller', 
     function ($delegate) { 

      var directive = $delegate[0]; 

      directive.compile = function() { 
       return function (scope, elem, attrs) { 
        directive.link.apply(this, arguments); 
        elem.attr('style', 'color:red'); 
        scope.tabIndex = scope.$parent.$index; 
       }; 
      }; 

      return $delegate; 
     } 
    ]) 
} 

})(); 

上記の例では赤に、タブのテキストの色を変更します。ここで何が起こっている

たちは

function MdTabItemDecorator($provide) { 
$provide.decorator('mdTabItemDirective', [ 
    function ($delegate) { 

     ... 

    } 
]) 

とデコレータmdTabItemを作成している。これは、あなたがインスタンス化されようとしているディレクティブのオブジェクトの表現である$デリゲートオブジェクトへのアクセスを与えることです。

これにより、ディレクティブがどのように動作するかを変更して、デリゲートオブジェクトをいくつか変更して戻すことができます。

この場合、私は、既存のリンク機能を取り、それが指示要素のスタイルを設定する機能です拡張しています。

 directive.compile = function() { 
      return function (scope, elem, attrs) { 
       directive.link.apply(this, arguments); 
       elem.attr('style', 'color:red'); 
       scope.tabIndex = scope.$parent.$index; 
      }; 
     };