javascript - 为什么 AngularJS 在每个摘要循环中执行函数？

Question

我来自 Knockout，我正在尝试了解 Angular 如何更新范围。我有点困惑为什么在作用域上定义的函数(例如 $scope.doStuff = function())会在每次作用域刷新时执行。

Plnkr 链接:http://plnkr.co/edit/YnvOELGkRbHOovAWPIpF?p=preview

例如:

HTML

<div ng-controller="one">
  <input type="text" ng-model="a">
  {{b()}}
</div>

JS

angular.module('test', [])
 .controller('one', ['$scope', function ($scope) {
   $scope.a = 'one';
   $scope.b = function () {
     console.log('b has executed');
   }
}])

因此，每当 $scope.a 的输入表单字段中发生事件时，函数 $scope.b 就会执行。为什么会这样？那个函数没有依赖，一直刷新好像效率不高。

如果我在相同的结构中添加另一个 Controller ，如下所示:

HTML

<div ng-controller="one">
  <input type="text" ng-model="a">
  {{b()}}
</div>
<div ng-controller="two">
  <input type="text" ng-model="x">
  {{y()}}
</div>

JS

angular.module('test', [])
.controller('one', ['$scope', function ($scope) {
  $scope.a = 'one';
  $scope.b = function () {
    console.log('b has executed');
  }
}])

.controller('two', ['$scope', function ($scope) {
  $scope.x = 'two';
  $scope.y = function () {
    console.log('y has executed');
  }
}])

每次我在 Controller one 中更新 $scope.a 时，输出是:

b has executed
y has executed

为什么 Controller two 执行 $scope.y？我认为创建一个新的 Controller 会创建一个新的子范围。是因为子作用域链接到父作用域吗？

更有趣的是，如果我在 Controller two 中更新 $scope.x 那么输出是:

b has executed
y has executed
b has executed <-- a second time... what?

为什么函数 $scope.b 会被执行第二次？

那么为什么 Angular 中的函数会在每次作用域刷新时执行？

Answer 1

Angular 使用所谓的脏检查。为了保持 View 和 Controller 之间的绑定(bind)，必须验证绑定(bind)到函数的任何变量。

像您演示的那样使用通常不是一个好主意，并且会影响中型到大型应用的性能。

建议使用固定变量绑定(bind)到 View 并在需要时更改，这将带来更高的整体性能并且只重新渲染已更改的部分。

一般来说，你不会从 View 中“调用”函数，但有时这是唯一的方法，如果在 ng-repeat 中使用动态数据，那么我会将该数据放入对象/数组并返回该对象/数组，那么即使 angular 将继续在其摘要周期中调用该函数，如果不更改，它也不会“更新” View 。