Question

我是angularjs的新手。在我的webapp中，我正在尝试使用以下用户联系人。

服务

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

ContactsController，OtherControllers

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

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

我可以在页面加载时获取数据。我可以通过ajax帖子（来自ContactsController）在服务器上更新我的联系人。现在我只需要一种在所有控制器中自动更新（/刷新）列表的方法。我怎样才能做到这一点。

我发现these three links相关，但作为新手，我无法解决问题。

Answer 1

你可以做到

Contacts.getData().then(function(data) {
    $scope.contactsBook = data;
    $scope.$emit('contacts:updated', data);
});

然后，您需要通知控制器有关更新的信息：

$rootScope.$on('contacts:updated', function(e, contacts) {
  $scope.contacts = contacts;
});

另一种方法

该服务正在保留当前联系人列表

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

在您的控制器中：

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

在其他控制器中：

controller('AnotherController', function($scope, Contacts) {
  $scope.contacts = Contacts.currentList;
});

Answer 2

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

一种灵活的方法是将数据存储在您的服务中，并在每个控制器中注册观察者。这允许您从一个控制器（Contacts控制器）调用服务更新，并将更改反映在所有使用的控制器中。请注意，服务是模拟的。

您可以找到工作的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;
        }
    }
});

通讯录控制器：

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

其他控制器：

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;
    });
  }
]);

Answer 3

如果要返回对象字面值，则需要将 .service（）转换为 .factory（）模块。在这种情况下，我将使用服务模块。

实施例

您的服务。

app.service('Contacts', function ($http,$timeout,$q) {
   var Contacts = this;

        contacts.getData = function() {
            var defer = $q.defer();
            $http.get('../ListContacts')
            .success(function(data) {
                defer.resolve(data);
            });
            return defer.promise;
        }
    }

return Contacts;
 });

然后，您需要将此服务器注入您的ContactsController。

app.controller('ContactsController', function(Contacts){

$scope.data = null;

$scope.init = function(){
Contacts.getData().then(function(response){

$scope.data = response;

})
}

})

现在可以在dom中使用数据

实施例

<li ng-repeat="x in data">{{x.name}}</li>

绑定控制器以使用ajax promise进行服务

3 个答案: