控制器功能使用ng-show调用两次 [英] Controller function getting called twice using ng-show
问题描述
我有一个非常简单的Angular应用设置，代码如下：
I have a very simple Angular app setup, code as follows:
index.html
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js'></script>
<script src='app.js'></script>
</head>
<body ng-app="app">
<div ng-controller="MyCtrl">
<div ng-show="ready()">
Some content
</div>
</div>
</body>
</html>
和 app.js
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope) {
console.log("MyCtrl called")
$scope.ready = function() {
console.log("ready called");
return true;
}
})
如果在控制台打开的情况下运行此操作，您将看到 MyCtrl称为一次，而就准备好了两次。我花了好几个小时试图解决这个问题，我认为没有理由为 $ scope.ready 调用任何东西，但只有一次。
If you run this with your console open you will see MyCtrl called once and ready called twice. I have spent hours trying to figure this out, I see no reason why $scope.ready would be called anything but exactly one time.
如果您使用Angular v1.1.5并使用 ng-if 而不是 ng-show 你会有相同的行为，但是如果你使用 ng-init 它会正确地调用 $ scope.ready 一次。在我的情况下，我将需要 ng-show 或 ng-if 。
If you use a Angular v1.1.5 and use ng-if instead of ng-show you will have the same behaviour, but if you use ng-init it correctly calls $scope.ready one time. In my case I will need ng-show or ng-if.
Plunkr： http://plnkr.co/edit/ZSwVNLeFSuhbouXZu9SM?p=preview
澄清：
要详细说明我的目标，让我们说 $ scope.ready 稍后返回 false （也许它会进行一次AJAX调用，不应该多次调用），我会喜欢一些内容不再可见。也就是说，基于 $ scope.ready 的结果的动态行为。
Clarification:
To elaborate on what I'm aiming for, let's say $scope.ready at some point later returns false (maybe it makes an AJAX call, that should NOT be called more than once), I would like "Some content" to no longer be visible. That is, dynamic behaviour based on the result of $scope.ready.
任何想法？感谢您的帮助！
Any ideas? Thank you for the help!
For the record this and this are not the same problem.
推荐答案
这是设计的，而不是bug（它与AngularJS编译器无关，因为另一个答案错误地说明了） 。 ng-show 和 ng-hide 通过观察表达式的更改准备工作（ ）。
This is by design, not a bug (and it has nothing to do with the AngularJS compiler, as another answer incorrectly stated). ng-show and ng-hide work by "watching" changes of the expression ready().
在每个摘要周期，对于每个手表，AngularJS评估关联的表达式以查看是否有任何更改，如果有，则调用监听器（在 ng-show / ng-hide 的情况下），监听器将显示或隐藏基于元素的元素关于 ready（）返回的值。
At each digest cycle, for every watch, AngularJS evaluates the associated expression to see if there's any change and if there is, invoking the listener (in the case of ng-show/ng-hide, the listener will show or hide the element based on the value returned by ready()).
现在，AngularJS不仅可以满足 ready（）返回的第一个值，因为在此期间摘要周期，某些东西（例如另一个监视表达式）可能实际上会进行一些更改，导致 ready（）返回的任何值变为不同的值（例如，通过改变 isReady 变量，由 ready（）返回。显然，开发人员希望将最新值反映到DOM中。
Now, AngularJS can't just be satisfied with the first value returned by ready() because during the same digest cycle, something (e.g. another watch expression) might actually make some change that causes whatever returned by ready() to be a different value (e.g. by mutating an isReady variable which is returned by ready()). Obviously, developers would expect the latest value to be reflected to the DOM.
因此，AngularJS将至少评估每个监视表达式，以确保它稳定在完成消化循环之前。当然，如果表达式不断变化，这会导致无限的摘要迭代，因此如果摘要周期无法在10次迭代中完成，AngularJS将抛出错误。
Therefore, AngularJS will evaluate every watch expression at least once to make sure that it is "stabilized" before finishing a digest cycle. Of course, this can lead to infinite digest iterations if an expression keeps changing, so AngularJS will throw an error if a digest cycle could not finish within 10 iterations.
这篇关于控制器功能使用ng-show调用两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
