javascript - 如何在绑定(bind)中仅运行一次附加到 Angular Controller 的功能

Question

我将一个函数附加到范围，我想在绑定(bind)中运行它，如下所示:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    var count = 0;

    $scope.f = function () {
      count++;
      return count;
    }
}

html...

<div ng-controller="MyCtrl">
  {{f()}}
</div>

但是当我运行它时，该函数返回 11，您可以检查这个 fiddle :http://jsfiddle.net/h4w4yc6L/

虽然我只在 html 上调用了一次，但似乎该函数运行了好几次，因为我的控制台提示

angular.js:13920 
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

请注意，我真的是 Angular 的新手!我不知道为什么会发生这种情况，所以如果您向我提供有关为什么会发生这种情况、如何​​避免这种情况以及实现这种情况的正确方法是什么的信息，我将非常高兴...

提前致谢:)

Answer 1

Angular 的工作原理是绑定(bind)模型以通过范围查看。每隔一段时间，它会在范围上运行摘要循环以更新关联的 View 。在摘要循环期间，(几乎)该范围内的所有绑定(bind)至少被重新评估一次 - 并且可能多次，因为如果摘要循环认为需要重复多次(如果值不是“稳定”的)。我推荐阅读 https://docs.angularjs.org/guide/scope ，特别是范围生命周期部分。

由于您直接绑定(bind)到函数表达式 {{f()}}(参见 https://docs.angularjs.org/guide/expression )，Angular 会在每次重新计算绑定(bind)时调用该函数。不建议将插值语法 {{}} 与更改 Controller 或模型状态的函数一起使用，因为您无法控制它们的评估频率

我应该首先注意，如果您希望函数仅在某些用户输入(例如点击)时重新评估，请使用适当的绑定(bind)(ng-click)等。

如果您真的希望函数只被评估一次，您可能希望在 Controller 的构造函数中评估它并存储结果值。例如。

function MyCtrl($scope) {
    var count = 0;

    $scope.f = function () {
      count++;
      return count;
    }

    $scope.g = f();
}

<div ng-controller="MyCtrl">
   {{g}}
</div>

或者您可以使用 ng-init(参见 https://docs.angularjs.org/api/ng/directive/ngInit ，并注意顶部的警告)

因此，使用 ng-init，您可能会得到

<div ng-controller="MyCtrl" ng-init="foo = f()">
   {{foo}}
</div>

虽然这不是推荐的模式。

另一种选择是使用一次性绑定(bind)(请参阅 https://docs.angularjs.org/guide/expression 上标题为 一次性绑定(bind) 的部分)

所以，你可以做类似的事情

<div ng-controller="MyCtrl">
   {{::f()}}
</div>