21

foo3 つの子の親であるスコープ内にあるというデータがいくつかあります。

<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: '@'};

fooこれら 3 つのディレクティブ間で共有する最善の方法は何ですか? オプションは次のとおりです。

  • 分離されたスコープを使用してfoo3 回渡し、それによって 4 つのスコープにわたって複製します
  • 子ディレクティブに親スコープを継承させbaz、 、bats、またはotronを見つけるattrs
  • fooを付けて、それを子ディレクティブ$rootScopeに挿入します

または、より良い別のアプローチはありますか？

4

1 に答える 1

28

各ディレクティブまたはコントローラーに渡すことができるファクトリを作成できます。これにより、常に配列のインスタンスが 1 つだけになるようになります。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: '<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>
于 2012-11-20T21:57:31.650 に答える