Передача данных службы в $ 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 }); 
}); 

Когда я использую $scope.jokes в HTML он не показывает ничего.

<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 для этой функции и использовать ее для назначения данных в $ 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; 
     }); 
    } 
});