서비스 데이터를 $ scope 컨트롤러에 전달

Question

맞춤 서비스를 제공하는 각도 서비스가 있습니다. 서버에서 $http을 통해 데이터를 요청하지만 서비스 데이터를 $scope에 할당 할 수 없습니다. 내가 아무것도 표시되지 않습니다 HTML로 $scope.jokes을 사용하면 여기에 ...

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

참조 코드입니다.

<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를 반환해야하며이를 사용하여 컨트롤러의 $ 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; 
     }); 
    } 
});