Angular：觀察數據變化服務？

Question

我有一個定義為這樣的服務：

appServices.service('SharedData', function() {
    var data = {};

    function setContacts(contacts) {
        data.contacts = contacts;
    };

    function getContacts() {
        return data.contacts;
    };

    return {
        setContacts: setContacts,
        getContacts: getContacts
    };
});

在另一個控制器中，我按如下方式訪問數據：

$scope.contacts = SharedData.getContacts();

這一切都很好 - 但我希望每當SharedData中的數據發生變化時，都會提示$scope.contacts並更新它的數據。

我該如何做到這一點？

Answer 1

嘗試明確的觀察：

$scope.$watch(function() { return SharedData.getContacts(); }, function(newContacts) { // Do something with newContacts. });

如果集合的元素可以在沒有整個集合對象改變標識的情況下改變（我假設是一個Array或Object ），那么你需要使用$scope.$watchCollection ，雖然這比普通的$watch要慢得多，所以如果可以，請避免立即改變整個集合。

請注意，將函數公開到僅返回當前聯系人的范圍可能是更好的設計：

$scope.getContacts = function() { return SharedData.getContacts(); };

如果您需要在SharedData通知，可以將$rootScope注入其中並將$watch置於其中。

Answer 2

警惕濫用它，但這只是$rootScope的用途：

appServices.service('SharedData', function($rootScope) {
  var data = {};
  function setContacts(contacts) {
    data.contacts = contacts;
    $rootScope.$broadcast('contacts-changed', contacts);
  };
  ...

現在，在您想要的任何范圍內，您都可以注冊此活動：

function($scope) {
  $scope.$on('contacts-changed', function(eventObj) {...});
}

Answer 3

一種方法是在服務中定義一個函數，它允許您在調用setContacts時注冊要調用的回調（下面的onContactsUpdated ）。 這個解決方案並不完美（例如，它只允許您注冊一個“處理程序”），但應該讓您走上正確的軌道。 如果需要在多個地方使用它，你可以調整它。

appServices.service('SharedData', function() {
    var data = {};

    function setContacts(contacts) {
        data.contacts = contacts;
        if(typeof(data.contactsUpdatedCallback) !== "undefined"){
            data.contactsUpdatedCallback();
        }
    };

    function getContacts() {
        return data.contacts;
    };

    function onContactsUpdated(callback){
        data.contactsUpdatedCallback = callback;
    };

    return {
        setContacts: setContacts,
        getContacts: getContacts,
        onContactsUpdated: onContactsUpdated
    };
});

然后在你的控制器中：

SharedData.onContactsUpdated(function(){
    //do something with updated SharedData.getContacts()
});