Javascript 使用Angular JS中的承诺更新服务

我在一个项目中使用angular 1.5.x。我有两个带有共享的

peopleService

的独立控制器，其中一个（

仪表板控制器

）显示人员列表，另一个（

人员模式控制器

）允许您添加人员。数据本身可以很好地获取/发布，但是现在每当添加一个新人时，我都很难更新原始列表。旁注：我不确定这是否重要，但现在我正试图遵循最佳实践，使用Controller作为语法，而不是$scope。这是我的密码

people-service.js

logbook.service('peopleService', function($http){
var people;

function getPeople(){
    if ( angular.isDefined( people ) ) return $q.when( people );
    return $http.get('/api/v1/people').then(function(data) {
        people = data;
        return people;
    }
)};

return {
    getPeople: getPeople(),
}    
})

dashboard-controller.js

logbook.controller('dashboardController', function($http, $scope, $httpParamSerializerJQLike, peopleService){
    var self = this;
    peopleService.getPeople.then(function(response){
    self.people = response.data;
}

logbook.controller('peopleModalController', function($http, $scope, $httpParamSerializerJQLike, ngDialog, peopleService){
var self = this;

self.savePerson = function(person){
        $http({
        method: 'POST',
        url: '/api/people',
        data: $httpParamSerializerJQLike({
            'name': person.name,
        }),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).then(function(response){
        self.name = null;
        peopleService.getPeople;            
    }).catch(function(response){
        self.formError = response.data.error.message;
    })

people-modal-controller.js

logbook.controller('dashboardController', function($http, $scope, $httpParamSerializerJQLike, peopleService){
    var self = this;
    peopleService.getPeople.then(function(response){
    self.people = response.data;
}

logbook.controller('peopleModalController', function($http, $scope, $httpParamSerializerJQLike, ngDialog, peopleService){
var self = this;

self.savePerson = function(person){
        $http({
        method: 'POST',
        url: '/api/people',
        data: $httpParamSerializerJQLike({
            'name': person.name,
        }),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).then(function(response){
        self.name = null;
        peopleService.getPeople;            
    }).catch(function(response){
        self.formError = response.data.error.message;
    })

index.html

{{person.name}

我建议您为此使用或类似的模块

savePerson

功能应该是同一

peopleService

的一部分。在这种情况下，您可以在控制器之间共享作用域。你可以这样做

logbook.controller('dashboardController', function($rootScope, peopleService){
   $rootScope.people = [];
  peopleService.query().$promise.then(function(people) {
    $rootScope.people = people;
  });
}

然后

但最好的方法是在路由器的

resolve

参数中使用

peopleService.query（）.$promise

resolve: {
  people(peopleService) {
    return peopleService.query().$promise;
  }
}

---

我想你的服务一定是这样的：

logbook.service('peopleService', function($http){
    var people;

    function getPeople() {
        return angular.isDefined(people) ? $q.when(people) : refreshPeople();
    };

    function refreshPeople() {
        return $http.get('/api/v1/people')
            .then(function(data) {
                people = data;
                return people;
            })
    };

    return {
        getPeople: getPeople,
        refreshPeople: refreshPeople
    };
})

---

在服务中，它应该是

getPeople:getPeople

而不是在getPeople

getPeople:getPeople（）上调用方法，

I get

TypeError:peopleService.getPeople.then当我这样做时，控制台中不是一个函数

，我应该如何更改我的控制器来反映这一点呢，您应该执行类似于

peopleService.getPeople（）的函数调用。然后

代码再次运行（谢谢！），但不幸的是，在添加新人员后，人员列表仍然没有更新。您可以添加整个模板吗？谢谢，对我来说完全有效P我认为$rootScope是一种很有技巧的方法，但我想它是可以使用的，嗯？虽然它解决了你的问题，如果你不在其他地方使用人，那么给

$rootScope

分配变量不是一个好的做法。更好的设计方法是

peopleModalController

将位于

dashboardController

中，并继承其

$scope

。