angularjs ngRepeat表,得到高度错误

2023年11月21日 217次阅读

我有一个问题,即在加载页面时获取ngRepeat表的高度

我试图在事件$viewContentLoaded触发时获取高度,但表的高度等于表格标题栏的高度.我的表看起来像这样：

如何获得正确的桌子高度？非常感谢.

这是我的代码：

$scope.$on('$viewContentLoaded', function(){
    var elem = angular.element(document.getElementById('ng-repeat-table-test'));
    console.log(elem.height());
});

Chrome Developer工具测量的实际桌面高度为234px.但是,上面的代码打印出100px,这是标题栏的高度.

更多代码：

用于呈现表的代码：

 <table id="ng-repeat-table-test">
     <tr id="title">
         <td>Car Types</td>
     </tr>
     <tr class="row" ng-repeat="car in cars">
         <td>{{car.name}}</td>
     </tr>
  </table>

CSS：

table{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
tr#title{
    height: 100px;
    background-color: #ccc;
}
tr.row{
    padding-top: 10px;
    border-top: 1px solid #ccc;
}
tr.row:first-child{
    border-top: none;
}
tr.row td{
    padding-top: 10px;
    height: 56px;
    vertical-align: top;
}

jsfiddle上的一大块代码

最佳答案 当Angular完成编译时会触发$viewContentLoaded,这并不意味着浏览器已经渲染了DOM.

所以在你的情况下,问题是当$viewContentLoaded的回调被执行时,表没有绘制的行,这就是你得到错误高度的原因.

尝试延迟(移动到队列的末尾)使用$timeout执行该操作,因此可以在获得元素高度之前操纵DOM.

$scope.$on('$viewContentLoaded', function(){
  $timeout(function () {
     var elem = angular.element(document.getElementById('ng-repeat-table-test'));
     console.log(elem.height());
  });
});
点赞