Передача служебных данных в контроллер $ scope AngularJs

Question

У меня есть приложение angular с настраиваемой службой, в службе я запрашиваю данные с сервера через $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>

Что мне не хватает ...

Спасибо.

angularjs angularjs-scope

0

Rahul Dadhich 6 Сен 2016 в 10:19

Answer 1

Поскольку запрос является асинхронным, функция «httpGet» вернет undefined вместо данных ответа. Вам нужно вернуть обещание $ 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);
            });
});

Надеюсь, что это поможет вам !

0

Tan Le 6 Сен 2016 в 07:31

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

});

0

Dinesh Shah 6 Сен 2016 в 07:25

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

0

Ankh 6 Сен 2016 в 07:28

Передача служебных данных в контроллер $ scope AngularJs

3 ответа

Похожие вопросы

Новые вопросы

angularjs