這是保持兩個控制器之間數據同步的好方法嗎？

我有一個頁面佈局與兩個控制器在同一時間，一個擁有的數據顯示爲一種側面導航，基於數據存儲瀏覽器本地存儲和至少一個其他控制器，它綁定到一個路由和視圖。這是保持兩個控制器之間數據同步的好方法嗎？

低於該

我創建這個小線框圖形顯示頁面佈局：

Example image two controllers

第二控制器被用於操縱所述本地存儲的數據和類似的加入新的項目或刪除執行動作的現有一。我的目標是保持數據同步，如果通過'ManageListCrtl'添加或刪除項目，使用'ListCtrl'的側面導航應該立即更新。

我將本地存儲邏輯分離成一個服務，該服務在列表被操縱時執行廣播，每個控制器監聽此事件並更新範圍列表。

這工作正常，但我不確定是否有最佳做法。

這是一個只包含必要的部分代碼的我一個精簡版：

angular.module('StoredListExample', ['LocalObjectStorage']) 
    .service('StoredList', function ($rootScope, LocalObjectStorage) { 
     this.add = function (url, title) { 
      // local storage add logic 

      $rootScope.$broadcast('StoredList', list); 
     }; 

     this.delete = function (id) { 
      // local storage delete logic 

      $rootScope.$broadcast('StoredList', list); 
     }; 

     this.get = function() { 
      // local storage get logic 
     }; 
    }); 

angular.module('StoredListExample') 
    .controller('ListCtrl', function ($scope, StoredList) { 
     $scope.list = StoredList.get(); 

     $scope.$on('StoredList', function (event, data) { 
      $scope.list = data; 
     }); 
    }); 

angular.module('StoredListExample') 
    .controller('ManageListCtrl', function ($scope, $location, StoredList) { 
     $scope.list = StoredList.get(); 

     $scope.add = function() { 
      StoredList.add($scope.url, $scope.title); 
      $location.path('/manage'); 
     }; 

     $scope.delete = function (id) { 
      StoredList.delete(id); 
     }; 

     $scope.$on('StoredList', function (event, data) { 
      $scope.list = data; 
     }); 
    });

來源

2013-06-21 Guido Krömer

我看不出有什麼毛病做這種方式。當然，您的其他選項是隻需在$ rootScope。$ broadcast和$ rootScope。$ on中將$ rootScope注入控制器和pub/sub之間。

angular.module('StoredListExample') 
.controller('ListCtrl', function ($scope, $rootScope) { 
    $scope.list = []; 

    $rootScope.$on('StoredList', function (event, data) { 
     $scope.list = data; 
    }); 
}); 

angular.module('StoredListExample') 
.controller('ManageListCtrl', function ($scope, $rootScope, $location) { 
    $scope.list = []; 

    $scope.add = function() { 
     //psuedo, not sure if this is what you'd be doing... 
     $scope.list.push({ url: $scope.url, title: $scope.title}); 
     $scope.storedListUpdated(); 
     $location.path('/manage'); 
    }; 

    $scope.delete = function (id) { 
     var index = $scope.list.indexOf(id); 
     $scope.list.splice(index, 1); 
     $scope.storedListUpdated(); 
    }; 

    $scope.storedListUpdated = function() { 
     $rootScope.$broadcast('StoredList', $scope.list); 
    }; 
});

此外，你可以通過一個共同的父控制器以一種混亂但有趣的方式實現這一點。因此，您將從'ManageListCtrl'向父控制器發出'StoredListUpdated'事件，然後父控制器將向'ListCtrl'廣播相同的事件。這將允許您避免使用$ rootScope，但在可讀性方面會因爲以這種方式添加更多事件而變得非常混亂。

來源

2013-06-21 23:04:11

使用通用服務是一種更好的做法，這種服務是在2個控制器之間共享數據的單例 - 只要確保只使用引用，而不是在其中一個控制器中創建本地對象，在服務

來源

2016-03-13 07:24:07 yonia

這是保持兩個控制器之間數據同步的好方法嗎？

回答

相關問題