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

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

$scope.ImageLoad=false;
$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) {
            $scope.ImageLoad=true;
            return true;
        } else {
            return false;
        }
    })
}

像这样改变

Answer 2

看起来这些事件发生在angular的摘要周期之外。 $ apply应该可以工作，但你也可以放弃事件监听器并绑定到一个返回false的函数，直到需要的属性存在，但那些可能很昂贵。这种方法也可以工作，在指令中将load事件/监听放在图像上，然后可以调用$ scope方法或$ broadcast来管理ng-if的标志。请参阅此示例：Image loaded event in for ng-src in AngularJS

如何使用ng-if和异步函数？

2 个答案: