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

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

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

在控制器内部我有：

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

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

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

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

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

通常，您不想使用与同一元素上的其他指令一起创建隔离范围的指令。您有几个选择：

1. use scope: true instead of an isolate scope in your directive. Then when ng-style looks for myStyle in scope 004 and doesn't find it, it will then follow the dashed line (in the picture below) and find it in the parent scope:
   
2. use ng-style="$parent.myStyle"在您的 HTML 中访问myStyle父范围中的属性（即，沿着第一张图片中的灰线）。