Angular JSで約束したサービスを更新する

Question

私はプロジェクトでangle 1.5.xを使用しています。私は共有されたpeopleServiceの2つの別々のコントローラを持っています。そのうちの1つ（dashboard-controller）は人のリストを表示し、別のコントローラ（people-modal-controller）は人を追加できます。データの取得/投稿自体は問題ありませんが、今は新しい人が追加されるたびに元のリストの更新に問題があります。 Sidenote：これが重要かどうか分かりませんが、今は、$ scopeの代わりにController As As構文を使用してベストプラクティスに従おうとしています。ここに私のコードです。

人-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(), 
}  
}) 

ダッシュボードcontroller.js

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

人モーダル-controller.js

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を

<li ng-repeat="person in dashboard.people.data">{{ person.name }}</li>

Answer 1

ngResourceなどのモジュールを使用することをおすすめします。 savePerson関数は同じpeopleServiceの一部である必要があります。この場合、コントローラ間でスコープを共有する利点を得ることができます。あなたはその後、

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

logbook.controller('peopleModalController', function($rootScope, peopleService){ 
self = this; 
self.savePerson = function(person){ 
    var newPerson = new peopleService(person); 
    newPerson.$save().$promise.then(function(person) { 
    $rootScope.people.push(person); 
    }); 
} 

ような何かを行うことができますしかし、最善の方法は、

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

Answer 2

は、私はあなたのサービスがこのようなものでなければならないと思いますresolveパラメータでルータに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 
    }; 
})