共享數據

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三次傳球，藉此，複製它在四個範圍
• 有指令繼承父範圍，孩子找到baz，bats，或otr上attrs
• 戴上$rootScopefoo並注入到這一點的孩子指示

還是有另一種方法就是賭注之三？

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

HTML

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