在 AngularJS 中传递控制器之间的数据

阅读时长 4 分钟读完

在 AngularJS 中,有时需要在不同的控制器(Controller)之间共享数据。这篇文章将介绍在 AngularJS 中如何跨控制器传递数据,并提供一些示例代码和指导意义。

1. 使用服务(Service)

在 AngularJS 中,服务是可用于共享数据和方法的对象。通过创建一个服务,可以在多个控制器之间共享数据。以下是在控制器之间使用服务传递数据的示例:

-- -------------------- ---- -------
-- ------
-------------------------- ---------- -
  --- ---- - ---
  ------ -
    -------- ---------- -
      ------ -----
    --
    -------- ----------------- -
      ---- - --------
    -
  --
---

-- ---------
----------------------- ---------------- ------------ -
  -- ----
  -------------------------- ------- ---- -----
---

----------------------- ---------------- ------------ -
  -- ----
  ----------- - ----------------------
---

上面的代码创建了一个名为 dataService 的服务,它包含两个方法:getDatasetData。在 Ctrl1 控制器中,我们调用了 setData 方法来设置数据。在 Ctrl2 控制器中,我们调用了 getData 方法来获取数据,并将它绑定到 $scope 上,以便在视图中使用。

2. 使用事件(Event)

另一种在 AngularJS 中跨控制器传递数据的方法是使用事件。通过 $rootScope 对象,可以在应用程序的任何部分广播事件,并在其他部分监听这些事件。以下是一个使用事件传递数据的示例:

-- -------------------- ---- -------
-- ------------
----------------------- ---------------- ----------- -
  -------------------------------- ------ ------- ---- -----
---

-- ------------
----------------------- ---------------- ----------- -
  ------------------------- --------------- ----- -
    ----------- - -----
  ---
---

上面的代码中,我们在 Ctrl1 控制器中广播了一个名为 myEvent 的事件,并传递了一个包含数据的对象。在 Ctrl2 控制器中,我们使用 $rootScope.$on 方法来监听 myEvent 事件,并将数据绑定到 $scope 上,以便在视图中使用。

3. 使用路由(Route)

还有一种在 AngularJS 中传递数据的方法是使用路由(Route)。通过路由参数,可以在不同的控制器之间共享数据。以下是一个使用路由传递数据的示例:

-- -------------------- ---- -------
-- ----
----------------------------------- -
  --------------
    --------------- -
      ------------ -------------
      ----------- -------
    --
    --------------------- -
      ------------ -------------
      ----------- -------
    ---
---

-- -----------------------
----------------------- ---------------- ---------- -
  --------------------------------
---

-- --------------
----------------------- ---------------- ------------- -
  --- ---- - ----------------------------
  ----------- - --------
  ---------- - --------
---

上面的代码中,我们在 Ctrl1 控制器中使用 $location.path 方法来跳转到 Ctrl2 控制器,并将数据传递为路由参数。在 Ctrl2 控制器中,我们使用 $routeParams 对象来获取路由参数,并将它们分解为两个变量 $scope.name$scope.age

结论

在 AngularJS 中,有多种方法可以在控制器之间

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/25030

纠错
反馈