Javascript 显示一个"；溢出“；AngularJS/Bootstrap中表中的标记

我是AngularJS和web开发的新手，所以请原谅我的任何幼稚评论

在我正在处理的一个小项目中，有一个带有图库的页面，可以预览一组项目。每个项目都包含一个表，其中列出了几行。由于所有项目都应该相等，因此表的大小是固定的。如果不是所有的行都适合预览，我想向用户显示一条线索，说明还有更多的内容需要阅读

一开始这对我来说似乎是件简单的事情，但结果却是一件棘手的事情。我本想检查表的

scrollHeight

和

offsetHeight

属性，但由于它是通过

ng repeat

生成的，AngularJS愚弄了我。 我把我的最终解决方案放进去了，但它对我来说太复杂了，我在问是否有人有更简单的解决方案

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

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

棘手的事情是找到触发事件的正确时机：我无法在表的作用域中执行此操作（即：当

$last

行可用时），但必须在外部循环外放置一个假div并调用作用域函数来执行此操作：

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

谁能提出一个更简单的解决方案？提前非常感谢

编辑
我不喜欢

$timeout

这件事，而且：行为可以在设备、PC等之间改变。THK

更新
在谷歌上再搜索一下，我发现了一个建议，通过

$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

不会触发。有线索吗

最终更新
我需要比较所有的方法：

$last

、伪div和

$watch

。这确实很奇怪，

$watch

似乎总是在Plunker中工作，但不是在我的本地PC上；始终在IE 11中工作，但不在Chrome中工作。
我想这是我试图从外部捕捉到的一些内在行为。欢迎任何评论

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

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);
          });
   };
}]);