javascript - 如何将 ng-if 与异步函数一起使用？

Question

任务是在模​​板中显示图像，但前提是图像尺寸比 > 2

<img class="main-img" ng-if="showImage($index)" ng-src="{{item.img}}">

功能:

$scope.showImage = function(index) {
    var img = new Image();
    img.src = $scope.items[index].img;
    img.addEventListener("load", function() {
        var ratio = this.naturalWidth / this.naturalHeight;
        if (ratio > 2) {
            return true;
        } else {
            return false;
        }
    })
}

ng-if 不等待图像加载。怎么修？谢谢。

Answer 1

通过在函数末尾运行 $scope.$apply() ，您可以强制 Angular 加载图像。

$scope.showImage = function(index) {
  var img = new Image();
  img.src = $scope.items[index].img;
  img.addEventListener("load", function() {
      var ratio = this.naturalWidth / this.naturalHeight;
      if (ratio > 2) {
          return true;
      } else {
          return false;
      }
   })
  $scope.apply()
}