javascript - 为 AngularJS 指令的根元素设置样式

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?进一步讨论。