如何在 AngularJS 中实现 JavaScript 闭包？

【问题标题】：How to implement JavaScript closures in AngularJS?如何在 AngularJS 中实现 JavaScript 闭包？
【发布时间】：2017-12-12 05:28:11
【问题描述】：

我正在使用一个函数来统计按钮的点击次数，如下所示：

$scope.counterFunc = (function(){
    var count = 0;
    console.log('i will be consoled only once');
    return function(){
        console.log(count);
        return ++count;
    }
})();

查看：

<button ng-click="counterFunc()">click me</button>
<div>  
    {{ count value }}
</div>

我可以控制count value，但我如何在视图中显示它。

我可以使用$scope 变量绑定count value 来查看，但我担心count 不应被counterFunc() 之外的任何其他函数更改

有没有其他方法可以做到这一点？..

【问题讨论】：

标签： javascript angularjs closures

【解决方案1】：

您的counterFunc() 已经在每次由ng-click 执行时返回递增的值。您可以像这样将其分配给视图上的变量

<button ng-click="count = counterFunc()">click me</button>
<div>
  {{ count }}
</div>

请注意，count 属性将由您的$scope 中的上述解决方案创建，但这与您的counterFunc() 中的count 变量不同，并且更改$scope.count 不会影响var count。您可以通过添加另一个 button 来重置 $scope.count 的值来测试这一点

<button ng-click="count = counterFunc()">click me</button>
<div>
  {{ count }}
</div>
<button ng-click="count = 0">Reset</button>

现在，您将看到每次按下重置button，显示的值将变为0。但是，当您再次按下click me 时，它将从var count 的最后一个值开始。

【讨论】：