Question

我得到了“10 $ digest（）迭代达到”错误的一般概念，但我认为通过使用track by我可以让Angular意识到列表实际上并没有改变：

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>TrackBy test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js"></script>
</head>
<body>
  <div ng-controller="myController">
    <div simple-list items="theItems | filter:'e'"></div>
  </div>
  <script>
    angular.module('myApp', [])
      .controller('myController', ['$scope', function($scope) {
        $scope.theItems = [
          {Id: 1, Name: 'One'},
          {Id: 2, Name: 'Two'},
          {Id: 3, Name: 'Three'},
          {Id: 4, Name: 'Four'}
        ];
      }])
      .directive('simpleList', [function() {
        return {
          restrict: 'A',
          scope: {
            items: '='
          },
          replace: true,
          template: "<p ng-repeat='item in items track by item.Id'>{{item.Name}}</p>"
        };
      }]);
  </script>
</body>
</html>

这只能正确显示包含“e”的名称，但控制台会显示10个摘要迭代错误。

为什么track by在这种情况下没有帮助？

Answer 1

隔离范围绑定（'='，'＆amp;'和'@'）仅适用于父范围的属性。您的items属性具有角度表达式，而不仅仅是一个简单的属性。您必须将'items'作为父作用域的属性或函数，并在指令本身或控制器中进行过滤。

我通过用这个替换你的第一个项目声明来实现它：

<div simple-list items="theItems"></div>

和你的指令模板：

template: "<p ng-repeat='item in items | filter:\"e\" track by item.Id'>{{item.Name}}</p>"

由于您的问题与隔离范围属性有关，因此可能甚至不需要跟踪。

我个人会在我的控制器中执行此功能过滤。在控制器中使用过滤器的语法有点棘手，但它使得与具有隔离范围的指令绑定更加清晰。

为什么Angular'跟踪'不会阻止'10 $ digest（）迭代'错误？

1 个答案: