Compartir datos entre directivas

Tengo algunos datos llamados foo que viven en un ámbito que es padre de tres hijos:

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

¿Cuál es la mejor manera de compartir foo entre esas tres directivas? Las opciones incluyen:

  • Use un scope aislado para pasar foo tres veces, duplicándolo en cuatro ámbitos
  • Haga que las directivas secundarias hereden el scope principal y encuentre baz , bats u otr en attrs
  • Ponga foo en el $rootScope e $rootScope en las directivas secundarias

¿O hay otro enfoque que sea mejor?

Puede crear una fábrica que pueda pasar a cada directiva o controlador. Eso asegurará que solo tenga una instancia de la matriz en un momento dado. EDITAR: Lo único que tengo que hacer aquí es asegurarme de que está configurando tipos de referencia y no tipos primitivos en los ámbitos de su directiva, o terminará duplicando los valores en cada ámbito.

Aquí hay un ejemplo en 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