Partage de données entre directives

Question

J'ai des données appelées foo qui vit dans un cadre qui est parent de trois enfants :

<div ng-init="foo=[1, 2, 3]">
    <bar foo="{{foo}}" baz="{{odp}}" />
    <mpq foo="{{foo}}" bats="{{maktz}}" />
    <ktr foo="{{foo}}" otr="{{ompg}}" />
</div>

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

Quelle est la meilleure façon de partager foo entre ces trois directives ? Les options sont les suivantes :

• Utiliser une portée isolée pour transmettre foo trois fois, le dupliquant ainsi sur quatre scopes
• Faire en sorte que les directives enfants héritent du champ d'application parent, et trouver baz , bats ou otr sur attrs
• Mettre foo sur le $rootScope et l'injecter dans les directives enfants

Ou existe-t-il une autre approche plus efficace ?

Answer 1

Vous pouvez créer une fabrique que vous pouvez passer à chaque directive ou contrôleur. Cela vous permettra de vous assurer que vous n'avez qu'une seule instance du tableau à un moment donné. EDIT : Le seul problème ici est de s'assurer que vous définissez des types de référence et non des types primitifs sur vos champs de directive, ou vous finirez par dupliquer les valeurs dans chaque champ.

Voici un exemple sur 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: '<h3>Directive 1</h3>' + 
    '<div ng-repeat="item in data.items">' + 
      '<input type="text" ng-model="item.name"/>' + 
    '</div>',
    link: function(scope, elem, attr) {
      scope.data = dataService;
    }
  };
});

app.directive('dir2', function(dataService){
  return {
    restrict: 'E',
    template: '<h3>Directive 2</h3>' + 
    '<div ng-repeat="item in data.items">' + 
      '<input type="text" ng-model="item.name"/>' + 
    '</div>',
    link: function(scope, elem, attr) {
      scope.data = dataService;
    }
  };
});

app.directive('dir3', function(dataService){
  return {
    restrict: 'E',
    template: '<h3>Directive 3</h3>' + 
    '<div ng-repeat="item in data.items">' + 
      '<input type="text" ng-model="item.name"/>' + 
    '</div>',
    link: function(scope, elem, attr) {
      scope.data = dataService;
    }
  };
});

app.factory('dataService', [function(){
  return { items: [] };
}]);

HTML

  <dir1></dir1>
  <dir2></dir2>
  <dir3></dir3>