为什么ng-style不能与自定义指令在同一元素上工作？

Question

我正在尝试在自定义指令标记上应用ng-style属性，如下所示：

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

在控制器里面我有：

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

这似乎不起作用。当我检查HTML'MyStyle'时，没有渲染。当我在常规div上应用相同的ng-style标记时，它可以正确呈现。

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

Answer 1

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

上图中，灰线表示$ parent，虚线表示原型继承。 范围004是您的隔离范围。范围003是您的控制器范围。 ng-style将在范围004中查找myStyle，找不到它，然后它将跟随虚线并在Scope中查找，而不是在那里找到它。

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

1. 在您的指令中使用scope: true而不是隔离范围。然后当ng-style在范围004中查找myStyle并且找不到它时，它将跟随虚线（如下图所示）并在父范围内找到它：
   {{0 }}
2. 在HTML中使用ng-style="$parent.myStyle"访问父作用域中的myStyle属性（即，按照第一张图片中的灰线）。