使用Angular JS中的promise更新服务(Updating Services with promises in Angular JS)

我在项目中使用1.5.x角。我有两个独立的控制器和共享的peopleService ，其中一个（ dashboard-controller ）显示一个人员列表，另一个（ people-modal-controller ）允许你添加人员。数据获取/发布本身很好，但是现在我无法在添加新人时更新原始列表。旁注：我不确定这是否重要但是现在我正在尝试遵循最佳实践，因为使用Controller As语法而不是$ scope。这是我的代码。

人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>

I'm using angular 1.5.x on a project. I have two separate controllers with the shared peopleService, one of them (dashboard-controller) displays a list of people and another(people-modal-controller) lets you add people. The data gets/posts itself fine, but right now I'm having trouble having the original list update whenever a new person is added. Sidenote: I'm not sure if this is important or not but right now I'm trying to follow best practice as use Controller As syntax instead of $scope. Here is my code.

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

people-modal-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>

最满意答案

我建议你使用ngResource或类似的模块。 savePerson函数应该是同一个savePerson的一部分。在这种情况下，您可以获得在控制器之间共享范围的好处。你可以做点什么

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

但最好的方法是在您的路由器中使用peopleService.query().$promise参数

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

I suggest you to use ngResource or similar module for this. savePerson function should be a part of the same peopleService. And in this case you can get the benefit of sharing scope between controllers. You can do something like

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

Then

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

But the best way is to use peopleService.query().$promise in your router in resolve parameter

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

更多推荐