$ scope controllerにサービスデータを渡す

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