为什么 Angular "跟踪"不能防止"10 $digest() 迭代"错误?



我得到了" 10 $ digest()迭代的一般想法"错误,但是我认为通过使用track by,我可以意识到该列表实际上并没有改变:

<!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在这种情况下没有帮助?

孤立范围绑定('=','&amp;'和'@')仅在父范围的属性上工作。您的项目属性具有角度表达,而不仅仅是一个简单的属性。您必须将"项目"作为父范围的属性或函数,然后在指令本身或控制器中进行过滤。

我通过以下更换您的第一个项目来替换您的工作:

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

和您的指示模板:

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

曲目可能甚至不是必需的,因为您的问题是隔离范围属性。

我个人会在控制器中的功能中进行此过滤。在控制器中使用过滤器的语法有些棘手,但是它可以与分离型范围的指令保持更干净。

最新更新