如何獲取一個大對象，將該子對象用作同一控制器的多個實例的數據，並使它們保持同步？

Question

道歉的問題：-P

我有一個包含所有數據的JavaScript對象。 我有一個控制器，我將在整個應用程序中多次使用它。 因此，所有控制器都在處理相同的數據，然后使用服務將數據添加到應用程序中。

為了支持只讀/編輯模式交互，我在服務中制作了原始數據源的兩個副本。 用戶操縱數據時，他們正在操縱編輯模式數據源。 然后，他們可以按一個按鈕以將數據保存到編輯模式數據源，再保存到只讀模式數據源（使用angular.copy）。

我還希望控制器的實例僅在數據源的一部分而不是整個數據源上工作。

我看到的行為是angularjs能夠更新零件，使它們保持同步； 但是當我按下按鈕執行angular.copy時，似乎重新分配了變量，而不是調整其指向的值。

下面的代碼是jsfiddle http://jsfiddle.net/q5ca5quq/1/

<html ng-app='app'>
<body>

    <div ng-controller='a_controller as ctrl_1'>
        read_mode_inner = {{ ctrl_1.read_mode_inner }}<br>
        edit_mode_inner = {{ ctrl_1.edit_mode_inner }}<br>
        <br>
        <input ng-model='ctrl_1.edit_mode_inner[0].a'>
    </div>    
    <br><br><br>
    <div ng-controller='a_controller as ctrl_2'>
        read_mode_inner = {{ ctrl_2.read_mode_inner }}<br>
        edit_mode_inner = {{ ctrl_2.edit_mode_inner }}<br>
        <br>
        Change this and press button below <input ng-model='ctrl_2.edit_mode_inner[0].a'> <br>
        <button ng-click='ctrl_2.change()'>Copy edit_mode_inner into read_mode_inner</button>
    </div>





<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js'></script>
<script type='text/javascript'>

    angular.module('app',[])
    .factory('DataService', [function() {
        data = {
            xx : [{'a':1}, {'b':2}, {'c':3}],
            yy : [{'a':1}, {'b':2}, {'c':3}]
        }

        return {
            read_mode : data,
            edit_mode : angular.copy(data)
        }
    }])
    .controller('a_controller', ['DataService', function(DataService) {
        var self = this;
        window.s = self; // For debugging

        self.read_mode = DataService.read_mode;
        self.edit_mode = DataService.edit_mode;

        self.read_mode_inner = self.read_mode.xx;
        self.edit_mode_inner = self.edit_mode.xx;

        self.change = function(){
            self.read_mode_inner = angular.copy(self.edit_mode_inner);
        }

    }]);


</script>
</body>
</html>

Answer 1

http://jsfiddle.net/q5ca5quq/2/

您可以使用服務在控制器之間共享數據，但是如果希望每次更改服務中的值時都更新所有控制器實例，則控制器內將需要類似$ watch的內容：

$scope.change = function(){
    DataService.read_mode.xx = angular.copy($scope.edit_mode_inner);
}

$scope.$watch(function(){return DataService}, function(dataService){
    $scope.read_mode_inner = dataService.read_mode.xx;
}, true);

為此，您需要使用angular $ scope代替this / self引用。 請注意，使用$ scope如何還簡化了HTML中的角度表示法。 您無需單獨命名控制器：

代替：

<div ng-controller='a_controller as ctrl_1'>
    read_mode_inner = {{ ctrl_1.read_mode_inner }}<br>
    edit_mode_inner = {{ ctrl_1.edit_mode_inner }}<br>
</div>

您只需要：

<div ng-controller='a_controller'>
    read_mode_inner = {{ read_mode_inner }}<br>
    edit_mode_inner = {{ edit_mode_inner }}<br>
</div>

因為$ scope負責其余的工作。

如何獲取一個大對象，將該子對象用作同一控制器的多個實例的數據，並使它們保持同步？

問題描述

1 個解決方案

解決方案1
0 已采納 2014-09-19 08:05:12

如何獲取一個大對象，將該子對象用作同一控制器的多個實例的數據，並使它們保持同步？

問題描述

1 個解決方案

解決方案1 0 已采納 2014-09-19 08:05:12

解決方案1
0 已采納 2014-09-19 08:05:12