ng-repeat 过滤后完成重发答案

【问题标题】：Ng-repeat finished refire after filterng-repeat 过滤后完成重发
【发布时间】：2015-09-09 09:20:16
【问题描述】：

我试图在每次 ng-repeat 完成时启动一个函数，到目前为止，我有以下内容：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.friends = [{
    name: 'John',
    phone: '555-1276'
  }, {
    name: 'Mary',
    phone: '800-BIG-MARY'
  }, {
    name: 'Mike',
    phone: '555-4321'
  }, {
    name: 'Adam',
    phone: '555-5678'
  }, {
    name: 'Julie',
    phone: '555-8765'
  }, {
    name: 'Juliette',
    phone: '555-5678'
  }]

  $scope.test = function() {
    console.log('test');
  }
});

app.directive('onFinishRender', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attr) {
      if (scope.$last === true) {
        scope.$evalAsync(attr.onFinishRender);
      }
    }
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <label>Search:
    <input ng-model="searchText">
  </label>
  <table id="searchTextResults">
    <tr>
      <th>Name</th>
      <th>Phone</th>
    </tr>
    <tr ng-repeat="friend in friends | filter:searchText" on-finish-render="test()">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
    </tr>
  </table>
</body>

</html>

这会触发该函数一次，但您将如何修改它以使其在每次应用过滤器时都能正常工作？

Plunker version

【问题讨论】：

您可以编写自定义过滤器并将此函数作为回调传递
这就是我所做的......它只触发一次
不，您创建自定义指令，我说的是自定义过滤器
哦，抱歉，看错了，去研究一下
类似this，但在这种情况下过滤器调用两次

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

如果我理解你的要求是正确的，你会在你的搜索输入框中使用 ng-change 指令。

使用这个：

<input ng-model="searchText" ng-change="test();">

【讨论】：

在示例中可以使用它，但在我需要它的设置中，内容是异步加载的（忘了提，我的错），所以这可以提前调用
@Kiwi，你能提供更多相关的样本吗？
@Kiwi “所以这可以提前调用”？

【解决方案2】：

我已经为指令添加了范围。 ngRepeat 的 $last 也是通过范围变量发送的。并且使用 scope.$watch 监视对 scope.last 的更改，因此每当列表更改时，scope.last 都会更改，然后在最后一步返回 true。这将在集合发生变化时运行。

查看更新的 Plunkr

http://plnkr.co/edit/68XXIQyo2rkUP4uj6bnI?p=preview

HTML：

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.3.15" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
  <script src="app.js"></script>
</head> 

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>

  <label>Search:
    <input ng-model="searchText">
  </label>
  <table id="searchTextResults">
    <tr>
      <th>Name</th>
      <th>Phone</th>
    </tr>
    <tr ng-repeat="friend in friends | filter:searchText" on-finish-render="test()" last="$last">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
    </tr>
  </table>
</body>

</html>

JS：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.friends = [{
    name: 'John',
    phone: '555-1276'
  }, {
    name: 'Mary',
    phone: '800-BIG-MARY'
  }, {
    name: 'Mike',
    phone: '555-4321'
  }, {
    name: 'Adam',
    phone: '555-5678'
  }, {
    name: 'Julie',
    phone: '555-8765'
  }, {
    name: 'Juliette',
    phone: '555-5678'
  }]

  $scope.test = function() {
    console.log('test');
  }
});

app.directive('onFinishRender', function($timeout) {
  return {
    restrict: 'A',
    scope: {
      onFinishRender: '&',
      last: '='
    },
    link: function(scope, element, attr) {
      scope.$watch('last', function(){
          if (scope.last === true) {
          scope.onFinishRender();
        }  
      });

    }
  }
});

【讨论】：