Compartilhando dados entre diretivas

Eu tenho alguns dados chamados foo que vivem em um escopo que é pai de três filhos:

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

Qual é a melhor maneira de compartilhar foo entre essas três diretivas? Opções incluem:

  • Use um escopo isolado para passar em foo três vezes, duplicando-o em quatro escopos
  • Ter as diretivas filho herdar o escopo pai e encontrar baz , bats ou otr em attrs
  • Coloque foo no $rootScope e injete isso nas diretivas $rootScope

Ou existe outra abordagem que é melhor?

Você pode criar uma fábrica que possa passar para cada diretiva ou controlador. Isso garantirá que você tenha apenas uma instância da matriz em um determinado momento. EDIT: A pegadinha só aqui é para se certificar de que você está definindo tipos de referência e não tipos primitivos em seus escopos de diretriz, ou você vai acabar duplicando os valores em cada escopo.

Aqui está um exemplo em 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