在ng-repeat过滤器上调整大小

Question

I currently have an AngularJS application embedded in an iframe which needs to be resized to avoid scrollbars. I've got a function in the app that calculates the height of the container and then resizes the iframe.

Currently I am using a directive (resizeAppPart) which will call the resize function on the last item in the scope.

Directive:

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

Layout:

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

This works on the initial load but if I filter the list using any of the search boxes, the directive doesn't run so you either end up with a scrollbar or a few thousand pixels of whitespace - neither are ideal.

Is there a way to call the directive, or even the function directly, after the table is filtered?

Answer 1

You need to put a $watch , Use this:

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

And slight change in html this way

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