javascript - 调整 ng-repeat 过滤器的大小

Question

我目前有一个嵌入在 iframe 中的 AngularJS 应用程序，需要调整其大小以避免出现滚动条。我的应用程序中有一个函数可以计算容器的高度，然后调整 iframe 的大小。

目前我正在使用指令 (resizeAppPart)，它将调用范围内最后一项的调整大小函数。

指令:

app.directive('resizeAppPart', function () {
  return function (scope, element, attrs) {
    if (scope.$last) {
      Communica.Part.adjustSize();
    }
  }
});

布局:

<tr ng-repeat="task in filteredTasks = (tasks | filter:filters)" resize-app-part>                    
  <td><a href="{{spConfig.spHostUrl}}{{task.visit.ServerRelativeUrl}}/Lists/Actions/DispForm.aspx?ID={{task.Id}}">{{task.Task_x0020_Title}}</a></td>
  <td><span ng-repeat="user in task.assignees" ng-show="user.Title != ''">
  ...
</tr>

这适用于初始加载，但如果我使用任何搜索框过滤列表，该指令就不会运行，因此您最终会得到一个滚动条或几千个像素的空白 - 两者都不理想。 p>

有没有办法在表格过滤后直接调用指令，甚至直接调用函数？

Answer 1

你需要放置一个 $watch ，使用这个:

app.directive('resizeAppPart', function ($timeout) {
  return function (scope, element, attrs) {
    scope.$watch('$last',function(){
        Communica.Part.adjustSize();
    }

    scope.$watch(attrs.filterWatcher,function(){
       $timeout(function(){
         Communica.Part.adjustSize();
       },100)
    })
  }
});

这样对 html 进行了轻微的改变

<tr ng-repeat="task in tasks | filter:filters" resize-app-part filter-watcher={{filters}}>