Question

我有以下HTML：

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

我试图获取图像＆＃39;填充模型后，来自DOM的大小：

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

但是按照原样，我获得了所有高度的undefined值。如果我执行以下丑陋的黑客攻击，它会起作用：

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？

我尝试将ng-init放在img之后的undefined中，但我也得到了{{1}}。

Answer 1

满足您要求的方法是：

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

作为问题的答案：

是否有一些方法可以在保证获得时执行我的forEach 计算出的高度？

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

以角度操纵DOM的唯一安全的地方是指令内部，即使这样你也必须小心你做出的假设。例如，对于图像，不使用加载事件，无法确定图像是否已成功加载。

什么时候保证图像＆＃39; DOM中可以使用ng-repeat中的维度？

1 个答案: