Question

我刚刚开始使用Angular，而且我在一个问题上已经被困了一段时间。

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

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

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

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

但是，在以下函数定义中：

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()正在做出的承诺。

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

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

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

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

1 个答案: