AngularJs作用域

本文探讨了在使用AngularJS框架进行项目开发时遇到的问题,特别是AngularJS与DOM交互的注意事项,包括如何正确使用$apply方法确保数据模型的改变能被AngularJS识别,以及在混合使用AngularJS与其他JavaScript库时的最佳实践。

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

曾经在做一个项目时,前端框架主要使用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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

EngineerForSoul

你的鼓励是我孜孜不倦的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值