शेयरिंग डेटा

Question

मैं कुछ डेटा जो एक गुंजाइश जो तीन बच्चों को माता-पिता है में रहती है foo कहा जाता है:

<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 साझा करने के लिए सबसे अच्छा तरीका क्या है? विकल्प शामिल हैं: एक अलग गुंजाइश

• उपयोग foo तीन बार में पारित करने के लिए है, जिससे चार स्कोप
• के पार डुप्लिकेट बच्चे निर्देशों माता पिता गुंजाइश के वारिस, और attrs
पर baz, bats, या otr लगता है है
• रखो $rootScope पर foo और इंजेक्षन कि बच्चे निर्देशों

में या वहां एक और दृष्टिकोण है कि शर्त है Ter?

Answer 1

आप एक कारखाना बना सकते हैं जिसे आप प्रत्येक निर्देश या नियंत्रक को पास कर सकते हैं। यह सुनिश्चित करेगा कि आपके पास किसी भी समय सरणी का केवल एक उदाहरण होगा। संपादित करें: यहां केवल एक ही गचाचा यह सुनिश्चित करना है कि आप संदर्भ प्रकार सेट कर रहे हैं, न कि अपने निर्देशक क्षेत्रों पर आदिम प्रकार, या आप प्रत्येक दायरे में मानों को डुप्लिकेट कर देंगे।

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: [] }; 
}]); 

एचटीएमएल

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