Как проверить изображение на сервере или нет в угловых 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; 
     }, 
} 

}) 

Но

нг-, если = "тест (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 определен, я опустил это. Но преобразование, тем не менее, необходимо.