Question

这是我的转发器：

<div ng-click="selected(entity)" ng-if="entity.is_organization == true">
    <div class="row">
        <div class="cell info">
            <span class="text" ng-bind-html="entity.label"></span>
        </div>
        <div class="cell img" ng-show="isImageAvailable">
            <img class="image" ng-src="checkImageAvailable(entity.thumbnail[0])">
        </div>
    </div>
</div>

控制器中的

checkImageAvailable：

$scope.isImageAvailable = false;
$scope.checkImageAvailable = function(image_url){
  var img = new Image();
  img.onload = function (){
    $scope.isImageAvailable = true;
  };
  img.onerror = function (){
    $scope.isImageAvailable = false;
  };
  img.src = image_url;
  if($scope.isImageAvailable){
     return image_url;
  }
};

我从JSON获得entity.thumbnail[0]，但即使它有一个它不存在的URL。所以我使用checkImageAvailable进行检查。如果图像不可用，请将isImageAvailable设置为false，这样图像父容器ng-show就会从浏览器中隐藏图像占位符。同时在控制台日志中显示： http://localhost/checkImageAvailable(entity.thumbnail[0])为404

我在AngularJS面前犯的错误可能是什么。

Answer 1

有一点是错误的，那就是你设置的时候：

$scope.isImageAvailable = true; //or false

您已超出角度生命周期 - 因此您必须致电$scope.$apply();

每次更改角度事件之外的角度范围时，都必须调用$apply()。

检查isImageAvailable可能会为false，因为onerror/onload将被异步回调，因此您可以立即返回image_url。

修改

所以事实证明你必须调用这样的方法：

ng-src="{{checkImageAvailable(entity.thumbnail[0])}}"

但是有一个问题因为angular继续在循环中调用该方法。即使你这样做：

ng-src="{{::checkImageAvailable(entity.thumbnail[0])}}"

它仍被调用3次。我不知道为什么3。

所以在这一点上我会尝试不同的方法：自定义指令。初始化时，将图像设置为隐藏，将onload / onerror处理程序附加到元素，然后根据调用的内容，显示图像。

让我知道它是否有意义。演示：http://jsbin.com/yenipodimi/1/edit?html,js,output

AngularJS检查404的图像并获取图像src的动态URL

1 个答案: