angularjs - 为什么 ng-style 不适用于与自定义指令相同的元素？

Question

我正在尝试在自定义指令标签上应用 ng-style 属性，有点像这样:

<my-directive ng-style="myStyle"></my-directive>

在 Controller 内部，我有:

$scope.myStyle = {
    "background": "red"
}

这似乎不起作用。当我检查 HTML 'MyStyle' 时没有呈现。当我在常规 div 上应用相同的 ng 样式标签时，它会正确呈现。

为什么 ng-style 不适用于自定义指令标签？

Answer 1

您的指令可能定义了一个隔离范围:scope: { ... } .在这种情况下，在该元素上定义的所有指令都将使用隔离范围。因此，ng-style 会寻找属性 myStyle在不存在的隔离范围上。



上面，灰线显示 $parents，虚线显示原型(prototype)继承。
范围 004 是您的隔离范围。范围 003 是您的 Controller 范围。 ng-style 将查找 myStyle在Scope 004中，找不到它，那么它会沿着虚线在Scope中寻找它，也没有找到它。

通常，您不希望在同一元素上使用创建隔离范围的指令以及其他指令。你有几个选择:

使用 scope: true而不是指令中的隔离范围。然后当 ng-style 寻找 myStyle在范围 004 中并没有找到它，它将沿着虚线(在下图中)并在父范围中找到它:

使用 ng-style="$parent.myStyle"在您的 HTML 中访问 myStyle父范围中的属性(即，按照第一张图片中的灰线)。