控制器函数使用 ng-show 调用两次

Controller function getting called twice using ng-show

本文关键字：两次 调用 函数 ng-show 控制器      更新时间：2023-09-26

我有一个非常简单的 Angular 应用程序设置，代码如下：

索引.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>

和应用程序.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被称为任何东西，而不是一次。

如果您使用 Angular v1.1.5 并使用 ng-if 而不是 ng-show，您将具有相同的行为，但如果您使用 ng-init它会正确调用$scope.ready一次。就我而言，我需要ng-show或ng-if.

普伦克尔：http://plnkr.co/edit/ZSwVNLeFSuhbouXZu9SM?p=preview

澄清：为了详细说明我的目标，假设$scope.ready稍后返回false(也许它进行了 AJAX 调用，不应多次调用(，我希望"某些内容"不再可见。也就是说，基于$scope.ready结果的动态行为。

有什么想法吗？谢谢你的帮助！

为了记录，这和这不是同一个问题。

这是

设计使然，而不是错误(它与AngularJS编译器无关，因为另一个答案错误地陈述了(。 ng-show和ng-hide通过"观察"表达式ready()的变化来工作。

在每个摘要周期中，对于每个监视，AngularJS都会计算关联的表达式以查看是否有任何更改，如果有，则调用侦听器(在ng-show/ng-hide的情况下，侦听器将根据ready()返回的值显示或隐藏元素(。

现在，AngularJS不能只满足于ready()返回的第一个值，因为在相同的摘要周期中，某些东西(例如另一个监视表达式(实际上可能会进行一些更改，从而导致ready()返回的任何内容成为不同的值(例如，通过改变ready()返回的isReady变量(。显然，开发人员希望最新的价值能够反映到 DOM 中。

因此，AngularJS 将至少评估一次每个监视表达式，以确保它在完成摘要周期之前"稳定"。当然，如果表达式不断变化，这可能会导致无限的摘要迭代，因此如果摘要周期无法在 10 次迭代内完成，AngularJS 将抛出错误。

有一个关于此的错误报告，响应与编译器进行双重检查

有关

这是预期行为。AngularJS执行两次调用，以确保模型在渲染之前已经稳定下来。

应该有更多关于为什么在这里的信息 http://docs.angularjs.org/guide/compiler

错误报告：https://github.com/angular/angular.js/issues/1146

相关文章：