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> 

내 문제가 : 여기에 내가 가진 무엇 사용자 정의 클래스는 컴파일 MD-탭 항목에없는

참고 :이 단지 생성하는 데 필요한 있기 때문에 교체 가져옵니다 탭 버튼과 창.

얼마나 많은 탭이 있는지 모르겠으므로 위치 기반 CSS를 작성할 수 없습니다.

아이디어가 있으십니까?

Answer 1

탭 자체의 모양을 사용자 정의하려는 경우 데코레이터를 사용하여이 작업을 수행 할 수 있습니다. 이렇게하면 런타임에 지시어의 작동 방식을 변경할 수 있습니다. 예를 들어

당신은 탭 자체의 스타일을 시도하는 경우는, 그 지침은 위의 예는 빨간색으로 탭 텍스트의 색상을 바꿀 것

(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; 
     } 
    ]) 
} 

})(); 

"MD-탭 항목"이 될 것입니다.

은 여기에서 일어나고있는 것은 우리가 이것은 당신이 인스턴스화하는 것입니다 지시어 객체의 표현 인 $ 위임 개체에 액세스 할 수 있습니다

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