Question

这可能是因为我不确定如何使用promise，但在我调用服务后，触发http调用，在我的控制器中，结果是空数组..为什么会这样？我的应用程序设置如下：

这是app.js

//App.js
  .state('myApp.sermonlists', {
    url: "/sermonlists",
    views: {
      'menuContent': {
        templateUrl: "templates/sermonlists.html",
        controller: 'SermonListsCtrl'
      }
    }
  })

这是controller.js

//controller.js
angular.module('myApp.controllers', [])
.controller('SermonListsCtrl', function($scope, sermonListsService) {
  // call sermon api
  sermonListsService.getSermonLists(); // this return empty array()
})

这是services.js

//services.js
angular.module('myApp.services', [])

.factory('sermonListsService', function($http) {
    var sermon = [];

    function sermonJson() {
        $http.get('http://myapicall.com').then(function(resp) {
          // For JSON responses, resp.data contains the result
          sermon = resp.data;
         }, function(err) {
          console.error('ERR', err);
          // err.status will contain the status code
        })          
    }

    // initializing sermonJson call
    function init() {
        sermonJson();
    }

    // run init()
    init();

    return {
        getSermonLists: function(){

            return sermon;
        },
        getUser: function(index){
            return "";
        }
    }
})

最佳做法是什么？如果你能帮助我解决这个问题，那就太棒了，还有例子

Answer 1

您已为控制器和服务创建了不同的模块，因此它们不会被注入。要注入它们，您要么管理它的依赖性，要么可能需要使模块相同

尝试以下

//controller.js
angular.module('myApp', [])
     .controller('SermonListsCtrl', function($scope, sermonListsService) {
     // call sermon api
      sermonListsService.getSermonLists(); // this return empty array()
});


//services.js
 angular.module('myApp', [])

 .factory('sermonListsService', function($http) {
   var sermon = [];

    function sermonJson() {
    $http.get('http://myapicall.com').then(function(resp) {
      // For JSON responses, resp.data contains the result
      sermon = resp.data;
     }, function(err) {
      console.error('ERR', err);
      // err.status will contain the status code
    })          
}

// initializing sermonJson call
function init() {
    sermonJson();
}

// run init()
init();

return {
    getSermonLists: function(){

        return sermon;
    },
     getUser: function(index){
        return "";
     }
   }
 })

Answer 2

问题是，getSermonLists（）返回对空数组的引用（最初这没问题），但是$ http回调不会填充数组，而只是替换内部列表。 getSermonLists（）的返回值仍然引用空数组，即使服务中的“var sermon”现在引用了填充数组。

使用相同的数组实例

首先，您可以更改$ http回调以获取响应的所有元素并将它们推送到数组，而不是仅仅更改引用。即：

$http.get(...).then(function(response) {
    // Add all elements of response.data to sermon, you could also use a loop here
    sermom.push.apply(sermon, response.data)
});

这也会更改控制器列表，因为列表仍然是同一个实例。

使用承诺

第二种方式是使用承诺，正如您已经建议的那样。在这种情况下，getSermonLists不应该返回一个数组，而是一个处于未解析状态的promise，直到ajax调用结束。 Angular使用$q服务来创建承诺：

var sermon = $q.defer();
function sermonJson() {
    sermon = $http.get(....).then(function(response) {
        sermon.resolve(response.data);
    });
}

getSermonList: function() {
    return sermon;
}

更改您的控制器以使用承诺：

sermonListsService.getSermonLists().then(function(sermonList) {
    // Do something with sermonList, e.g. $scope.sermons = sermonList;
});

Promises将允许控制器等待加载布道并在之后执行某些操作，并且它可以处理失败请求的情况。

服务上的Ionic AngularJS http不更新控制器

2 个答案:

使用相同的数组实例

使用承诺