wymiany danych pomiędzy dyrektywami

Question

mam pewne dane zwane foo który mieszka w zakresie, który jest rodzicem troje dzieci:

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

Jaki jest najlepszy sposób na dzielenie foo pomiędzy tymi trzema dyrektywami? Dostępne są następujące opcje:

• Użyj odosobnionym zakres przejść w foo trzy razy, a tym samym powielania go w czterech zakresach
• Czy dziecko dyrektyw dziedziczyć zakres nadrzędną, a znaleźć baz, bats lub otr na attrs
• Put foo na $rootScope i wstrzyknąć że do dyrektyw podrzędnych

Czy jest tam innego podejścia, które jest zakład ter?

Answer 1

Możesz stworzyć fabrykę, którą możesz przekazać do każdej dyrektywy lub kontrolera. Dzięki temu będziesz mieć tylko jedno wystąpienie tablicy w danym momencie. EDYCJA: Jedynym problemem jest upewnienie się, że ustawiasz typy odniesienia, a nie typy pierwotne w zakresach dyrektyw, lub w efekcie powielicie wartości w każdym z zakresów.

Here is an example on 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>