为什么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将myStyle在范围004中查找,找不到它,然后它将跟随虚线并在Scope中查找,并且也找不到它.

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

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