如何檢查圖像存在於服務器上或不是在角js？

Question

我有一個最近的文章部分，我需要驗證圖像是否存在或不在服務器上。

我嘗試了一些教程，它驗證正確，但它不會返回任何值到我的ng-if指令。

這是我最近的一篇文章部分： -

<div ng-controller="RecentCtrl"> 

     <div class="col-md-3" ng-repeat="items in data.data" data-ng-class="{'last': ($index+1)%4 == 0}" bh-bookmark="items" bh-redirect> 
                 <div class="forHoverInner"> 
    <span class="inner"> 
    <span class="defaultThumbnail"> 
<span ng-if="test(app.getEncodedUrl(items.bookmark_preview_image))" style="background-image: url('{{app.getEncodedUrl(items.bookmark_preview_image)}}'); width: 272px; height: 272px; " class="thumb" variant="2"></span></span></span> </div> 
</div></div> 

這是我最近的一篇文章控制器： -

app.controller('RecentCtrl', function($scope, $http, $rootScope, RecentArticleFactory,$q) { 
$scope.test = function(url) { 
     RecentArticleFactory.isImage(url).then(function(result) { 
      return result; 
     }); 
    }; 

}) 

下面是最近aricle工廠代碼： -

app.factory("RecentArticleFactory", ["$http", "$q", function ($http, $q) { 
return { 
isImage: function(src) { 

      var deferred = $q.defer(); 

      var image = new Image(); 
      image.onerror = function() { 
       deferred.resolve(false); 
      }; 
      image.onload = function() { 
       deferred.resolve(true); 
      }; 
      image.src = src; 

      return deferred.promise; 
     }, 
} 

}) 

但

NG-IF = 「測試（app.getEncodedUrl（items.bookmark_preview_image））」 不返回任何值

任何想法？

Answer 1

這是因爲它是由於延期異步。嘗試調用測試函數並將結果值綁定到範圍內的字段。

首先，觸發通過$watch測試功能：

$scope.$watch("data.data", function() { 
    for(var i = 0; i < $scope.data.data.length; i++) { 
     var items = $scope.data.data[i]; 
     $scope.test(items); 
    } 
}) 

然後更改您test功能如下：

$scope.test = function(items) { 
    items.isImageAvailable= false; 
     RecentArticleFactory.isImage(items.bookmark_preview_image).then(function(result) { 
      items.isImageAvailable= result; 
     }); 
    }; 
}) 

最後，您可以在您的視圖以這個爲：

<span ng-if="items.isImageAvailable" ...></span> 

當然你也需要撥打app.getEncodedUrl之間。但因爲我看不到，所以定義了app，我省略了這一點。但是轉換仍然是必要的。