ng-style属性をカスタムディレクティブタグに適用しようとしています。次のようなものです。
<my-directive ng-style="myStyle"></my-directive>
私が持っているコントローラーの中に：
$scope.myStyle = {
"background": "red"
}
しかし、これはうまくいかないようです。HTMLを検査すると、「MyStyle」がレンダリングされません。同じng-styleタグを通常のdivに適用すると、正しくレンダリングされます。
カスタムディレクティブタグでng-styleが機能しないのはなぜですか？
ディレクティブは、分離スコープを定義している可能性がありますscope: { ... }。その場合、その要素で定義されたすべてのディレクティブは分離スコープを使用します。したがって、ng-styleはmyStyle、存在しない分離スコープのプロパティを検索します。
上記の灰色の線は$parentsを示し、破線はプロトタイプの継承を示しています。スコープ004は分離スコープです。スコープ003はコントローラースコープです。ng-styleはmyStyleスコープ004で検索しますが、検索しません。次に、破線に従ってスコープで検索しますが、そこでも検索しません。
通常、同じ要素で他のディレクティブと一緒に分離スコープを作成するディレクティブは使用しません。いくつかのオプションがあります。
scope: trueディレクティブで分離スコープの代わりに使用します。次に、ng-styleがmyStyleスコープ004で検索し、それが見つからない場合、破線（下の図）に従い、親スコープで検索します。
ng-style="$parent.myStyle"HTMLで使用してmyStyle、親スコープのプロパティにアクセスします（つまり、最初の画像の灰色の線をたどります）。