AngularJS md-tab＆ng-repeat：將自定義樣式添加到特定標籤

我試圖自定義幾個標籤，因爲它們不同。這是我有：AngularJS md-tab＆ng-repeat：將自定義樣式添加到特定標籤

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

任何想法？

來源

2017-12-18 Tony Samperi

如果您試圖自定義選項卡本身的頂部，您可以通過使用裝飾器來完成此操作。這將允許您更改指令在運行時的行爲方式。

例如，如果你想在樣式表本身，該指令將是「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; 
      }; 
     };

來源

2017-12-18 15:04:43

是的。我昨天知道了！幸運的是我運行的是AngularJs 1.5。其實我不得不做一些不同的事情，因爲第一次重複的範圍會丟失。我會盡快回答這個問題...... –

上述內容適用於這種情況，它改變了指令在所有情況下的行爲方式。 –

是的。但我的要求更具體。我想添加一個自定義類到生成的tabItem。您的示例只能爲所有tabItem添加相同的樣式。也在最後一行=>作用域。$ parent。$ index未定義。因爲在父範圍內沒有重複。乾杯。 –

AngularJS md-tab＆ng-repeat：將自定義樣式添加到特定標籤

回答

相關問題