Question

我现在已经使用角度几个星期了，只是为了构建个人应用程序，并尝试了解它，到目前为止我认为好，尽管我最近遇到了承诺问题。

我想要实现的目标如下： - 拨打api以检索国家/地区列表 - 一旦我有该列表，就为每个国家/地区执行新呼叫以获取该国家/地区的图像 - 然后，使用Country，Capital，Region和Image填充我的$ scope元素，并将信息呈现到页面

我的代码在本地工作正常，但是当部署到heroku时，它似乎不适用于谷歌浏览器....出于某种原因，它确实适用于任何其他浏览器和移动设备，即使在新的Chrome Incognito窗口上......但是在普通的Chrome浏览器上，我得到了所有图像的404 ...我的代码中有什么问题吗？

到目前为止，我还没有使用工厂，所以我的逻辑都是控制器，我知道它不理想;）

非常感谢你的帮助！

如果您需要，here是实时链接

angular.module('angularCountriesApp')
  .controller('IndexCtrl', ['$scope', '$http', function ($scope, $http) {

    function getCountries() {
      return $http.get("https://restcountries.eu/rest/v1/all", { cache: true});
    }

    function getImages(country){
      return $http.get("https://api.500px.com/v1/photos/search?term="+  country+"&tag=landscape&image_size=4&rpp=1&consumer_key=XXXX", { cache: true});
    }


    var coutriesPromise = getCountries();

    coutriesPromise.then(function(countries) {
      var countriesList = [];
      // console.log(countries);
      angular.forEach(countries.data, function(country){

        var name    = country.name;
        var capital = country.capital;
        var region  = country.region;

        var imagesPromise = getImages(country.name);

        imagesPromise.then(function(images){


          var image = images.data.photos[0].image_url;
          countriesList.push({
            'name' : name,
            'capital' : capital,
            'region' : region,
            'image' : image
          });

          $scope.countries = countriesList;

        });
      })

    }, function(reason) {
      console.log(reason);
    });

  }]);

Answer 1

所以我想通了......我有一个镀铬扩展程序阻止图像加载.......尽管如此，如果你有更好的代码方法，请说出来！

Angular Promises和forEach

1 个答案: