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

如果您试图自定义选项卡本身的顶部，您可以通过使用装饰器来完成此操作。这将允许您更改指令在运行时的行为方式。

例如，如果你想在样式表本身，该指令将是“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; 
     } 
    ]) 
} 

})(); 

以上例子将标签文本的颜色变为红色。

这里发生的事情是，我们正在创造一个装饰mdTabItem与

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

     ... 

    } 
]) 

这使您可以访问到$委托对象是指令对象，它是要被实例化的表示。

这允许我们做一些修改并返回委托对象，改变指令的行为方式。

在这种情况下，我采用现有的链接函数并扩展它的功能来设置指令元素的样式。

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