How to use ng-if with asynchronous function?

Question

The task is to show image in template, but only if image dimensions ratio > 2

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

Function:

$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 doesn't wait for image loading. How to fix? Thanks.

Tyler Harden · Accepted Answer · 2015-09-09 12:36:08Z

1

By running $scope.$apply() at the end of your function, you can force angular to load the images.

$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()
}

answered Sep 9, 2015 at 12:36

Tyler Harden

2792 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Decoded Over a year ago

Yes sir, that is most direct and correct answer, just force model change. Why is this not the accepted answer? Because most programmers are "Beethoven's" at heart, and love to write symphonies for answers :).

Man Programmer · Accepted Answer · 2015-09-09 12:14:25Z

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;
        }
    })
}

Change like this

answered Sep 9, 2015 at 12:14

Man Programmer

5,3662 gold badges24 silver badges21 bronze badges

3 Comments

Seva Over a year ago

This code is wrapped by ng-repeat, so none of images will be shown if this function will return False.

Man Programmer Over a year ago

ok, you can try with index $scope.ImageLoad=[]; and inside the function set index $scope.ImageLoad[index]=true and in img tag set ng-if="ImageLoad[$index] if you have any issue let me know.

Quad Over a year ago

you may need $timeout somewhere in there.

Bridgit Thomas · Accepted Answer · 2016-07-11 04:45:04Z

1

In the above mentioned code I believe instead of ng-if it should be 'ng-init'. If you are wrapping the code with ng-repeat none of the images will be shown as per the function you have provided. Also you can set a timeout.

edited Jul 11, 2016 at 4:45

answered Sep 9, 2015 at 12:38

Bridgit Thomas

3432 silver badges14 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:18:15Z

0

looks like these events are happening outside of angular's digest cycle. $apply should work but you could also forgo the event listener and bind to a function that returns false until the needed attributes are there, but those can be expensive. this approach would work too, putting load event/listening on image in a directive, then can either call a $scope method or $broadcast to manage the flag for ng-if. see this example: Image loaded event in for ng-src in AngularJS

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Sep 9, 2015 at 12:52

ron pastore

2692 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to use ng-if with asynchronous function?

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related