Question

我正在使用服务为本地JSON文件发出http请求。我正在尝试将成功的HTTP请求中的数据存储在我的控制器中，但该部分无法正常工作。然而，http请求似乎在服务上是成功的。

var myModule = angular.module("MyApp", [])

  .controller('MyController', function(Utilities){

     //this is not working
     self.socialArr = Utilities.getData("data.json");

   }).service('Utilities', function($http) {

     var self = this;

     self.getData = function(jsonData) {
       $http.get(jsonData)
        .then(function(response) {
            //First function handles success
            var theData = response.data;
            console.log(theData); //this works (data is logged)
            return theData;
        }, function(response) {
            //Second function handles error
            console.log("Error loading JSON data");
        });
     };
 });

Answer 1

您没有从服务方法返回任何内容。返回$http promise并在控制器中使用then()将返回的数据分配给controller属性。您还没有在控制器中定义self

angular.module("MyApp", [])

.controller('MyController', function(Utilities) {
  // store reference of "this"
  var self = this;
  // call service method
  Utilities.getData("data.json").then(function(data) {
    // assign data after promise resolves
    self.socialArr = data;
  });


}).service('Utilities', function($http) {

  var self = this;

  self.getData = function(jsonData) {
    // return the promise
    return $http.get(jsonData).then(function(response) { 
        return response.data;
      }, function(response) {
        //Second function handles error
        console.log("Error loading JSON data");
      });
  }
});

Answer 2

我认为你应该使用诺言。因为你正在进行异步呼叫。

 self.getData = function(jsonData) {
var deferred = $q.defer();
       $http.get(jsonData)
        .then(function(response) {

            if (response.data) {
      deferred.resolve(response);
    } else {
      deferred.reject(response);
    }

        }, function(response) {
            deferred.reject(response);
        });
 return deferred.promise;
     };

然后在控制器中

 Utilities.getData("data.json").then(function(res)
{
   self.socialArr=res;
},function(e){

});

Answer 3

你应该在$ http.get（）之后返回一个promise。然后（successCallback）;

退货声明，

 return theData;

代码中的

被限制并且“作用域”到successCallback。因此，为了获得它的句柄，您需要返回与successCallback相关联的promise。

         self.getData = function(jsonData) {

         // store the promise
         var promise = $http.get(jsonData)
        .then(function(response) {
            //First function handles success
            var theData = response.data;
            console.log(theData); //this works (data is logged)
            return theData;
        });

        // return the promise, which can get you the successCallback's    returned data.
        return promise;
      };

console.log输出表示执行的代码，但如果没有与之关联的承诺，则返回的theData是没有用的。

在控制器中：

          Utilities.getData("data.json").then(function(socialArr){
            $scope.socialArr = socialArr;
            // this should print
            console.log($scope.socialArr);
          });

工作的笨蛋here

Answer 4

var myModule = angular.module("MyApp", [])

.controller('MyController', function(Utilities){

     Utilities.getData("data.json").success(function(responce) {
         self.socialArr = response.data;
     })

 })
.service('Utilities', function($http) {

    var self = this;

    self.getData = function(jsonData) {
       return $http.get(jsonData).error(function(responce) {
           console.log("error!");
       })
    };
});

在服务上发出http请求，在控制器中获取响应

4 个答案: