AngularJSのresponse.data値へのアクセス方法を教えてください。

Question

私のコンポーネントに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; 
         } 
        }); 
       } 
      });   
    } 
}); 

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

Answer 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}}であなたのビューで、それことができます。