無法獲得$ http響應數據到控制器

Question

我有一個使用角度返回JSON對象的工廠。 $ http.get請求正在獲取數據，因爲我可以在console.log（data）中看到它。我也知道，如果我硬編碼的JSON對象進廠控制器接收在視圖中的數據並顯示正確

我的問題是這樣爲什麼不list: function(callback)返回 數據到我的控制器，即使$ http.get是在做了？

.factory('countries', function($http){ 
      return { 
      list: function(callback){ 
     $http.get('../test.json').success(function(data, status, headers) { 

      console.log("success"); 
      console.log(data); 
      //console.log(status); 
     }).error(function(data, status) { 

      //console.log("error"); 
      // console.log(data); 
      // console.log(status); 
     }); 
     } 
    }; 

    /* 
    var x = { 
     list: [ 
       { 
        "name": "China", 
        "population": 1359821000, 
        "flagURL": "//upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg", 
        "capital": "Beijing", 
        "gdp": 12261 
       }, 
       { 
        "name": "India", 
        "population": 1205625000, 
        "flagURL": "//upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg", 
        "capital": "New Delhi", 
        "gdp": 4716 
       }, 
       { 
        "name": "United States of America", 
        "population": 312247000, 
        "flagURL": "//upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg", 
        "capital": "Washington, D.C.", 
        "gdp": 16244 
       } 
      ] 
     }; 

     console.log(x); 
     return x; 
    */ 

    }) 

    .controller('View2Ctrl', function ($scope, countries){ 
     $scope.countries = countries.list; 
     }); 

Answer 1

你可能想是這樣的：

.factory('countries', function($http){ 
     var list = []; 
     $http.get('../test.json').success(function(data, status, headers) { 
      angular.copy(data, list); 
     }) 

     return { 
     list: list 
     } 
}; 

然後，你可以綁定到列表如下：

.controller('View2Ctrl', function ($scope, countries){ 
    $scope.countries = countries.list; 
}); 

的替代，同樣有效的做法是這樣的：

.factory('countries', function($http){ 
     return { 
     list: function() { return $http.get('../test.json'); } 
     } 
}; 

然後在您的控制器中：

.controller('View2Ctrl', function ($scope, countries){ 
    $scope.countries = []; 
    countries.list().success(function(data) { 
     $scope.countries = data; 
    }); 
}); 

請記住，$http.get('../test.json')已經是一個承諾，這就是爲什麼你可以返回它沒有任何不必要的承諾/解決處理。

Answer 2

我想你應該改變$ scope.countries = countries.list（）;運行發送請求到服務器。

Answer 3

因爲您沒有從您的$http請求中返回任何內容。 你的代碼更改爲：

.factory('countries', function($http, $q){ 
     return { 
     list: function(callback){ 
      var d = $q.defer();   
      $http.get('../test.json').success(function(data, status, headers) { 

       console.log("success"); 
       console.log(data); 
       //console.log(status); 
       d.resolve(data); 
      }).error(function(data, status) { 

      //console.log("error"); 
      // console.log(data); 
      // console.log(status); 
       d.reject(data); 
      }); 
      return d.promise; 
    } 
}; 

Answer 4

首先，它是更好地使用then和catch代替success和error。這樣你就獲得了$http的承諾。

其次你需要在你的列表功能返回數據，像這樣的：

$http.get('../test.json') 
    .then(function(response) { 
    return response; 
    }) 
    .catch(function(response) { 
    console.log(response); 
    }); 

然後在你的控制器，你只需要調用的函數：

$scope.countries = countries.list(); 

就是這樣。

獎勵：我該怎麼做。

在我的工廠中，我獲取集合並獲取數據的函數和數組變量。

.factory('countries', function($http) { 
    var service = { 
     fetch: fetch, 
     get: get 
    }; 

    var countries = []; 

    return service; 

    function fetch() { 
     $http.get('../test.json') 
      .then(set) 
      .catch(function(err) { 
       console.log(err); 
      }); 
    } 

    function set(data) { 
     countries = data; 
    } 

    function get() { 
     return countries; 
    } 
}); 

當加載你的控制器，你可以調用取功能讓所有的國家，如果你通過get函數來控制，只要你喜歡，讓你已經獲取那些國家，你可以調用它。這樣，當你不需要它們時，你不會再向國家提出額外的請求。您還可以獲得製造單件的工廠的優勢。通過這種方式，這些數據（國家/地區）將在注入國家的每個控制器中共享，直到您從工廠中刪除或更改數據（或刷新頁面）。

.controller('View2Ctrl', function ($scope, countries){ 
    countries.fetch(); 
    $scope.getCountries = countries.get; 
}); 

現在在您的視圖中，您可以調用get函數來獲取國家/地區。

<div ng-repeat="country in getCountries()"></div>