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

可以这样做。

服务：

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 2

您的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;
        });
    }
});

Answer 3

因为请求是异步的，所以＆＃34; httpGet＆＃34;函数将返回undefined，而不是响应数据。您需要在此函数上返回$ http promise并使用它在控制器上的$ 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);
            });
});

希望这会对你有帮助！

将服务数据传递给$ scope控制器AngularJs

3 个答案: