使用 Angular 服务共享和更新数据

Share and update data using Angular service

本文关键字：更新 数据 共享 Angular 服务 使用      更新时间：2023-09-26

我有一个调用API的服务，如下所示：

app.service("GetDivision", ["$http", function($http){
  this.division = function(divisionNumber){
    return $http.post("/api/league", {division:divisionNumber}).success(function(data){
      return data;
    });
  }
}]);

然后，我有 2 个(或更多(控制器调用该服务：GetDivision.division(number);

现在，控制器 A 加载从服务获取的数据，并将其显示在 HTML 表或类似内容中。控制器 B 具有更新数据库中数据的功能。发生这种情况时，我需要更新从控制器 A 生成的 HTML。

所以我认为我需要执行以下操作之一，但也不明白该怎么做：

  • 当控制器 B 更新数据时，告诉控制器 A 向服务发出更新数据的新请求。
  • 当控制器 B 更新数据时，还要更新包含服务中的数据的变量。然后，控制器 A 监视服务中的变量更改并更新 HTML。

有多种方法可以解决这个问题。

最简单的方法是$rootScope.$broadcast(...)控制器 B 何时更新服务数据。在其他任何地方，您都会监听$scope.$on(...)该更改事件，并更新数据。

这种方法不是最好的，因为您最终会监听来自源代码中未知位置的广播。使其更难维护。

更好的方法是使用适当的范围层次结构。

父指令可以调用 $scope.$broadcast(...) 向所有子指令发送消息。因此，您将创建一个包含指令 A 的指令 B。然后，指令 A 可以侦听来自指令 B 的更改。

有时这不是一种可能的方法，指令 B 必须是指令 A 的子级。在这种情况下，您可以使用指令的require功能。这会将控制器从 A 注入到指令 B 中。进行更改时，调用控制器 A 的方法以通知它更改。

相关文章：