在 Angular 中使用 $apply() 的正确方法
在 Angular 中,当我们需要手动更新视图(View)时,需要使用 $apply() 方法。官方文档指出,$apply() 是一个函数,在某个作用域中传入一个函数并执行后,会通过 $digest 循环触发数据变化并更新视图。但是,如果 $apply() 不正确使用,可能会导致性能问题、bug 以及难以调试的问题。
在本文中,将介绍在 Angular 中使用 $apply() 的正确方法,探讨如何避免常见的错误和陷阱,并提供一些示例代码。
一、正确的使用方法
(一)$apply() 中传入函数是必须的,而不是选择性的
在官方文档中,$apply() 的描述中提到了传入一个函数。可以这样理解,只有为 $apply() 提供了一个函数作为参数,AngularJS 才会触发应用层面的数据交互,从而使 AngularJS 应用程序的内部模型得到更新。如果不提供函数,则不会触发应用层面的数据交互。
此外,$apply() 中传入函数是为了数据改变推动 $digest 循环的执行,如果不传入函数,则`$digest 调用无意义。
(二)$apply() 只能在 Angular 上下文中使用
在 Angular 中,Angular 只能在自己的上下文中自动检测数据变更和更新视图,而非 Angular 的上下文则不行。因此,如果需要手动更新视图,必须将代码放在 Angular 上下文信任的范围内。
下面是一个例子:
-------- ----- - --- ------ - ------------------------------------ ------------------------ - -- --- -- --- -
上面代码中用 angular.element 从分层文档对象取得了 $scope。通过将 $scope 传递给 $apply 方法让 AngularJS 被告知其需要更新之前所绑定的属性、指令等。
二、避免常见错误和陷阱
(一)避免 $apply() 嵌套
如果在使用 $apply() 时嵌套了一个 $apply() 调用,很有可能会出现异常。原因是,Angular 会将 $apply() 所产生的数据更改放在 JavaScript 的执行队列尾部,而这些更改通常在浏览器的下一次重绘(repaint)之前才会实际发生。如果嵌套了多个 $apply(),则每一个 $apply() 就会产生一个数据更改,并被放在队列末尾,这样会导致多个循环的数据更改同时被清除或者更新,产生不可预料的结果。
(二)避免过分使用 $apply()
在 Angular 应用程序中,应该尽量避免使用 $apply()。因为,在大多数情况下,Angular 可以自动引发 $digest 循环,并进行数据响应式的更新。
(三)使用 $timeout() 而非 $apply()
$timeout() 是 AngularJS 自带的定时器服务,这个服务的处理函数在调用 $apply() 之前会等待一段时间。这样,代码就能够在 "digest" 识别模式下运行。
三、示例代码
下面是一段使用 $apply() 的示例代码:
------------------------------- ---------- ---------------- - --------------- - ------ ----------- -------------------------- - ------------------------ - --------------- - ------ -------------- --- --- ----
上面代码中,我们在 Angular 范围($scope)中声明了一个变量 Greeting,然后在按钮单击时间中使用 $scope.$apply() 更新变量的值。由于 $apply() 的调用不在 Angular 上下文中被调用。Angular 检测不到正在进行的更改,必须手动触发变更检测流程,并在修改模型属性时引入一些自我保护机制。
结论
$apply() 是 AngularJS 中自动检测更改的一种方式,是维持 AngularJS 数据响应能力的关键。本文介绍了在 AngularJS 中使用 $apply() 的正确方法、避免常见错误和陷阱,并通过实例代码来加以说明。希望可以对读者在使用 AngularJS 开发时有所帮助。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6721be422e7021665e08a413