onload image event in AngularJS component

Question

I am using an angular 1.5 component as defined below.

ngModule.component('devStudioImage', {
    template: '<img id= "{{$ctrl.imageName}}" ng-src="{{$ctrl.source}}"/>',
    controller: Controller,
    bindings: {
        imageName: '@',
        imageHeight: '<',
        imageWidth: '<',
        imageDescription: '<?',
        imageLoaded: '&'
    }
});

I want to bind a load event as well for when the image has been loaded, but onload does not seem to work, and every other solution I seem to find involves making a directive.

Is there a way to capture that load event in this component, or if I have to use a directive, how can I use the same instance of the controller for my component?

Edit:

I ended up doing this. I think it's ugly, and feels...dirty, but it works.

I added a directive in addition to the component above, that applies to the parent scope a variable for an ng-show.

ngModule.directive('imageOnLoad', function() {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.bind('load', function() {
                scope.$parent.$ctrl.loaded = true;
                scope.$parent.$apply();
            });

        }
    }
})

A.Sharma · Accepted Answer · 2016-06-21 15:01:36Z

1

For something like this, I would use a directive as opposed to a component. Directly from the AngularJS documentation:

When not to use Components:

-for directives that rely on DOM manipulation, adding event listeners etc, because the compile and link functions are unavailable

answered Jun 21, 2016 at 15:01

A.Sharma

2,7991 gold badge14 silver badges24 bronze badges

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

1 Comment

MaxPower Over a year ago

Thanks, I thought this would be the case, I was just wondering if there might be some other solution.

theblindprophet · Accepted Answer · 2016-06-21 15:50:13Z

1

You can try this in your controller:

var element = $element.find('imgID');
    element.on('load', function() {
    alert("image is loaded");
});

First get the image element and then attach load event to it.

edited Jun 21, 2016 at 15:50

theblindprophet

7,9577 gold badges44 silver badges60 bronze badges

answered Jun 21, 2016 at 15:20

Shabbir Hussain

564 bronze badges

Comments

sookool99 · Accepted Answer · 2016-06-21 15:08:14Z

0

You should be using a directive for this. However if you really don't want to do that, Since you are using Angular you already have jquery. Jquery has a load function.

The .load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

the documentation can be found here: https://api.jquery.com/load-event/

answered Jun 21, 2016 at 15:08

sookool99

2622 silver badges13 bronze badges

Collectives™ on Stack Overflow

onload image event in AngularJS component

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related