javascript - 当属性更改时，Angular 服务使用 $watch 进行 $http 调用

Question

我对 Angular 还很陌生，想知道处理这个问题的最佳方法是什么。我的应用程序由一项服务构成，该服务跟踪应用程序状态和当前加载的数据。我将其注入(inject)到我的所有 Controller 中，以便应用程序状态将与它们共享，并且还可以使用该服务在 Controller 之间进行更改。该服务的概述有点像这样:

app.factory('AppStateService', function() {
  return {
    selected_section: "blog",
    data_of_selected_section: {here_comes_data_from_an_api}
  }
}

如上所述，我将其注入(inject)到所有 Controller 中并将它们绑定(bind)到 Controller 范围，因此它们都可以更改这些属性，并且效果完美。但是，我真的希望该服务能够在某些属性发生更改时自动对 API 进行 $http 调用。当数据从 API 返回时，我希望将此数据分配给一个属性，以便 Controller 可以根据此数据进行更新。

例如，在上面的示例中，如果 Controller 将 selected_section 从例如从“blog”到“main”，我希望服务执行 $http 调用并将返回的数据放入 data_of_selected_section 中，以使其传播到 Controller 。我当然可以直接从 Controller 执行此操作，并将结果从那里推送到服务，但随后我必须在每个 Controller 中复制该代码。因此，我宁愿希望该服务自行完成。

执行此操作的最佳方法是什么？我想我必须在服务中的某个地方构建 $watch 或 $watchCollection 但我很难完全理解如何做到这一点。特别是因为我很容易想象，以错误的方式做可能会降低性能。

顺便说一句，我想这样做的原因是因为我正在进行数据可视化，因此主要是我的界面而不是我的数据会发生变化。因此，我真的很想将我的数据和应用程序状态“全局”存储在服务中。我不知道这是否有意义。任何帮助将不胜感激!

Answer 1

您可以使用.run，因为此方法将在每次路由更改时实例化服务。

app.run(function ($rootScope, AppStateService) {
    $rootScope.$on('$routeChangeStart', function () {
       $rootScope.data = AppStateService.data_of_selected_section
    });
});

您可以在服务中编写 http 调用，因为只要路由发生变化，它就会自动调用