为什么AngularJS在每个摘要循环上执行函数? [英] Why does AngularJS execute function on every digest loop?

查看:119
本文介绍了为什么AngularJS在每个摘要循环上执行函数?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我来自Knockout,我正在努力了解Angular如何更新范围。我有点困惑为什么在每个范围刷新时都会执行在范围上定义的函数(例如 $ scope.doStuff = function())。

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链接: http://plnkr.co/编辑/ YnvOELGkRbHOovAWPIpF?p =预览

例如:

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 被执行。为什么会这样?该函数没有依赖关系,总是刷新它似乎效率低。

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');
  }
}])

每次我在控制器一个中更新 $ scope.a 时输出为:

Every time I update $scope.a in controller one the output is:

b has executed
y has executed

为什么控制器两个执行 $ scope.y ?我认为创建一个新的控制器会创建一个新的子范围。是因为子范围链接到父范围?

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?

更有趣的是,如果我更新 $ scope.x 在控制器两个中,然后输出为:

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?

为什么函数 $ scope.b 获取第二次执行?

Why does function $scope.b get executed a second time?

那么为什么Angular中的函数会在每个范围刷新时执行?

So why do functions in Angular get executed on every scope refresh?

推荐答案

Angular使用所谓的脏检查。为了保持视图和控制器之间的绑定,必须验证与函数关联的任何变量。

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.

一般情况下,你不会从视图中调用该函数,但有时这是在ng-repeat中使用动态数据的唯一方法然后我会放置将数据转换为对象/数组并返回该对象/数组,那么即使是角度也会继续调用该函数的摘要周期,如果没有更改,它将不会更新视图。

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆