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

Question

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

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

在控制器内部，我有：

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

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

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

score 33 · Accepted Answer

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

在此处输入图像描述

上面，灰线显示 $parents，虚线显示原型继承。范围 004 是您的隔离范围。范围 003 是您的控制器范围。ng-style 会myStyle在 004 范围内寻找，没有找到，然后它会沿着虚线在 Scope 中寻找，也没有找到。

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

在指令中使用scope: true而不是隔离范围。那么当 ng-stylemyStyle在 004 范围内查找，没有找到时，它会沿着虚线（下图中），在父范围内查找：
ng-style="$parent.myStyle"在您的 HTML 中使用以访问myStyle父范围内的属性（即，按照第一张图片中的灰线）。

1 回答 1