Как использовать ng-if с асинхронной функцией?

Question

[Сева]

Суть: в темплейте выводим картинку, но только если она нужных пропорций.

<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 не ждет, пока картинка загрузится. Как быть? Спасибо.

Comments

[Alex]

Вместо if - show и добавь в проверку переменную imageLoading которой передавай состояние.

Answer 1

[Николай]

Ваш код делает не то, что вы ожидаете.
Функция showImage не возвращает ничего (undefined), функция, которая возвращает true в случае корректных размеров вызывается асинхронно и true/false значение возвращается тому, кто эту функцию вызвал.
Для того, чтобы всё заработало при событии load нужно устанавливать некоторое значение. Судя по всему у вас используется ng-repeat - так что простым вариантом будет просто установка для элемента массива флага isGoodSize в значение true, когда срабатывает ваш ивент.

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

А в html будем иметь следующее:

<img class="main-img" ng-show="item.isGoodSize" ng-src="{{item.img}}">

Не забудьте установить значение isGoodSize в false при инициализации массива.