AngularJs作用域

ゝ一世哀愁。 2023-06-15 12:28 14阅读 0赞

曾经在做一个项目时，前端框架主要使用AngularJs搭建。因开同事们对AngularJs了解深度参差不齐，加上没有系统化的培训。大部分同事都是后端工程师出身。

项目中出现了各种各样的问题。eg，项目除了使用AngularJs外，还有使用JQuery，JavaScript 等前端js。

比如：

我们angularjs controller 中使用JavaScript操作DOM，新增加的DOM元素可能就不在AngularJs上下文中。

让若你仍需要获取新增DOM元素的内容时，使用angularJS就获取不到。

因为你新增的DOM元素不在AngularJs的上下文作用域中。

需要通过使用 $apply 方法让上下文执行环境重新进入到Angular的上下文中（注：用法 $scope.$apply()）

angularjs提倡声明式模板视图，命令式控制逻辑。尽量使用AngularJs中的指令操作DOM。

### 作用域的生命周期 ###

作用域的执行上下文

浏览器接收一个事件的标准的工作流程应该是：

接收事件 --> 触发回调 --> 回调执行结束返回 --> 浏览器重绘DOM --> 浏览器返回等待下一个事件

上面的过程中，如果一切都发生在Angular的执行上下文的话，那相安无事，Angular能够知道数据模型发生的改变；但是如果当浏览器的控制权跑到原生的 JavaScript中去时（译注：比如通过jQuery监听事件之类的非Angular的回调等），那么应用执行的上下文就发生在Angular的上下文之外了，这样就导致Angular无法知晓数据模型的任何改变。想要让Angular重新掌权并知晓正在发生的数据模型的变化的话，那就需要通过使用 $apply 方法让上下文执行环境重新进入到Angular的上下文中（注：用法 $scope.$apply()）。只有执行上下文重新回到Angular中，那样数据模型的改变才能被Angular所识别并作出相应操作（注：当然，如果执行上下文没有发生改变，也就没有必要显式地去进行 $apply 操作）。举个例子，像 ng-click 这个指令，监听DOM事件时，表达式的计算就必须放在 $apply() 中（注：例子不够完备，待补充）。

在计算完表达式之后，$apply() 方法执行Angular的 $digest 阶段。 在 $digest 阶段，scope 检查所有通过 $watch() 监测的表达式（或别的数据）并将其与它们自己之前的值进行比较。这就是所谓的 脏值检查(dirty checking)。 另外，需要注意的是，$watch() 的监测是异步执行的。这就意味着当给一个作用域中的属性被赋值时，如：$scope.username="angular"，$watch() 方法不会马上被调用，它会被延迟直到 digest() 阶段跑完 （注：至于 $digest 阶段到底是干嘛的，你可以认为就是个缓冲阶段，而且是必要的阶段）。 通过 $digest() 给我们提供的这个延迟是很有必要的，也正是应用程序常常想要的（注：出于性能的考虑），因为有这个延迟，我们可以等待几个或多个数据模型的改变/更新攒到一块， 合并起来放到一个 $watch() 中去监测，而且这样也能从一定程度上保证在一个 $wathc()在监测期间没有别的 $watch() 在执行。 这样，当前的 $watch() 可以返回给应用最准确的更新通知，进而刷新试图或是进入一个新的 $digest() 阶段。 （译注：这一段有点晦涩，可以看下面的一张图结合着学习；还有就是可以把整个过程想象为为了提升效率， 把多个同性质的数据放在同一个 $digest 轮循中处理能够大大提高效率，就像zf办事经常这样，当然，它们的效率不高，ng则不同，效率相对高）

参考文章：[https://www.angularjs.net.cn/tutorial/12.html][https_www.angularjs.net.cn_tutorial_12.html]

[https_www.angularjs.net.cn_tutorial_12.html]: https://www.angularjs.net.cn/tutorial/12.html