Связывание данных Angularjs между контроллером, директивой и сервисом

Я пытаюсь обновить содержимое директивы данными, поступающими из службы. Это работает следующим образом:

  1. Служба (служба холста html5) -> вызывает метод в контроллере для некоторого действия
  2. Контроллер обновляет $scope.directiveData внутри метода, вызываемого службой.
  3. Директива (область действия: true) должна обновлять свое содержимое в соответствии с новыми данными.

Проблема в том, что директива не обновляет свое содержимое. Однако, когда я добавляю периодическое обновление в directiveData в контроллере:

$interval(function() {$scope.directiveData.abc;}, 100);

Директива обновляет свое содержание!

Есть ли объяснение такому поведению? Как я могу избавиться от этого периодического обновления?

Я смоделировал проблему в jsFiddle: https://jsfiddle.net/eyNYw/857/


javascript angularjs angularjs-directive 2-way-object-databinding angularjs-scope
person user2616232    schedule 27.12.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

scope: true делает область действия директивы изолированной (директива Angular. Изоляция области действия директивы). Так что эта директива не видит переменную контроллера $scope.directiveData.

Вы можете добавить изолированную переменную, подобную этой

scope: {directiveData: '='}

'=' - означает двустороннюю привязку

А затем передайте $scope.directiveData через атрибуты директивы

<your-directive directive-data="directiveData"></your-directive>

Когда вы обновите $scope.directiveData, angular обновит эту директиву for.

person NechiK    schedule 27.12.2016
comment
Я попробовал это и область: false, которая вообще не изолирует область. Такое же поведение. Я думаю, что дело не только в привязке данных между контроллером-директивой. Это также касается службы, которая вызывает функцию из контроллера. - person user2616232; 27.12.2016
comment
Нужно больше деталей. Хотя бы пример действия контроллера и кода директивы. - person NechiK; 27.12.2016