AngularJS md-tab & ng-repeat: adding custom style to specific tabs - css

Question

I'm trying to customize a couple tabs because they're different.
Here's what I have:
<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>
My issue: the custom class is not in the compiled md-tab-item
NOTE: the gets replaced because it's only needed to generate tab buttons and panes.
I don't know how many tabs I have, so I cannot write CSS based on position.
Any ideas?

Answer 1

If you are trying to customize how the tab itself looks at the top you can do this through the use of a decorator. This will allow you to alter how directives behave at run time.
For example if you are trying to style the tab itself, that directive would be "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;
}
])
}
})();
The above example would change the color of the tab text to red.
What's happening here is that we are creating a decorator mdTabItem with
function MdTabItemDecorator($provide) {
$provide.decorator('mdTabItemDirective', [
function ($delegate) {
...
}
])
This gives you access to the $delegate object which is a representation of the directive object that is about to be instantiated.
This allows us to make some modifications and return the delegate object changing how the directive behaves.
In this case I am taking the existing link function and extending it's functionality to set the style of the directive element.
directive.compile = function () {
return function (scope, elem, attrs) {
directive.link.apply(this, arguments);
elem.attr('style', 'color:red');
scope.tabIndex = scope.$parent.$index;
};
};