更新$ http返回数据到html视图

我得到我的数据formsangular度服务

.service('SelectedMemberDetail', function ($http) { return { get : function(id) { return $http.get('/api/members/'+ id); }, create : function(id) { return $http.post('/api/members/'+ id); }, delete : function(id) { return $http.delete('/api/members/'+ id); } } }) 

这是调用该服务的控制器function。

 $scope.show = function (user_id) { $scope.selectedMember = SelectedMemberDetail.get(user_id); } 

而我正在试图在html这样的视图

 <h2> <span class="glyphicon glyphicon-user mleft_10 icon_big"></span> {{ selectedMember.firstName[0] }} </h2> <div> <p class="clear_margin"><b>Address: </b> {{ selectedMember.address[0] }} </p> <p><b>Contact: </b>{{ selectedMember.contact[0] }}</p> </div> 

我查了一下，服务函数是返回json数据，这里是，

 _id: "552386cb880611101168ab4b" address: ["pata nai", "text"] contact: ["23456", "tel"] email: ["anoop@email", "email"] firstName: ["Anoop", "text"] lastName: ["singh", "text"] 

我无法在浏览器上看到更新的数据。 我的代码有什么问题？

Answer 1

当你使用$ http.get时，它会返回一个承诺，而不是数据本身。 你需要这样做：

 $scope.show = function (user_id) { SelectedMemberDetail.get(user_id) .success(function (result) { $scope.selectedMember = result; }); } 

在这里看到更多：

https://docs.angularjs.org/api/ng/service/ $ http

Answer 2

使用$ http的promise返回，然后赋值。它没有显示任何内容，因为您直接将赋值赋予赋值，它不会在视图中显示任何内容。

 SelectedMemberDetail.get(user_id).then(function(response){ $scope.selectedMember = response.data }); SelectedMemberDetail.get(user_id).success(function(response){ $scope.selectedMember = response.data }); 

有两种方法可以从$ http获取承诺回报，一个是成功。 看看Doc 。

Answer 3

我喜欢这个范例：

 .service('SelectedMemberDetail', function ($http) { return { get : function(id) { var member = {}; member.$promise = $http.get('/api/members/'+ id) .success(function(data) { angular.copy(data, member); }); return member; } } }) 

get方法立即返回成员的引用。 当$ http调用成功完成时，它使用angular.copy来分配成员的属性，同时保留引用。

这样你仍然可以做到这一点（主要用例）：

 $scope.show = function (user_id) { $scope.selectedMember = SelectedMemberDetail.get(user_id); } 

该成员还具有$ promise属性，因此如果需要处理成功或错误（边缘用例）：

 $scope.selectedMember = SelectedMemberDetail.get(user_id); $scope.selectedMember.$promise.success(function(data) { // do something else with member });