1

I am using angular and I need to enable a button only after the image is rendered completely, not only loaded. I am using angular ng-file-upload with "ngf-thumbnail"

I found this directive in SO, but it doesn´t work.

My button always gets enabled before the image is rendered completely.

As this question was "marked as duplicate by georgeawg" I´d like to say my question is different because no other similar question I found in SO solved my problem. All solutions posted that I found in SO have the same problem.

The other solutions work only to load event, not when the image is completelly rendered.

I need to know when the image is totally rendered not only loaded.

Here is a fiddle showing the problem: https://jsfiddle.net/ghk07c1L/4/

//controller

angular.module("fb_totem")
.controller('mycontroller', function($scope){
 $scope.loading=true;

 $scope.ImgLoaded=function(val){
    $scope.loading=false;
  }
})

//markup

 <img image-on-load="ImgLoaded" ngf-thumbnail="url_mobilePhoto"/>
 <button type="button" ng-click="cancel()" ng-disabled="loading">Some Action</button>

//directive

angular.module("fb_totem")
.directive('imageOnLoad', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.bind('load', function() {
                    scope.$apply(attrs.imageOnLoad)(true);
                });
                element.bind('error', function(){
                  scope.$apply(attrs.imageOnLoad)(false);
                });
            }
        };
    })
Luiz Alves
  • 2,575
  • 4
  • 34
  • 75
  • Can you turn this into a running sample please? would be good to see it in action here. I have some ideas on what you can do but would be good to see/verify the original issue more easily. – shaunhusain Jan 13 '18 at 00:03
  • @shaunhusain Here is a fiddle showing the problem: https://jsfiddle.net/ghk07c1L/4/ . The buuton allways stays enabled – Luiz Alves Jan 13 '18 at 19:35
  • https://jsfiddle.net/ghk07c1L/6/ <-- I changed the code some to make sure nothing weird was happening I used the & for the callback and had to explicitly trigger the scope apply after using the callback way of triggering the function in the controller scope. In the network tab if you set it to 3G speed it's much easier to see this issue, thanks for doing the fiddle of it makes it easier to debug. I'm not familiar with using apply on attributes the way it was originally done. – shaunhusain Jan 13 '18 at 20:09
  • @shaunhusain Thank you very much. No other solution posted works well to me. This is the correct response to this case. If you want, can create an answer and I will accept it. – Luiz Alves Jan 13 '18 at 20:38

0 Answers0