javascript - 使用 ajax Promise 将 Controller 绑定(bind)到服务

Question

我是 angularjs 新手。在我的网络应用程序中，我尝试按如下方式处理用户联系人。

服务

 app.service('Contacts', function ($http,$timeout,$q) {
    return {
        getData: function() {
            var defer = $q.defer();
            $http.get('../ListContacts')
            .success(function(data) {
                defer.resolve(data);
            });
            return defer.promise;
        }
    }
 });

联系人 Controller 、其他 Controller

$scope.contactsBook = {};
...
Contacts.getData().then(function(data) {
    $scope.contactsBook = data;
});

我在 SO 本身的某个地方找到了上述方法。我使用它是因为我不想为联系人使用单独的模块。

我可以在页面加载时获取数据。我可以通过 ajax posts(来自 ContactsController)在服务器上更新我的联系人。现在我只需要一种在所有 Controller 中自动更新(/刷新)列表的方法。我怎样才能实现这一目标。

我找到了these three links相关，但作为一个新手，我无法找到出路。

Answer 1

虽然您可能不想更新当前的架构，这是可以理解的，但如果您希望能够通过服务在 Controller 之间轻松共享数据，则可能需要稍微调整您的调用。

一种灵活的方法是将数据存储在您的服务中并在每个 Controller 中注册观察者。这允许您从一个 Controller (联系人 Controller )调用服务更新，并使更改反射(reflect)在所有使用 Controller 中。请注意，该服务被 mock 。

您可以找到工作的 plunker 示例 here .

联系人服务:

var app = angular.module('app', []);    
app.service('contactsService', function ($http) {
    var contacts = [];

    return {
        loadData: function() {
            var mockGet = $q.defer();

            var data = [
              { id: 1, name: 'Jack' },
              { id: 2, name: 'Jill' }
            ];

            contacts = data;
            mockGet.resolve(contacts);
            return mockGet.promise; 
        },
        retrieveNewData: function() {
            var mockGet = $q.defer();

            var data = [
              { id: 1, name: 'Jack' },
              { id: 2, name: 'Jill' },
              { id: 3, name: 'Bob' },
              { id: 4, name: 'Susan' }
            ];

            contacts = data;
            mockGet.resolve(contacts);
            return mockGet.promise; 
        },
        getContacts: function () {
          return contacts;
        }
    }
});

联系人 Controller :

app.controller('ContactsCtrl', ['$scope', 'contactsService', 
  function ($scope, contactsService) {
    var vm = this;
    vm.contacts = [];

    vm.loadData = loadData;
    vm.retrieveNewData = retrieveNewData;


    $scope.$watch(angular.bind(contactsService, function () {
        return contactsService.getContacts(); 
      }), function (newVal) {
        vm.contacts = newVal;
    });


    function loadData() {
      contactsService.loadData();
    }

    function retrieveNewData() {
      contactsService.retrieveNewData(); 
    }
  }
]);

其他 Controller :

app.controller('OtherCtrl', ['$scope', 'contactsService',
  function($scope, contactsService) {
     var vm = this;
     vm.contacts = [];

     $scope.$watch(angular.bind(contactsService, function () {
        return contactsService.getContacts(); 
      }), function (newVal) {
        vm.contacts = newVal;
    });
  }
]);