HTML

Question

我试图将带有过滤器的ng-repeat的结果传递给子指令，但是我得到了一个无限的摘要周期错误。

HTML

RaisePropertyChanged

JS

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="4.0.0" src="https://code.angularjs.org/latest/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <table ng-controller="repeatCtrl">
    <thead></thead>
    <tr ng-repeat="x in (filteredItems = (list | filter: evens))">
      <td>{{x}}</td>
    </tr>
    <tfoot>
      <tr>
        <td footer-directive="" repeat-ctrl="repeatCtrl" list='filteredItems'></td>
      </tr>
    </tfoot>
  </table>
</body>

</html>

您可以看到已过滤的列表已正确填充，但存在无限的摘要循环

Answer 1

尝试删除require:以及scope:下的所有内容 - 请在此处详细了解隔离范围https://docs.angularjs.org/guide/directive＆amp;这里https://github.com/angular/angular.js/issues/9554

另外，如果您有controller:function()

，则不需要link:function()

你的指令应该更像这样：

app.directive('footerDirective', function() {
return {
    template: 'List: {{list}}',
    link: function(scope, element, attrs) {
        console.log(scope.list)
    }
}});

祝你好运

Answer 2

我发现了问题

我应该在filteredItems上使用$ watchCollection而不是$ watch

如何将ng-repeat过滤列表传递给自定义指令

HTML

JS

2 个答案: