Question

我是AngularJS和Web开发的新手，所以请原谅我发表的任何天真的评论。

在我正在处理的一个小项目中，有一个页面，其中有一个库以预览一组项目。每个项目都包含一个列出多行的表。由于项目应该完全相同，因此表格具有固定的大小。如果并非所有行都适合预览，我想向用户显示有更多要阅读的线索。

一开始这对我来说似乎很简单，但事实证明这是件棘手的事情。我想检查表的scrollHeight和offsetHeight属性，但是因为它是通过ng-repeat生成的，所以AngularJS让我很傻。我把我的最终解决方案放在this Plunker中，但对我来说似乎太复杂了，而且我在问是否有人有更简单的解决方案。

经过大量的Google搜索和试验后，我为该表创建了一个自定义指令，该指令为自定义事件注册处理程序：

    <div class="col-xs-4" ng-repeat="item in items" style="position: relative;">
      <table check-overflow="isOverflow">
        <tr ng-repeat="row in [1,2,3,4,5,6,7,8,9,10] | limitTo: item.rows">
           <td>Qty&nbsp;</td>
           <td>Description{{$odd ? ', and an even longer description' : ''}}</td>
         </tr>
      </table>
      <div class="more-indicator" ng-show="isOverflow">
        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
      </div>
    </div>

在指令中我设置了一个范围变量，根据表的实际大小驱动ng-show：

angular.module('tableOverflow').directive('checkOverflow',[ function() {
  return function(scope, elm, attr) {

    // when the rendering of the gallery is completed, set the overflow
    // marker to show or stay hidden
    scope.$on('galleryCompleted', function (event, data) {
      scope[attr.checkOverflow] = (elm[0].scrollHeight > elm[0].offsetHeight);
    });
  };
}]);

棘手的事情是找出解雇事件的正确时机：我无法在表的范围内执行此操作（即：当$last行可用时），但必须放置外部循环外部的假div并调用范围函数来执行此操作：

    <div ng-init="OnCompleted()"></div>

这在控制器中：

$scope.OnCompleted = function() {
    $timeout(function() {
        $scope.$broadcast('galleryCompleted');
    }, 200); // need some timeout or won't work always on a fast browser
};

任何人都可以提出更简单的解决方案吗？非常感谢你提前！

修改
我也不喜欢$timeout这样的事情：行为可能会在设备，PC等之间发生变化。好吧！

更新
谷歌搜索了一下，我找到了一个建议，in another post，通过$watch给了我一些希望：

angular.module('tableOverflow').directive('checkOverflow',[ function() {
  return function(scope, elm, attr) {

    var isCompleted = function() {
      scope[attr.checkOverflow] = (elm[0].scrollHeight > elm[0].offsetHeight);
      console.log('isCompleted ' + elm[0].scrollHeight + '; ' + elm[0].offsetHeight);
    };
    var watch = scope.$watch(function() {
              console.log('watch: ' + elm[0].scrollHeight);
              return elm[0].scrollHeight;
          }, function() {
              scope.$evalAsync(isCompleted);
          });
   };
}]);

然而，它不起作用;或更好，并非总是如此。重新加载页面有时scrollHeight会在DOM呈现时按预期更改，但$watch未触发。任何线索？

最终更新
我updated the Plunker比较所有方法：$last，假div和$watch。这绝对是奇怪的，$watch似乎总是在Plunker中工作，但不在我的本地PC上;始终在IE 11中运行，但不在Chrome中我想这是Angular的一些内部行为，我试图从外面捕获。任何评论都会受到欢迎。

在AngularJS / Bootstrap中的表中显示“溢出”标记

0 个答案: