Question

我从角度服务获取数据

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

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

$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

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

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 2

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

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

    });
}

在此处查看更多信息：

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

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

将$ http返回数据更新为html视图

3 个答案: