Question

我有这个简单的控制器：

function MyCtrl($scope) {
  $scope.value = 1;

  $scope.getIncrementValue = function() {
    return $scope.value + 1;

  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<p>{{getIncrementValue()}}</p>

其中呈现“2”。

但是一旦我改为return $scope.value += 1;，我就会得到一些奇怪的错误，我的浏览器中的输出是23。

我找不到原因

Answer 1

在视图插值中调用有状态的状态改变函数是一个非常坏主意。当或多久调用此函数时，您基本上没有对的具体控制。

视图刷新是由角度很多东西触发的，所以你的函数最有可能被执行22次。

您可以通过在函数中添加console.log($scope.value)来检查，以便在控制台中查看它运行的频率。

Answer 2

AngularJS分析您的代码并创建依赖关系结构。查看具有return $scope.value + 1;的第一个函数。如果有任何内容会改变$scope.value的值，则会再次执行此函数并更新视图。

现在看看return $scope.value+=1;。该函数改变了它自己的依赖关系，这意味着它再次被执行，改变它自己的依赖关系，所以它再次执行，改变它自己的依赖关系...你得到了图片。

AngularJS有这样的周期限制，这就是为什么它会中断过程并且$scope.value被卡在某个任意值的原因。

Answer 3

这似乎没问题 - Plunker

JS

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

app.controller('MainCtrl', function($scope) {
    $scope.value = 1;

    $scope.incrementValue = function()
    { 
         $scope.value += 1;
    };
});

标记

<body ng-controller="MainCtrl">
    <p>{{value}}</p>
    <button ng-click="incrementValue()">Increment</button>
</body>

无需返回。

Answer 4

Angular具有随时调用的Digest循环，它验证范围变量的任何变化，并且它还调用你绑定的函数。

以下是根据您的功能执行的步骤。

第一个摘要调用函数getIncrementValue（）。
getIncrementValue（）更改范围内的值。
Digest再次调用如此更新的值可以更新，如果它也使用其他地方。在这里它也改变了价值。

所以它是无限循环。

见下面的例子。我正在更新另一个值，并且每次更改时您的函数也会调用：）

[http://plnkr.co/edit/CVX2IXErS4hIT7fLfzBx?p=preview][1]

为什么我的程序有这种奇怪的行为？

4 个答案: