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

【问题标题】：Update $http return data to html view更新 $http 返回数据到 html 视图
【发布时间】：2015-04-08 20:05:47
【问题描述】：

我正在从角度服务获取数据

.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"]

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

【问题讨论】：

标签： angularjs node.js mongodb express

【解决方案1】：

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

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

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

有两种方法可以从 $http 获取 promise 返回，一种是 then，另一种是 success。看Doc。

【讨论】：

【解决方案2】：

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

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

    });
}

【讨论】：

嗨，理查德，您的代码正在从服务器获取数据。但结果并没有反映在 html 视图上。

【解决方案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
});

【讨论】：