角度:观察服务更改的服务

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();

这一切都很好 - 但是我希望$scope.contacts在sharedData中的数据更改中提醒并更新其数据。

我该如何完成？

Answer 1

尝试显式手表：

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

如果集合的元素可以在没有整个集合对象更改身份的情况下更改（我假设Array或Object），则您需要使用$scope.$watchCollection，尽管它比Plain $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()
});