javascript - 工厂未将基于 $http.get 的对象数组传递给 angular.js 中的 Controller

Question

我刚刚开始使用 Angular，并且在一个问题上陷入了一段时间。

我的工厂正在正确创建一个包含对象、RSS 提要数据的数组，并将加载到控制台。问题是我似乎无法让数组返回到 Controller 。

如有任何帮助，我们将不胜感激。请原谅粗糙和草率的代码。

Main.js

function FeedCtrl($scope, GetFeed) {

    $scope.itemId = 0;
    //$scope.items = [];

    console.log('Get episodes in ctrl');
    $scope.items = function() {
        return GetFeed.getEpisodes();
    };
    console.log('display items from ctrl');
    console.log($scope.items());

  $scope.itemId = function(index) {
    $scope.itemId = index;
    console.log($scope.itemId);
    console.log($scope.itemNames[$scope.itemId].title);
  };

};

function EpisodeCrtl($scope, GetFeed) {
    //getFeed.pullFeed();
};

function GetFeed($http){

var episodeArray = [];

function items(){
   console.log('Firing pullFeed');
return $http.get('assets/feed.xml').then(function(response) {
    var x2js = new X2JS()
    var itemDef = x2js.xml_str2json(response.data);
    itemsObj = itemDef.rss.channel.item;

    var numOfItems = itemsObj.length;
    episodeArray.length = 0;
    for (var i = 0; i < numOfItems; i++) {
      episodeArray.push({
        title: itemsObj[i].title,
        link: itemsObj[i].link,
        author: itemsObj[i].author,
        pubDate: new Date(itemsObj[i].pubDate),
        summary: itemsObj[i].summary,
        duration: itemsObj[i].duration,
        description: itemsObj[i].description
      });
    }

    console.log(episodeArray);
    return episodeArray; 
  })
 };

 return {
    getEpisodes: function(){
      console.log(episodeArray);
      episodeArray.length = 0;
      items();
      console.log(episodeArray);
      return(episodeArray);
    }
 }
};

var app = angular.module('ctApp', ['ngMaterial', 'ngAnimate', 'ngRoute'])
.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'list.html',
            controller: 'FeedCtrl'
        })
        .when('/about', {
            templateUrl: 'about.html',
           controller: 'EpisodeCrtl'
        });
})
.config( [ '$compileProvider', function( $compileProvider ) {
        var currentImgSrcSanitizationWhitelist = $compileProvider.imgSrcSanitizationWhitelist();
        var newImgSrcSanitizationWhiteList = currentImgSrcSanitizationWhitelist.toString().slice(0,-1)
        + '|chrome-extension:'
        +currentImgSrcSanitizationWhitelist.toString().slice(-1);
    }
])
.factory('GetFeed', GetFeed)
.controller('FeedCtrl', FeedCtrl)
.controller('EpisodeCrtl', EpisodeCrtl);

Answer 1

您需要了解异步调用和 Promise 的工作原理。您一开始似乎做得正确 - 您正在 $http.get 调用上执行 return - 这会返回 promise 。您正在 .then 处理程序中的 episodeArray 上执行 return 。这是正确的。

但是，在下面的函数定义中:

getEpisodes: function(){
      console.log(episodeArray);
      episodeArray.length = 0;
      items(); // this returns immediately and does not yet have the data
      console.log(episodeArray);
      return(episodeArray);
})

对items的调用立即返回。 episodeArray 仍然是空的。您返回空数组对象[]。

因此，您需要return items() - 这将返回与$http.get().then() 所做的相同的 promise 。

getEpisodes: function(){
      return items();
})

那么您不能只将返回值分配给 $scope.items - 在当前代码中，它只是分配相同的空数组 []。显然，如果返回 promise - 这不是您所需要的。相反，您必须在 Controller 中.then它，并在那里分配值:

GetFeed.getEpisodes().then(function(episodeArray){
   $scope.items = episodeArray;
})