javascript - ng-repeat 的列表源调用了太多次

Question

angular.module('NGTest', [
])
.controller('ItemList', ['$scope', function($scope) {
	console.log("ItemList controller init");
	var self = this;
  self.count = 4;
  self.getItems = function() {
  	console.log("ItemList.getItems() called");
	  return [];
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="NGTest">
<div ng-controller="ItemList as lst">
<select ng-options="value for value in [1,2,3,4,5]" ng-model="lst.count"></select>
<div ng-repeat="item in lst.getItems()">foo </div>
</div>
</div>

通过日志条目，您可以看到在启动时， lst.getItems() 函数被调用了两次。为什么是两次？

当您更改 lst.count 的值时也会调用它，但根本不会使用它。 好的，我知道 AngularJS 不可能那么聪明，并且看到 lst.getItems() 的代码不依赖于 lst.count，但我希望默认情况下它假定它不依赖，我必须将它输入函数参数。

Answer 1

Why twice

您需要仔细阅读 Angular 摘要循环的工作原理。每个周期将运行至少 2 个摘要，如果这些摘要中的范围发生变化，则运行更多。

使用函数作为 ng-repeat View 的源不是一个好主意。在 Controller 中获取数据并将其作为范围数组传递给 View

self.items= getItems();   

function getItems(){
   console.log("ItemList.getItems() called");
   return [];
}

现在函数只会被调用一次...当 Controller 初始化时

查看

<div ng-repeat="item in lst.items">{{item}}</div>