Обмен данными между директивами

У меня есть некоторые данные, называемые foo которые живут в области, которая является родительской для трех детей:

 
bar.scope = {foo: '=', baz: '@'}; mpq.scope = {foo: '=', bats: '@'}; ktr.scope = {foo: '=', otr: '@'};

Каков наилучший способ поделиться foo между этими тремя директивами? Варианты include:

  • Используйте изолированную область действия, чтобы пройти в foo три раза, тем самым дублируя ее по четырем областям
  • Пусть дочерние директивы наследуют родительскую область и находят baz , bats или otr на attrs
  • Поместите foo на $rootScope и $rootScope в дочерние директивы

Или есть другой подход, который лучше?

Вы можете создать фабрику, которую вы можете передать каждой директиве или controllerу. Это гарантирует, что у вас есть только один экземпляр массива в любой момент времени. EDIT: Единственное, что нужно сделать, это убедиться, что вы устанавливаете ссылочные типы, а не примитивные типы в своих областях директивы, или вы будете дублировать значения в каждой области.

Вот пример на Plnkr.co

 app.controller('MainCtrl', function($scope, dataService) { $scope.name = 'World'; //set up the items. angular.copy([ { name: 'test'} , { name: 'foo' } ], dataService.items); }); app.directive('dir1', function(dataService){ return { restrict: 'E', template: '

Directive 1

' + '
' + '' + '
', link: function(scope, elem, attr) { scope.data = dataService; } }; }); app.directive('dir2', function(dataService){ return { restrict: 'E', template: '

Directive 2

' + '
' + '' + '
', link: function(scope, elem, attr) { scope.data = dataService; } }; }); app.directive('dir3', function(dataService){ return { restrict: 'E', template: '

Directive 3

' + '
' + '' + '
', link: function(scope, elem, attr) { scope.data = dataService; } }; }); app.factory('dataService', [function(){ return { items: [] }; }]);

HTML

     
  • AngularJS - как переопределить директиву ngClick
  • Местоположение AngularJS $ не меняет путь
  • AngularJS: Как создать скрипт с угловой загрузкой внутри ng-include?
  • Как кэшировать сервис http get в angularjs
  • Одностраничное приложение - загрузка js-файла динамически на основе частичного представления
  • jQuery и AngularJS: привязать события к изменению DOM
  • Транспортир Угловой 2 Ошибка: неизвестная ошибка: угловая не определена
  • В чем разница между $ evalAsync и $ timeout в AngularJS?
  • Что именно вы делаете с функцией transclude и функцией clone linking?
  • Как / когда использовать ng-click для вызова маршрута?
  • angularjs перемещает фокус на следующий элемент управления при вводе
  • Давайте будем гением компьютера.