Question

我是AngularJS和Ionic的新手。我有以下问题。我无法将数据从工厂服务传递到控制器和范围。

我可以知道这是什么问题吗？

service.js

angular.module("starter")

.factory("newsFeedService", function($http){

var feedService={};

feedService.retrieve = function() {
            $http.get("https://jsonplaceholder.typicode.com/posts/")
            .then(function(response) {
                return response.data;
            })
            .catch(function(response) {
                console.log("Error retrieving data.")
            })
            .finally(function(response) {
                console.log("End of service.")
            })
}

return feedService;
})

controller.js

angular.module("starter")

.controller("newsFeedController", function($scope, newsFeedService) {
  $scope.newsFeeds = newsFeedService.retrieve(function(data));
  console.log($scope.newsFeeds);
})

的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
    <script src="js/service.js"></script>
    <script src="js/controller.js"></script>

  </head>

  <body ng-app="starter" ng-controller="newsFeedController">
    <ion-pane>
      <ion-header-bar class="bar-positive">
        <h1 class="title">SG News Feed </h1>
      </ion-header-bar>
      <ion-content>
        <ul ng-repeat="newsFeed in newsFeeds">
          <li>{{newsFeed.title}}</li>
        </ul>
      </ion-content>
    </ion-pane>
  </body>
</html>

Answer 1

您的函数不会返回您的http呼叫的响应，而是一个承诺。

按照以下步骤更正您的控制器：

 angular.module("starter")
 .controller("newsFeedController", function($scope, newsFeedService) {

   $scope.newsFeeds ={};

   $scope.loadNews = function(){
      newsFeedService.retrieve(function(data){
                    // the server returns the news: you can use them in your scope
                            $scope.newsFeeds = data;
       });
   }

   $scope.loadNews();
 })

Answer 2

// on service
 feedService.retrieve = function(successCallback, failedCallback) {
        $http.get("https://jsonplaceholder.typicode.com/posts/")
        .then(successCallback, failedCallback);
}

// on controller
$scope.newsFeeds = null;
newsFeedService.retrieve(function(response){
     $scope.newsFeeds = ......;
      console.log($scope.newsFeeds);
   }, 
   function(response){
      console.log("Oops! somethings went wrong!");
   });

尝试以上代码。因为$ http.get是异步的，所以我认为所有的数据处理都应该在回调函数中完成。您可以阅读有关AngularJS文档的更多详细信息：$http service document

Answer 3

请尝试以下代码。

angular.module("starter")

.factory("newsFeedService", function($http, $q) {


  var retrieve = function() {
    var deferred = $q.defer();
    $http.get("https://jsonplaceholder.typicode.com/posts/")
      .then(function(response) {
        deferred.resolve(response);
      })
      .catch(function(response) {
        console.log("Error retrieving data.")
        deferred.reject(response);
      })
      .finally(function(response) {
        console.log("End of service.")
      })

    return deferred.promise;
  }

  return {
    retrieve: retrieve
  };
})

/*Because $http.get return promise you can use following way as well without $q service*/

.factory("newsFeedService", function($http) {


  var retrieve = function() {
    return $http.get("https://jsonplaceholder.typicode.com/posts/");
  }

  return {
    retrieve: retrieve
  };
})

angular.module("starter")

.controller("newsFeedController", function($scope, newsFeedService) {

  newsFeedService.retrieve().then(function(data) {
    $scope.newsFeeds = data
  }, function(data) {
    console.log(data);
  });

  console.log($scope.newsFeeds);
})

Answer 4

您必须从检索函数返回promise，如下所示：

angular.module("starter")

.factory("newsFeedService", function($http){

var feedService={};

    feedService.retrieve = function() {
                return $http.get("https://jsonplaceholder.typicode.com/posts/")   // "return" is the key here
                .then(function(response) {
                    return response.data;
                })
                .catch(function(response) {
                    console.log("Error retrieving data.")
                })
                .finally(function(response) {
                    console.log("End of service.")
                })
    }

    return feedService;
    })

然后在控制器中：

angular.module("starter")

.controller("newsFeedController", function($scope, newsFeedService) {

  newsFeedService.retrieve()
                  .then(function(data){
                      $scope.newsFeeds = data;
                      console.log($scope.newsFeeds);
                   })
                   .catch(function(){
                   })
})

无法通过AngularJS $ http服务工厂检索数据

4 个答案: