Почему ng-стиль не работает над тем же элементом, что и пользовательская директива?

Я пытаюсь применить атрибут ng-стиля в настраиваемом теге директивы, вроде как:

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

Внутри контроллера у меня есть:

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

Это, похоже, не работает. Когда я проверяю HTML, "MyStyle" не получается. Когда я применяю тот же тег ng-стиля на регулярном div, он правильно отображает.

Почему не работает ng-стиль в настраиваемых тегах директивы?

Ответы

Ответ 1

Ваша директива, вероятно, определяет область выделения: scope: { ... }. В этом случае все директивы, определенные для этого элемента, будут использовать область изоляции. Поэтому ng-style будет искать свойство myStyle в области изоляции, которого не существует.

enter image description here

Выше, серые линии показывают $parents, пунктирные линии показывают прототипное наследование. Область охвата 004 - это область выделения. Объем 003 - это область вашего контроллера. ng-style будет искать myStyle в области 004, а не найти его, затем он будет следовать пунктирной линии и искать ее в Scope, а не искать там.

Обычно вы не хотите использовать директивы, которые создают область изоляции вместе с другими директивами одного элемента. У вас есть несколько вариантов:

  • используйте scope: true вместо области выделения в вашей директиве. Затем, когда ng-стиль ищет myStyle в области 004 и не находит его, он будет следовать по пунктирной линии (на рисунке ниже) и найти ее в родительской области:
    enter image description here
  • используйте ng-style="$parent.myStyle" в вашем HTML для доступа к свойству myStyle в родительской области (т.е. следуйте по серой строке на первом снимке).