在AngularJS中，指令是一个元素或属性的自定义标记，它允许我们扩展HTML并创建可重用的组件。有时候我们需要从指令中监听全局事件（如浏览器窗口大小改变），本文将介绍在AngularJS中如何实现这一功能，并探讨其中涉及的深度和学习。
问题描述
假设我们正在编写一个指令，它需要监听全局的浏览器窗口大小改变事件，来调整指令内部某些元素的大小。我们可以使用window.addEventListener('resize')来监听窗口大小改变事件，但是在指令中如何正确地绑定该事件以及如何在指令销毁时正确地清除该事件？
最佳实践
使用$rootScope广播事件
AngularJS提供了一个全局的作用域对象$rootScope，我们可以使用它来广播一个全局事件，然后在我们的指令中监听该事件。具体步骤如下：
- 在
$rootScope上定义一个名为windowResize的事件。 - 在指令的
link函数中，使用$rootScope.$on()方法监听该事件。 - 在回调函数中更新指令内部的元素大小。
示例代码如下：
----- --------------- ---- ------------------- -------
----------------------- ---
------------------------- -------------------- -
------ -
----- --------------- -------- ------ -
-------- ---------------- -
-- ------ ------- ---- ----
-
------------------------------ ----------------
-- ------ ----- -------- ---- --------- -- ---------
--------------------- ---------- -
------------------------------- ----------------
---
-
--
--
------------------------- -
-- --------- ------------ ----- ---- ------ -- -------
------------------------------------ ---------- -
--------------------------------------
---
---在上面的代码中，我们定义了一个名为myDirective的指令，并在其中使用$rootScope.$on()方法来监听全局事件windowResize。我们还使用scope.$on('$destroy')方法，在指令销毁时移除该事件的监听。
在应用程序的运行阶段，我们通过angular.element(window).on()方法监听窗口大小改变事件，并在变化发生时广播全局事件windowResize。
使用$window服务
另一种方法是使用$window服务来代替全局的window对象。这种方法可以使我们避免使用全局变量，从而提供更好的可维护性和可测试性。具体步骤如下：
- 在指令的
link函数中，使用$window.addEventListener()方法监听窗口大小改变事件。 - 在回调函数中更新指令内部的元素大小。
- 在指令销毁时，使用
$window.removeEventListener()方法移除事件监听器。
示例代码如下：
----------------------- ---
------------------------- ----------------- -
------ -
----- --------------- -------- ------ -
-------- ---------------- -
-- ------ ------- ---- ----
-
---------------------------------- ----------------
-- ------ ----- -------- ---- --------- -- ---------
--------------------- ---------- -
------------------------------------- ----------------
---
-
--
---在上面的代码中，我们使用了$window服务来代替全局的window对象。我们还使用scope.$on('$destroy')方法，在指令销毁时移除该事件的监听。
总结
在AngularJS中，在指令中绑定全局事件有两种常见的方法：使用$
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25283