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

中

注意： 会被替换，因为只需要生成标签按钮和窗格。

我不知道我有多少个标签，所以我不能根据位置编写CSS。

有什么想法吗？

Answer 1

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

例如，如果您尝试设置标签本身的样式，该指令将为“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;
        }
    ])
}

})();

上面的示例会将标签文字的颜色更改为红色。

这里发生的是我们正在用

创建一个装饰器mdTabItem

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

      ...

    }
])

这使您可以访问$ delegate对象，该对象是即将实例化的指令对象的表示。

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

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

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

AngularJS md-tab＆amp; ng-repeat：将自定义样式添加到特定标签

1 个答案: