Запустите функцию при загрузке, и каждый раз, когда содержимое меняется в Angular

Question

У меня есть div, который содержит изображение. Теперь на основе naturalWidth / naturalHeight и offsetwidth / offsetHeight изображения я запускаю функцию и выполняю некоторые вычисления, чтобы показать абсолютный слой поверх div. Прямо сейчас яиспользуя приведенный ниже код

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

Данные изображения поступают из API.Теперь проблема issometimes naturalWidth показывает неопределенную, даже если я помещаю ее в функцию готовности документа.

1. Как запустить функцию после загрузки содержимого или его изменения (я снова вызываю API, не обновляя, чтобы получить новые данные)

2.как я запускаю одну и ту же функцию для каждого изменения ширины и высоты div (когда я реагирую).

Я работаю над angularjs (angular 1.x)приложение

код для вызова API

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

в 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>

Answer 1

Проблема заключалась в том, что даже если я вызываю naturalWidth, naturalHeight после получения данных API, изображение, возможно, не загружалось в DOM, поэтому оно показывает неопределенное значение.

Обходным путем было вызвать функцию после APIДостигнуты данные. Я передаю URL-адрес изображения в своей функции, и внутри этой функции я использую функцию image.onload. Внутри функции загрузки я могу проверить document.getElementById ("image_id"). naturalWidth / naturalHeight / что угодно. Таким образом,не выдает ошибку undefined.

Answer 2

Если ваше изображение получено из API, вы должны получить ширину и высоту после получения ответа от сервера;Вы должны сделать что-то вроде этого:

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

Я предлагаю вам использовать $document вместо angular.element(document).Прочитайте документы здесь .

Если вы хотите получить ширину и высоту также при изменении размера окна, вы должны использовать angular.element($window).bind('resize').Проверьте этот вопрос