angular常见问题总结

最新推荐文章于 2019-07-26 14:35:00 发布

转载最新推荐文章于 2019-07-26 14:35:00 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/x-jingxin/p/9469053.html

文章标签：

#javascript #ui #ViewUI

本文深入探讨AngularJS中的脏检查机制，解释其工作原理、触发条件及应用场景，帮助开发者理解如何有效利用这一机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文引自：https://www.cnblogs.com/zhoulujun/p/8881414.html

这篇是对angularJS的一些疑点回顾，是对目前angularJS开发的各种常见问题的整理汇总。如果对文中的题目全部了然于胸，觉得对整个angular框架应该掌握的七七八八了。希望志同道合的通知补充内容

Angular 的数据绑定采用什么机制，详述原理？

脏检查机制。阐释脏检查机制，必须先了解如下问题。

单向绑定（ng-bind）和双向绑定（ng-model）的区别？

ng-bind 单向数据绑定（$scope -> view），用于数据显示，简写形式是 {{}}。

两者的区别在于页面没有加载完毕 {{val}} 会直接显示到页面，直到 Angular 渲染该绑定数据（这种行为有可能将 {{val}} 让用户看到）；而 ng-bind 则是在 Angular 渲染完毕后将数据显示。

ng-model 是双向数据绑定（scope−>viewandview−>

双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时，会更新到 model ，当 model 中数据有变化时，view 也会同步更新，显然，这需要一个监控。

双向数据绑定的原理？

Angular 在 scope 模型上设置了一个监听队列，用来监听数据变化并更新 view 。

每次绑定一个东西到 view 上时 AngularJS 就会往 watch队列里插入一条

当你写下表达式如{{ val }}时，AngularJS在幕后会为你在scope模型上设置一个watcher（表达式将被 Angular 编译成一个监视函数），它用来在数据发生变化的时候更新view。这里的watcher和你会在AngularJS中设置的watcher是一样的：

 
         $scope.$watch(
         'val'
         , 
         function
         (newValue, oldValue) {
        
         //update the DOM with newValue
        
         });

将数据附加到 Scope 上，数据自身不会对性能产生影响，如果没有监视器来监视这个属性，那个这个属性在不在 Scope 上是无关重要的；Angular 并不会遍历 Scope 上的属性，它将遍历所有的观察器。
每个监视函数是在每次 $digest 过程中被调用的。因此，我们要注意观察器的数量以及每个监视函数或者监视表达式的性能。

$digest循环是在什么时候以各种方式开始的？

当浏览器接收到可以被 angular context 处理的事件时，digest循环就会触发，遍历所有的

举个栗子

 
         <
         button 
         ng-click="val=val+1">increase 1</
         button
         >

click 时会产生一次更新的操作（至少触发两次 $digest 循环）

按下按钮
浏览器接收到一个事件，进入到 angular context
digest循环开始执行，查询每个
由于监视 scope.val的
新的 $digest 循环未检测到变化
浏览器拿回控制器，更新 $scope. val.新值对应的 dom

在调用了scope.

目前为止还不错！但是，有一个小问题。在上面的例子中，AngularJS并不直接调用digest()，而是调用因此，一轮digest循环在

通常写代码时我们无需主动调用 apply或

 
         DOM.addEventListener(
         'click'
         , 
         function 
         ($scope) {
        
         $scope.$apply(() => userCode());
        
         });

可以看到：ng-click 帮我们做了 apply这个操作。类似的不只是这些事件回调函数，还有

现在，假设你将ng-click指令关联到了一个button上，并传入了一个function名到ng-click上。当该button被点击时，AngularJS会将此function包装到一个wrapping function中，然后传入到scope.

Note: scope.

$digest 循环会运行多少次？

$digest 循环的上限是 10 次（超过 10次后抛出一个异常，防止无限循环）。

$digest 循环不会只运行一次。在当前的一次循环结束后，它会再执行一次循环用来检查是否有 models 发生了变化。

这就是脏检查（Dirty Checking），它用来处理在 listener 函数被执行时可能引起的 model 变化。因此 digest循环会持续运行直到model不再发生变化，或者

当 $digest 循环结束时，DOM 相应地变化。

脏检查如何被触发？

angular 会在可能触发 UI 变更的时候进行脏检查：这句话并不准确。实际上，

脏检查是digest执行的，另一个更常用的用于触发脏检查的函数apply——其实就是 $digest 的一个简单封装（还做了一些抓异常的工作）。

通常写代码时我们无需主动调用 apply或

 
         DOM.addEventListener(
         'click'
         , 
         function 
         ($scope) {
        
         $scope.$apply(() => userCode());
        
         });

angular对常用的dom事件，xhq事件作了封装，如果调用这些封装，就会在里面触发进入angular的digest流程，主要有以下情况：

DOM事件，如用户输入文本，点击按钮等，（ng-click）
XHQ响应事件（$http）
浏览器Location变更事件，即Url中hash部分变更（$location）
Timer事件（Timeout,
手动调用apply或

apply()和

apply是

apply()和

1）最直接的差异是， $apply 可以带参数，它可以接受一个函数，然后在应用数据之后，调用这个函数。所以，一般在集成非 Angular 框架（比如jQuery）的代码时，可以把代码写在这个里面调用。
2）当调用 digest的时候，只触发当前作用域和它的子作用域上的监控，但是当调用

什么时候手动调用 $apply() 方法？

取决于是否在 Angular 上下文环境（angular context）。

AngularJS对此有着非常明确的要求，就是它只负责对发生于AngularJS上下文环境中的变更会做出自动地响应(即，在apply()方法中发生的对于models的更改)。AngularJS的built−in指令就是这样做的，所以任何的model变更都会被反映到view中。但是，如果你在AngularJS上下文之外的任何地方修改了model，那么你就