AngularJS 是一种流行的前端框架，它采用了双向绑定的特性来实现数据与视图的自动同步。在大多数情况下，我们可以通过 $scope 对象来管理数据，并在 HTML 模板中使用它们。但有时候我们需要在去除 $scope 的作用域之外更改数据，这就需要使用其他的技术手段。
使用服务
AngularJS 中的服务是单例对象，它们被用于在整个应用程序中共享数据和功能。你可以创建自己的服务来存储和操作数据，然后在控制器中注入它们以便使用。以下是一个示例：
----------------------- ---
--------------------- ---------- -
--- ---- - -------- ------
------ -
-------- ---------- -
------ -----
--
-------- ----------------- -
---- - --------
-
--
--
--------------------- ---------------- ---------- -
----------- - --------------------
----------------- - ----------------- -
---------------------------
--
---在上面的代码中，我们创建了一个名为 myService 的服务，并定义了两个方法 getData() 和 setData() 用于获取和设置数据。在控制器中，我们注入了 myService 并将其赋值给 $scope.data。当用户点击按钮时，它调用了 $scope.updateData() 方法，并通过 myService 来更改数据。
使用事件总线
事件总线是一种广泛使用的模式，它允许独立组件之间进行通信。在 AngularJS 中，你可以使用 $rootScope 和 $broadcast 来实现事件总线。以下是一个示例：
----------------------- ---
------------------------- -------------------- -
-------------------------------- ------ -------
--
--------------------------- ---------------- -
--------------------- --------------- ----- -
------------------ -- -- ------ -----
---
---在上面的代码中，我们定义了两个控制器 senderCtrl 和 receiverCtrl。当 senderCtrl 执行 $rootScope.$broadcast() 方法时，它会向所有作用域广播 myEvent 事件，并传递数据 'event data'。receiverCtrl 监听了 myEvent 事件，并在接收到事件时输出数据。
使用第三方库
有些情况下，我们需要使用第三方库来操作数据，这就需要将数据从 AngularJS 的作用域中取出并传递给库。以下是一个示例：
----------------------- ---
--------------------- ---------------- -
--- ------ - -------- ------
-------------- - ---------- -
------ -------
--
---
-- ------
--- ----- - -----------------
--- ---- - --------------------------------------------------------------------
--------------------------------在上面的代码中，我们定义了一个控制器 myCtrl 并在其中创建了一个变量 myData。我们通过 $scope.getData() 方法将数据暴露给 HTML 模板。在 JavaScript 文件中，我们引入了第三方库，并使用 angular.element() 来获取元素所关联的作用域，然后调用 getData() 方法来获取数据并传递给库。
总结
在 AngularJS 中，我们可以使用服务、事件总线和第三方库等技术手段来在去除 $scope 的作用域之外更改数据。选择正确的技术取决于你的具体需求和应用场景。无论你选择哪种方法，请确保它能够保持应用程序的可维护性和可扩展性
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25446