如何访问 AngularJS 中的 response.data 值？答案

【问题标题】：How get acces to response.data value in AngularJS?如何访问 AngularJS 中的 response.data 值？
【发布时间】：2016-12-09 15:53:47
【问题描述】：

我想通过 http 请求在我的组件中设置数据，但是 $http.get 之外的数据是未定义的。

如何在 $http.get 之外获取响应数据？

'use strict';
 angular.
 module('filesApp').
 component('filesList', {
  template:
      '<ul>' +
        '<li ng-repeat="file in $ctrl.files">' +
          '<span>{{file.data1}}</span>' +
          '<p><a href="{{file.data2}}">Create</a></p>' +               
        '</li>' +
      '</ul>',      
  controller: function FilesListController($http, $scope) {
      //need response.data here
              $http.get('/api/1').then(function (response) {
              if (response.data.error) {
                  return null;
              } else {                      
                  $http.get('/api/2' + response.data).then(function (response) {
                      if (response.data.error) {
                          return null;
                      } else {                              
                          //response.data contains data that I need.                              
                          return response.data;
                      }
                  });
              }
          });          
  }
});

【问题讨论】：

$http.get 完成后将其存储在作用域中，以便在组件中可用

标签： javascript angularjs get request

【解决方案1】：

你需要在作用域上存储response.data，这样你才能在视图中使用它。

'use strict';
 angular.module('filesApp')
    .component('filesList', {
        template:
            '<ul>' +
                '<li ng-repeat="file in $ctrl.files">' +
                    '<span>{{file.data1}}</span>' +
                    '<p><a href="{{file.data2}}">Create</a></p>' +               
                '</li>' +
            '</ul>',      
        controller: function FilesListController($http, $scope) {
              $http.get('/api/1').then(function (firstResponse) {
                  if (firstResponse.data.error) {
                      return null;
                  } else {                      
                      $http.get('/api/2' + firstResponse.data).then(function (secondResponse) {
                          if (secondResponse.data.error) {
                              return null;
                          } else {
                              $scope.files = secondResponse.data;
                          }
                  });
              }
          });          
      }
});

【讨论】：

$scope.files 在第一个 $http.get 之外未定义
你想在哪里使用它？

【解决方案2】：

有很多方法可以做到这一点。当然最简单的是将响应数据存储在范围内的变量中。例如

controller: function FilesListController($http, $scope) {
   //need response.data here
   $http.get('/api/1').then(function (response) {
      if (response.data.error) {
          return null;
      } else {                      
          $http.get('/api/2' + response.data).then(function (response) {
              if (response.data.error) {
                  return null;
              } else {                              
                  //response.data contains data that I need.  
                  $scope.dataYouNeed = response.data;                            
              }
          });
      }
  });

}

您可以使用{{dataYouNeed}} 将其显示在视图中的某个位置。

【讨论】：