Question

我有一个AngularJS指令，用于“元素”模式，即它用作HTML中的自定义标记。

angular
    .module('myModule')
    .directive('myDirective', function() {
        return {
            restrict: 'E',
            scope: {
                attr1: '=',
                attr2: '='
            },
            ...
        };
    });

当我使用此指令时，AngularJS创建一个根元素<my-directive>以包含指令模板中的所有元素。此元素在浏览器调试程序（Firebug或Chrome调试程序）中可见。

如何将样式应用于此根元素？如果我将style或class属性直接放在<my-directive>标记上，则浏览器会将其忽略。

<my-directive attr1="val1" attr2="val2"
              style="...styles for root element (ignored)..."
              class="...alternate method (also ignored)...">
</my-directive>

目前，我使用指令link函数添加这些样式，如下所示：How to manipulate styles of directive in AngularJS?。

但是，这些样式可能与指令的逻辑无关。它们甚至可能根据指令的使用方式/位置而改变。一些例子（在我的头顶）：

外部定位样式，例如float: left
元素背景的样式 - 在网格中考虑交替的行颜色
等

所以他们不属于指令。如何从指令外声明这些样式？样式必须是“每个实例”，而不是所有my-directive的单一共同样式。

我正在使用AngularJS 1.2。

Answer 1

注意：

经过进一步研究，结果发现我的问题是基于一种误解。实际上，在根指令元素的style属性中使用时，大多数样式都已正确应用。例如，问题中提到的属性background-color和float实际上正确地应用于根指令元素。

我的具体问题是height和width样式属性。事实证明，在其他场景中也会发生同样的事情，因此它似乎并不特定于AngularJS或指令。

由于到目前为止尚未提出任何赞成/正确的答案，我将通过此澄清（标记为社区维基）来解决问题。

有关进一步的讨论，请参阅How to handle your own obsolete/incorrect questions?。

Answer 2

只需使用这样的CSS

my-directive { 背景：红色; }

Answer 3

如果您想修改CSS帖子呈现，那么您可以使用css()上的jqLite element：

angular
    .module('myModule')
    .directive('myDirective', function() {
        return {
            restrict: 'E',
            scope: {
                attr1: '=',
                attr2: '='
            },
            link: function(scope, element, attrs)
            {
                element.css('background-color', 'red');
            }
        };
    });

这是jqLite，AngularJS支持，不包含jQuery库。

设置AngularJS指令的根元素的样式

3 个答案:

注意：