Question

我每次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

Answer 1

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

使用此：

{{1}}

Answer 2

我已将范围添加到指令中。还有ngRepeat的$ last通过范围变量发送。并且正在使用范围观察对scope.last的更改。$ watch所以每当列表更改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();
        }  
      });

    }
  }
});

Ng-repeat在过滤后

2 个答案: