Javascript 何时保证图像'；ng repeat中的维度在DOM中可用？

我有以下HTML：

<div ng-controller="entriesCtrl">
  <img ng-repeat="entry in entries"
       ng-src="{{entry.url}}" id="{{entry.id}}"/>
</div>

但是使用代码原样，我得到了所有高度的

未定义的值。如果我做了以下难看的破解，它就会工作：

angular.module('foobar', [])
    .controller('entriesCtrl', function($scope, $http, $timeout) {
        $http.get('/entries.json').success(function(data) {
            $scope.entries = data;
        };
        $timeout(function() {
            $scope.entries.forEach(function(entry) {
                entry.height = angular.element('#'+entry.id).height();
            };
        }, 500);
    });

如果浏览器延迟并且需要超过我的任意500毫秒才能将数据放入DOM，我的代码将失败。在保证达到计算高度的情况下，是否有办法执行我的forEach

我试着把它放在
img
后面的
ng init
元素中，但我也得到了
未定义的
。
实现您需求的一种方法是：

.directive('getHeight', function(){
    return function(scope, element, attr) {
         element.on('load', function() {
             scope.entry.height = element.height();
         }
    };
}

<div ng-controller="entriesCtrl">
  <img ng-repeat="entry in entries"
       ng-src="{{entry.url}}" get-height/>
</div>

.directive（'getHeight'，function（）{
返回函数（范围、元素、属性）{
on（'load'，function（）{
scope.entry.height=元素.height（）；
}
};
}

作为对问题的答复：

当我的forEach被保证可以获得时，有什么方法来执行它吗
计算出的高度

没有办法做到这一点（保证）。您的代码使用的是angular反模式-在指令之外操纵DOM。这不安全的原因是angular可以随时修改DOM，并且无法保证对其结构的任何假设

在angular中操作DOM的唯一安全位置是在指令内部，即使这样，您也必须小心所做的假设。例如，对于图像，如果不使用load事件，则无法确定图像是否已成功加载。
此外，如果缓存图像，则load事件除非在设置src之前绑定它，否则它甚至不会被调用。讽刺的是，我的阅读列表中有，但它以“让我们谈谈AngularJS中的最佳实践和角色”开头，所以我的第一次粗略阅读让我了解到，最好将DOM操作限制为指令。现在我有一个例子，一些DOM操作实际上不能在指令之外可靠地工作…（公平地说，根据我的经验，最佳实践几乎总是如此，问题在于你多久才能得到只有最佳实践才能可靠工作的案例）
.directive('getHeight', function(){
    return function(scope, element, attr) {
         element.on('load', function() {
             scope.entry.height = element.height();
         }
    };
}

<div ng-controller="entriesCtrl">
  <img ng-repeat="entry in entries"
       ng-src="{{entry.url}}" get-height/>
</div>