我有一个带有 ng-repeat 指令的 div，它会遍历一个数组并向我的容器添加一堆 div。当我在容器上调用 .height() 时，容器现在充满了 div，它返回 0。它似乎返回 ng-repeat 指令执行之前的高度。将 ng-repeat 指令中的所有元素添加到 DOM 后，如何检索高度？
我有以下 HTML、JS 和 CSS 代码:
HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="myController">
<p>Container height: {{containerHeight}}</p>
<div id="container">
<div class="box" ng-repeat="box in boxes">
Box number: {{box}}
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
JS:
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function($scope) {
$scope.boxes =
[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
$scope.containerHeight = $('#container').height();
}]);
CSS:
.box
{
width: 200px;
height: 200px;
padding: 10px;
background-color: skyblue;
margin: 5px;
}
最佳答案
http://plnkr.co/edit/g4DfdiKX4HO3qW8kVmsF?p=preview
问题在于高度是在 DOM 渲染之前计算的，因为 DOM 渲染是异步的。否则，当 DOM 渲染时，您的线程将被阻塞，并且您的页面将被卡住，直到昂贵的 DOM 操作完成。这就是事情发生的顺序...
- Controller 已实例化，范围已填充，触发 Angular $digest，从而触发 DOM 更新
- 你计算出高度，它仍然为零
- 摘要周期结束，DOM 更新
通过在 $timeout 内进行计算，您可以在上面的步骤 3 之后将其推到调用堆栈的末尾并获得正确的高度
$timeout(function () {
// calculate height
});
关于jquery - 具有 ng-repeat 指令的容器高度为零，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25108780/