工厂未将基于 $http.get 的对象数组传递给 angular.js 中的控制器

Question

我刚开始 Angular，我在一个问题上被困了一段时间。

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

如有任何帮助，我们将不胜感激。代码粗糙，请见谅

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

您需要了解异步调用和承诺的工作原理。一开始您似乎做事正确 - 您在 $http.get 呼叫中做 return - 这 return 是承诺。您正在 .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 return。 episodeArray 仍然是空的。你 return 空数组对象 [].

因此，您需要 return items() - 这将 return 与 $http.get().then() 做出的承诺相同。

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

那么您不能只将 return 值分配给 $scope.items - 在当前代码中，它只是分配相同的空数组 []。很明显，如果一个 promise 是 returned - 这不是你需要的。相反，您必须在控制器中 .then 它，并在那里分配值：

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

工厂未将基于 $http.get 的对象数组传递给 angular.js 中的控制器

Factory not passing $http.get based object array to controller in angular.js

javascript

angularjs

google-chrome-app

angularjs-directive