Dlaczego styl ng nie działa na tym samym elemencie co dyrektywa niestandardowa?

Question

Próbuję zastosować atrybut ng-Styl na znaczniku dyrektywy zwyczaj, niby tak:

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

Wewnątrz kontrolera mam:

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

To nie wydaje się pracuję. Podczas sprawdzania kodu HTML "MyStyle" nie jest renderowany. Kiedy zastosuję ten sam znacznik stylu ng na zwykłym div, renderuje się on poprawnie.

Dlaczego styl ng nie działa na niestandardowych znacznikach dyrektyw?

Answer 1

Twoja dyrektywa najprawdopodobniej określa zakres izolacji: scope: { ... }. W takim przypadku wszystkie dyrektywy zdefiniowane dla tego elementu będą używać zakresu izolatu. Dlatego styl ng będzie szukał właściwości myStyle w zakresie izolatu, który nie istnieje.

Przede szare linie pokazują $ rodziców, przerywane linie pokazują prototypal dziedziczenia. Zakres 004 to twój zakres izolatu. Zakres 003 to zakres kontrolera. ng-style będzie szukał myStyle w zakresie 004, a nie odnajdzie go, a następnie podąży za linią przerywaną i poszukać go w Zasięgu, a także tam go nie znajdzie.

Zwykle nie chcesz używać dyrektyw, które tworzą zakres izolowania razem z innymi dyrektywami dotyczącymi tego samego elementu. Masz kilka opcji:

1. użyj scope: true zamiast zakresu izolatu w Twojej dyrektywie. Potem, gdy ng stylu szuka myStyle w zakresie 004 i nie znajdzie, to wówczas postępować zgodnie z linią przerywaną (w rysunku poniżej) i znaleźć go w zakresie dominującej:
   
2. użytku ng-style="$parent.myStyle" w HTML do uzyskać dostęp do właściwości myStyle w zakresie nadrzędnym (tj. postępować zgodnie z szarą linią na pierwszym obrazie).