我得到了" 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>"
曲目可能甚至不是必需的,因为您的问题是隔离范围属性。
我个人会在控制器中的功能中进行此过滤。在控制器中使用过滤器的语法有些棘手,但是它可以与分离型范围的指令保持更干净。