AngularJS解析器：等待外部图片加载完成

Question

一个相对简单的问题，我正在从外部网站加载图片，并希望在它们加载完成之前暂停我的resolve。

我特定视图的resolve属性如下：

    resolve :{
      item: function($q, $route, $http, $timeout){

        var deferred = $q.defer();
        console.log("Params are " + $route.current.params.id);
        $http.get('/api/post/' + $route.current.params.id, { cache: true}).
          success(function(data) {
            if(data.post.length === 1){
              $http.get('/api/designerAlso/' + data.post[0].designer + '/' + data.post[0].gender, { cache: true})
              .success(function(results){
                data.post[0].sameDesigner = results.sameDesigner;
                successCb(data.post);
              });
            }else{
              successCb(data.post); 
            }
          });
          var successCb = function(result){
            if (angular.equals(result, [])){
              deferred.reject("Sorry, we couldn't find that item!");
            }else{
              deferred.resolve(result);
            }
          }

          return deferred.promise;
      }
    }

它从我的数据库中获取数据，该数据库有一个名为imgs的字段，其中包含一组URL。是否可能在这些URL的数据加载完成后解析它们，或者我在这里有点运气不好？

- JVG

Answer 1

你可以在resolve.item的success函数中嵌套一个$http请求来手动加载你想要的图像。只需在图像的success回调函数中解决承诺，直到图像被加载完毕，视图才会呈现。

缺点是当视图请求它时，浏览器将为图像再次发起http请求，但它已经被缓存并准备好了。

resolve: {
   item: function () {
       var deferred = $q.defer();
       $http.get(*data call*).success(function (data) {
            $http.get(*image*).success(function () {
                deferred.resolve(data);
            });
       });
       return deferred.promise;
   }
}

- mikeStone

---

谢谢Mike。但是我该如何在我的控制器中调用“data”？ - DavideCariani

Dave - "data" 是 resolve.item 将要返回的内容。你可能会对 Angular 路由器中的 resolve 属性的工作方式感到困惑。你可以通过依赖注入在相应的控制器中引用设置在 resolve 对象上的属性，这样你就可以使用 resolve.item 了。 - mikeStone

@mikeStone 嘿，Mike，如果我需要一系列的图像在完成加载之前才能解决，那么我不能将成功回调附加到 $http.get 事件上。 - Ryan W Kan