var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
$scope.testMethod = function() {
alert('hi');
}
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.5.0" data-semver="1.5.0" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
{{testMethod()}}
</div>
</body>
</html>
我在视图模板中只调用了一次方法.但为什么要执行两次？
解决方法
Angular可确保在这种情况下以唯一可能的方式显示最新的正确的最新值 – 通过在每次更改范围时调用该函数.
你会看到人们称这个“$摘要阶段”.它可能由于很多原因而发生.为了这个解释,我简化了东西.如果你想知道更多阅读https://docs.angularjs.org/guide/scope
作为一般规则 – 避免绑定到一个函数.而是记住$scope变量中的函数响应,并绑定到它.将绑定多次绑定到一个函数可能会导致性能问题,当绑定计数增长在您的项目.
编辑 – 回答sahbeewah评论(见下文)
我们来改变这个例子.打开控制台并运行下面的代码.
var app = angular.module('myApp',function($scope) {
var i = 0;
$scope.testMethod = function() {
alert('hi');
i++;
return i; // Return a different value every time
}
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.5.0" data-semver="1.5.0" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
{{testMethod()}}
</div>
</body>
</html>
为了示例的目的,对于$scope.testMethod,每次调用它都返回不同的值很重要.
你会注意到以下几点：
>“嗨”警报将被多次显示
>多次看到以后出现以下错误：
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
所以发生了什么事？每当我们改变$scope状态时,角度运行另一个摘要阶段,直到它“稳定”(没有更多的变化). 10个连续$摘要阶段有限制.
在线程后角度调用$digest时,控制器被附加,然后,因为我们更改了$范围,它调用另一个摘要.如果我们从代码中删除所有绑定,则只会出现一个摘要.
我们可以很容易地检查.从示例中删除{{testMethod()}}行,然后在角度代码中放置一个断点：$digest,第16700行(角度为1.5.0).
在这行上,你会看到((dirty || asyncQueue.length)&！(ttl–)){.
你的断点现在只能打一次.我们来看看上面的2行. Angular团队在那里写了一个有趣的评论：
// `break traverseScopesLoop;` takes us to here
这是一个自我解释的评论,如果我们上到16629行,我们会看到
do { // "while dirty" loop
名为“dirty”的代码中有一个变量,它创建一个do … while循环.当范围很脏(检测到有变化)时,您将停留在此循环中.更改是任何范围变量的任何变化,以任何方式通过任何形式的绑定($watch)进行更改.
这就是为什么我们在这里有2 $摘要阶段.
您可以找到Angular 1.5 here.为了调试目的,我已经切换到非最小版本.