在 AngularJS 中，经常会涉及到在页面之间共享数据的问题。例如，我们有一个表单页面，用户填写完数据之后需要跳转到结果页面，这时我们需要把用户填写的数据传递给结果页面显示。本文将介绍一种常见的 AngularJS 页面跳转数据共享方式，帮助读者快速掌握这一技术。
1. 使用 $rootScope 共享数据
$rootScope 是 AngularJS 中最顶层的作用域，它在整个 AngularJS 应用中都是可用的。我们可以通过在 $rootScope 上定义属性来共享数据。例如，我们可以在表单页面上使用一个对象来存储用户填写的数据：
app.controller('FormCtrl', ['$rootScope', function($rootScope) {
$rootScope.data = {};
}]);然后，在提交表单时，我们可以把用户填写的数据存储到 $rootScope 中：
app.controller('FormCtrl', ['$rootScope', '$location', function($rootScope, $location) {
$rootScope.data = {
name: '张三',
age: 20,
gender: '男'
};
$location.path('/result'); // 跳转到结果页面
}]);最后，在结果页面中，我们可以通过 $rootScope 访问到用户填写的数据：
app.controller('ResultCtrl', ['$rootScope', function($rootScope) {
$scope.data = $rootScope.data;
}]);使用 $rootScope 共享数据的好处是非常方便，但也存在一些问题。首先，$rootScope 中的数据对整个应用都是可见的，如果我们不小心修改了 $rootScope 中的数据，可能会对其他页面产生意想不到的影响。其次，$rootScope 可能会存在性能问题，因为它始终在内存中存在，且可以被整个应用共享。因此，我们通常不建议滥用 $rootScope 共享数据。
2. 使用 $routeParams 传递数据
$routeParams 是 AngularJS 路由模块（ngRoute 或 ui-router）提供的服务，用于在路由参数中传递数据。例如，我们可以在路由配置中定义一个参数，然后在页面跳转时把数据添加到该参数中：
-- -------------------- ---- -------
----------------------------- ------------------------ -
--------------
-------------- -
------------ ------------
----------- ----------
--
----------------------------------- -
------------ --------------
----------- ------------
--
------------
----------- -------
---
----
-------------------------- ------------- ------------------- -
---------------------------------- -- ------------
----
---------------------------- ---------------- ---------------------- -
----------- - ------------------
---------- - -----------------
------------- - --------------------
----使用 $routeParams 传递数据的好处是它不会污染 $rootScope，而且数据只会在路由参数中传递，不会对其他路由产生影响。但是，$routeParams 也有一些问题，例如它只适用于较小的数据传递，如果数据量较大或需要传递对象或数组，$routeParams 就无法胜任。此外，$routeParams 对参数的顺序有要求，如果参数顺序不正确，就无法正确获取参数值。
3. 使用服务（Service）传递数据
AngularJS 中的服务（Service）是一种可以在应用的任何地方（包括控制器、指令、过滤器等）共享数据的方式。我们可以通过定义服务并注入到需要使用的地方来完成数据共享。例如，我们可以定义一个服务来存储用户填写的数据：
-- -------------------- ---- -------
----------------------- ---------- -
--------- - ---
------------ - -------------- -
--------- - -----
-
------------ - ---------- -
------ ----------
-
---然后，在表单页面中，我们可以把用户填写的数据存储到 FormData 服务中：
app.controller('FormCtrl', ['FormData', '$location', function(FormData, $location) {
FormData.setData({
name: '张三',
age: 20,
gender: '男'
});
$location.path('/result'); // 跳转到结果页面
}]);最后，在结果页面中，我们可以通过 FormData 服务获取到用户填写的数据：
app.controller('ResultCtrl', ['FormData', function(FormData) {
$scope.data = FormData.getData();
}]);使用服务传递数据的好处是它不会污染 $rootScope，也不仅仅局限于路由参数的传递，同时还可以用于传递对象和数组等数据类型。但是，使用服务传递数据的成本略高，需要在服务中定义一些方法用于数据的存取。此外，如果服务是基于 $http 或 $resource 等异步请求构建的，会涉及到异步回调的处理，进一步增加了使用复杂度。
4. 使用事件（Event）传递数据
AngularJS 中的事件（Event）是一种可以在任意两个控制器之间广播和监听消息的方式。我们可以通过在发送控制器（如表单控制器）中广播一个事件，然后在接收控制器（如结果控制器）中监听该事件来完成数据共享。例如，我们可以定义一个名为 FormDataChanged 的事件：
-- -------------------- ---- -------
-------------------------- -------------- ------------ -------------------- ---------- -
---------------------------------------- -
----- -----
---- ---
------- ---
---
-------------------------- -- -------
----
---------------------------- -------------- -------------------- -
--------------------------------- --------------- ----- -
----------- - -----
---
----使用事件传递数据的好处是它可用于任意两个控制器之间的数据共享，不会造成 $rootScope 的污染，也不必担心顺序或数据类型等问题。但是，也有一些问题，例如事件广播和监听需要在特定的控制器中实现，如果应用规模比较大，可能会导致代码不易维护。此外，事件的性能也可能不如其他方法，因为它需要在整个应用中传递消息。
总结
本文介绍了 AngularJS 中常用的四种页面跳转数据共享方式，包括使用 $rootScope、$routeParams、服务和事件。每种方式都有其优缺点，读者需要根据自己的实际需求选择合适的方式。在使用时，还需注意一些问题，如数据类型、代码复杂度、性能等。希望本文能够帮助读者掌握 AngularJS 页面跳转数据共享的技术，提高应用的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6451f7ca675af4061b5aded5