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: '@'};
これら 3 つの指令を共有する最適な方法は何でしょうかfoo? オプションには次のものがあります:
- 分離されたスコープを使用して3回渡すこと
fooで、4つのスコープに複製されます。 - 子ディレクティブに親スコープを継承させ、、、またはを検索
bazしbatsますotr。attrs fooをつけて、$rootScopeそれを子ディレクティブに挿入します
それとも、もっと良い別のアプローチがあるのでしょうか?
ベストアンサー1
各ディレクティブまたはコントローラに渡すことができるファクトリを作成できます。これにより、特定の時点で配列のインスタンスが 1 つだけ存在するようになります。編集: ここでの唯一の注意点は、ディレクティブ スコープにプリミティブ型ではなく参照型を設定していることを確認することです。そうしないと、各スコープで値が重複することになります。
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>