Gemeinsame Nutzung von Daten zwischen den Richtlinien

Question

Ich habe einige foo genannt Daten, die in einem Bereich lebt, die Eltern zu drei Kindern sind:

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

Was ist der beste Weg, foo zwischen diesen drei Richtlinien zu teilen? Die Optionen sind:

• Verwenden Sie einen isolierten Umfang in foo dreimal passieren, wodurch es in vier Bereiche Duplizieren
• Haben das Kind Richtlinien den übergeordneten Bereich erben und baz finden, bats oder otr auf attrs
• Setzen foo auf dem $rootScope und injizieren, die in das Kind Richtlinien

Oder gibt es einen anderen Ansatz, der Wette ter?

Answer 1

Sie können eine Factory erstellen, die Sie an jede Direktive oder jeden Controller weitergeben können. Das stellt sicher, dass Sie immer nur eine Instanz des Arrays haben. BEARBEITEN: Das einzige Problem hier ist, dass Sie sicherstellen, dass Sie Referenztypen und nicht primitive Typen in Ihren Anweisungsbereichen festlegen, sonst werden Sie die Werte in jedem Bereich duplizieren.

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>