在加载时运行一个函数，并且每次在 Angular 中更改内容答案

【问题标题】：Run a fucntion on load and everytime the content is changed in Angular在加载时运行一个函数，并且每次在 Angular 中更改内容
【发布时间】：2018-11-19 02:13:51
【问题描述】：

我有一个包含图像的 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。现在问题是有时 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>

【问题讨论】：

应该把它放在一个指令中并使用image.onload 来访问维度
能否提供调用api的代码？或者更好的 JSFiddle 或 Plunker
@MatteoMeil 我已经编辑了问题中的代码>请立即查看

标签： javascript angularjs

【解决方案1】：

如果您的图片来自 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)。阅读docs here。

如果你想在调整窗口大小时也获得宽度和高度，你应该使用angular.element($window).bind('resize')。检查this question

【讨论】：

我尝试了你的方法。但我无法读取 null 的属性“naturalWidth”。因为我认为 dom 尚未加载。我从 api 获取图像 url 并将其存储在 $scope变量以在 html 中访问它。之后我调用我的函数来获取宽度/高度。
我现在正在使用 image.onload 函数。在我得到 api 响应后，我调用我的函数，它将图像路径作为参数包含在 image.onload 函数中的所有内容

【解决方案2】：

问题是即使我在获取api数据后调用naturalWidth，naturalHeight，图像可能还没有加载到dom中，所以它显示未定义。

一种解决方法是在达到 api 数据后调用函数。我在函数中传递图像的 url，在该函数内部我使用 image.onload 函数。在 onload 函数中我可以检查 document.getElementById(" image_id").naturalWidth/naturalHeight/whatever.因此它不会抛出未定义的错误。

【讨论】：