AngularJS md-tab & ng-repeat: Hinzufügen von benutzerdefinierten Stil zu bestimmten Tabs

Question

Ich versuche, ein paar Tabs anzupassen, weil sie anders sind. Hier ist, was ich habe:

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

Mein Problem: die benutzerdefinierte Klasse nicht in dem kompilierten md-tab-item

HINWEIS: die ersetzt wird, weil es nur gebraucht zu erzeugen Tab-Tasten und Fenster.

Ich weiß nicht, wie viele Tabs ich habe, so kann ich nicht CSS basierend auf Position schreiben.

Irgendwelche Ideen?

Answer 1

Wenn Sie versuchen, anzupassen, wie die Registerkarte selbst oben aussieht, können Sie dies mithilfe eines Dekorators tun. Dadurch können Sie ändern, wie sich Anweisungen zur Laufzeit verhalten.

Zum Beispiel, wenn Sie versuchen, die Registerkarte selbst stylen, würde die Richtlinie „md-tab-item“

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

})(); 

Das obige Beispiel würde sich ändern, um die Farbe der Registerkarte Text auf rot.

Was geschieht hier ist, dass wir mit einem Dekorateur mdTabItem

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

     ... 

    } 
]) 

Dies ermöglicht Ihnen den Zugriff auf die $ Delegatobjekt schaffen, die eine Darstellung der Richtlinie Objekt, das im Begriff ist, instanziiert werden.

Dadurch können wir einige Änderungen vornehmen und das Delegate-Objekt zurückgeben, um zu ändern, wie sich die Anweisung verhält.

In diesem Fall nehme ich die vorhandene Link-Funktion und erweitere die Funktionalität, um den Stil des Direktiven-Elements festzulegen.

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