将服务数据传递到$ scope controller AngularJs

Question

我有自定义服务的角度应用程序，在服务中我通过$http从服务器请求数据，但我无法将服务数据分配到$scope。这里是代码供参考...

var app = angular.module('jokeRecords'); 
app.service('AtgService', function($http){ 
    // get method ajax.... 
    this.httpGet = function(url, params){ 
     $http.get(url, {params:params}) 
      .then(function(response) { 
       console.log(response.data); 
       return response.data; 
      }).catch(function(response) { 
       console.log('get-catch'); 
       console.log(response); 
      }); 
    }; 
}); 

// angular controller... 
app.controller('jokeController', function($scope, $http, AtgService) { 
    var sortColumn = 'id'; 
    var sortDirection = 'asc'; 
    $scope.jokes = AtgService.httpGet("/jokes", {'sortColumn': sortColumn, 'sortDirection': sortDirection }); 
}); 

当我在html中使用$scope.jokes它不显示任何内容。

<tr ng-repeat="x in jokes"> 
<td>{{x.joke_id}}</td> 
<td>{{ x.joke }}</td> 
<td>{{ x.submitted_by }}</td> 
</tr> 

有什么我很想念......

谢谢。

Answer 1

因为请求是异步的，所以“HTTPGET”函数将返回的响应，而不是数据未定义。您需要在此函数上返回$ http promise，并使用它在controller上的$ scope中分配数据。像这样：

var app = angular.module('jokeRecords'); 
app.service('AtgService', function($http){ 
    // get method ajax.... 
    this.httpGet = function(url, params){ 
     return $http.get(url, {params:params}); 
    }; 
}); 

// angular controller... 
app.controller('jokeController', function($scope, $http, AtgService) { 
    var sortColumn = 'id'; 
    var sortDirection = 'asc'; 
    AtgService.httpGet("/jokes", {'sortColumn': sortColumn, 'sortDirection': sortDirection }).then(function(response) { 
       console.log(response.data); 
       $scope.jokes = response.data; 
      }).catch(function(response) { 
       console.log('get-catch'); 
       console.log(response); 
      }); 
}); 

希望这会帮助你！

Answer 2

它可以这样做。

服务：

app.service('AtgService', function($http){ 
// get method ajax.... 
this.httpGet = function(url, params){ 
    var promise = $http.get(url, {params:params}) 
     .then(function(response) { 
      console.log(response.data); 
      return response.data; 
     }).catch(function(response) { 
      console.log('get-catch'); 
      console.log(response); 
     }); 
return promise; 
}; 
}); 

控制器：

app.controller('jokeController', function($scope, $http, AtgService) { 
var sortColumn = 'id'; 
var sortDirection = 'asc'; 
    AtgService.httpGet("/jokes", {'sortColumn': sortColumn,'sortDirection': sortDirection }).then(function(data){ 
$scope.jokes = data; 
    },function(error){ 
    console.log(error in call); 
}); 

}); 

Answer 3

你AtgService会更好返回一个承诺，然后在处理您的控制器的响应。目前它没有返回任何内容，这就是为什么你没有看到$scope.jokes中的任何数据。

var app = angular.module('jokeRecords'); 
app.service('AtgService', function($http) 
{ 
    // get method ajax.... 
    this.httpGet = function(url, params) 
    { 
     // return the promise 
     return $http.get(url, {params:params}); 
    }; 
}); 

// angular controller... 
app.controller('jokeController', function($scope, $http, AtgService) 
{ 
    // initialise jokes to be empty briefly 
    $scope.jokes = []; 

    var sortColumn = 'id'; 
    var sortDirection = 'asc'; 

    // run the function to populate $scope.jokes 
    getJokes(); 

    function getJokes() 
    { 
     AtgService.httpGet("/jokes", {'sortColumn': sortColumn, 'sortDirection': sortDirection }).then(function (response) 
     { 
      // here we're setting $scope.jokes to be the response of GET /jokes 
      $scope.jokes = response; 
     }); 
    } 
});