Run a fucntion on load and everytime the content is changed in Angular

Question

I have a div which contains a image.Now based on the naturalWidth/naturalHeight and offsetwidth/offsetHeight of the image i am running a function and doing some calculation to show a absolute layer on top of the div.Right now i am using the below code

angular.element(document).ready(function () {
        var actual_width = document.getElementById("image_id").naturalWidth;
        var actual_height = document.getElementById("image_id").naturalHeight;
        var width = document.getElementById("image_id").offsetWidth;
        var height = document.getElementById("image_id").offsetHeight;}) //my calculation })

Image data is coming from api. Now the problem issometimes naturalWidth shows undefined even if i put it inside document ready function.

1.How do i run the function after content loaded or it is changed(i call the api again without refreshing to get new data)

2.how do i run the same function for every width and height changes of the div(when i do responsive).

I am working on a angularjs(angular 1.x) application

code to call the api

$http({
    method: 'GET',
    url: 'some url' + $scope.cursor
}).then(function successCallback(response) {//i get                         
    $scope.formItems = [response.data[0]];
}

in html

<div class="image-wrapper" ng-repeat="item in formItems">
    <div style="{{style1}}" class="img-src relative">
        <img ng-src="{{item['img_url']}}" alt="Source" class="main-image" id="image_id"> 
        <!-- below section should get some style based on the image width and height,so i need some something like a funciton which calls everytime page is loaded or if the image changes or window resize -->
        <div class="top-section" id="image-top-box-id"></div>
        <div class="bottom-section" id="image-bottom-box-id"></div> 
    </div>
</div>

Should put this in a directive and also use `image.onload` to access dimensions — charlietfl, Jun 09 '18 at 02:45
Can you provide the code where you call the api? Or better a JSFiddle or Plunker — Matteo Meil, Jun 09 '18 at 09:01
@MatteoMeil i have edited the code in the question>please check now — Trinanjan Saha, Jun 09 '18 at 11:55

score 0 · Answer 1 · answered Jun 10 '18 at 11:59

If your image comes from API you should get width and height after you get the response from the server; you should do something like this:

angular.element(document).ready(function () {
    $http({
        method: 'GET',
        url: 'some url' + $scope.cursor
    }).then(function successCallback(response) {//i get                         
        $scope.formItems = [response.data[0]];

        var actual_width = document.getElementById("image_id").naturalWidth;
        var actual_height = document.getElementById("image_id").naturalHeight;
        var width = document.getElementById("image_id").offsetWidth;
        var height = document.getElementById("image_id").offsetHeight;}) //my calculation 
    })
})

I suggest you to use $document instead of angular.element(document). Read the docs here.

If you want to get width and height also when the window get resized, you should use angular.element($window).bind('resize'). Check this question

I tried your approach.But i get Cannot read property 'naturalWidth' of null .Because i suppose the dom is not loaded yet.i am getting the image url from api and storing it in a $scope variable to access it in the html.after that i am calling my function to get the width/height. — Trinanjan Saha, Jun 11 '18 at 01:48
I am using image.onload function now.after i get api response i call my fucntion which takes the image path as parameter inside wrapup everything in image.onload fucntion — Trinanjan Saha, Jun 11 '18 at 02:22

score 0 · Answer 2 · answered Jun 12 '18 at 07:58

The problem was that even if i call naturalWidth, naturalHeight after i get api data, the image may not have loaded into the dom, so it shows undefined.

A wayaround was to call a funciton after api data is reached.I pass the url of the image in my function and and inside that fucntion i use image.onload function.Inside onload function i could check for document.getElementById("image_id").naturalWidth/naturalHeight/whatever.Thus it doesn't throw error of undefined.

Run a fucntion on load and everytime the content is changed in Angular

2 Answers2