为什么 AngularJS 会在每个摘要循环上执行函数? [英] Why does AngularJS execute function on every digest loop?
问题描述
我来自 Knockout，我正在尝试了解 Angular 如何更新范围.我有点困惑为什么在作用域上定义的函数(例如 $scope.doStuff = function())在每次作用域刷新时都会被执行.
Plnkr 链接:http://plnkr.co/edit/YnvOELGkRbHOovAWPIpF?p=preview
例如:
HTML
<input type="text" ng-model="a">{{b()}}JS
angular.module('test', []).controller('one', ['$scope', function ($scope) {$scope.a = '一个';$scope.b = 函数 () {console.log('b 已执行');}}])因此，每当 $scope.a 的输入表单字段中发生事件时，函数 $scope.b 就会被执行.为什么会这样?对那个函数没有依赖，总是刷新好像效率不高.
如果我在相同的结构中添加另一个控制器，例如:
HTML
<input type="text" ng-model="a">{{b()}}<div ng-controller="两个"><input type="text" ng-model="x">{{y()}}
JS
angular.module('test', []).controller('one', ['$scope', function ($scope) {$scope.a = '一个';$scope.b = 函数 () {console.log('b 已执行');}}]).controller('two', ['$scope', function ($scope) {$scope.x = '二';$scope.y = 函数 () {console.log('y 已执行');}}])每次我更新控制器 one 中的 $scope.a 时，输出是:
b 已经执行y 已执行为什么控制器 two 执行 $scope.y?我认为创建一个新的控制器会创建一个新的子作用域.是因为子作用域链接到父作用域吗?
更有趣的是，如果我更新控制器 two 中的 $scope.x 那么输出是:
b 已经执行y 已执行b 已经执行 <-- 第二次......什么?为什么函数 $scope.b 会被第二次执行?
那么为什么 Angular 中的函数会在每次范围刷新时执行?
Angular 使用所谓的脏检查.为了维护视图和控制器之间的绑定，任何绑定到函数的变量都必须经过验证.
像您展示的那样使用通常是个坏主意，会影响中型到大型应用的性能.
建议使用固定变量绑定到视图并在需要时进行更改，这将提高整体性能，并且仅重新渲染已更改的部分.
通常，您不会从视图中调用"函数，但有时这是在 ng-repeat 中使用动态数据的唯一方法，然后我会将这些数据放入对象/数组并返回该对象/数组，那么即使 angular 将继续在其摘要循环中调用该函数，如果未更改，它也不会更新"视图.
I'm coming from Knockout and I'm trying to understand how Angular updates the scope. I'm a bit confused as to why a function defined on the scope (e.g. $scope.doStuff = function()) gets executed on every single scope refresh.
Plnkr link: http://plnkr.co/edit/YnvOELGkRbHOovAWPIpF?p=preview
For example:
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');
}
}])
So whenever an event happens in the input form field for $scope.a, function $scope.b gets executed. Why does that happen? There are no dependencies on that function, it seems inefficient that it is always refreshing.
If I add another controller in the same structure, like such:
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');
}
}])
Every time I update $scope.a in controller one the output is:
b has executed
y has executed
Why is controller two executing $scope.y? I thought creating a new controller creates a new child scope. Is it because the child scopes are linked to the parent scope?
More interestingly, if I update $scope.x in controller two then the output is:
b has executed
y has executed
b has executed <-- a second time... what?
Why does function $scope.b get executed a second time?
So why do functions in Angular get executed on every scope refresh?
Angular uses what is called dirty checking. In order to maintain the binding between the view and controller, any variable which is tied to a function must be validated.
Using like you have demonstrated is generally a bad idea and can effect performance of a medium to large scale app.
Using fixed variables to bind to the view and changing when required is recommended, this will lead to greater performance overall and only re-render the parts that have changed.
In general you don't 'call' the function from the view, but sometimes this is the only way if using dynamic data in a ng-repeat then I would place that data into a object/array and return that object/array, then even tho angular will continue to call the function on it's digest cycle it won't 'update' the view if not changed.
这篇关于为什么 AngularJS 会在每个摘要循环上执行函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
