如何在多个视图部分重用 angularjs 数据？

Posted 2023-02-26

【中文标题】如何在多个视图部分重用 angularjs 数据？

【英文标题】：how to reuse angularjs data in several view parts?

【发布时间】：2015-08-20 13:37:30

【问题描述】：

我正在使用 AngularJS 构建某种仪表板网络应用程序：

在一个“概览”页面中，有多个不同组成部分的汇总图表，例如：“前 3 名人员”和“前 3 名公司” 在单独的“人员”页面中，我想再次显示“前 3 名人员”图表，但不显示“前 3 名公司”图表。 同样，在“公司”页面中，我只想显示前 3 名公司的图表

如何在相关页面和概览页面中重复使用每个图表（模型、视图、功能）？组织控制器、视图等的正确方法是什么？

【问题讨论】：

制定 2 个指令：toppersons 和 topcompanies 或者我错过了 smth

【参考方案1】：

对于数据层，我认为最好的方法是使用service。

您可以使用服务在不同控制器之间传递数据。您需要做的就是使用依赖注入将您的服务注入适当的控制器。并且在每个服务中都有 getter 和 setter 来存储和检索数据。

对于组织，每个视图都应该有自己的控制器。

对于视图层，最好的选择是custom directives

指令是可重用组件，可在整个应用程序中使用，并且可以在 HTML 中的任何位置注入。 每个可重用指令都可以通过属性传递数据来自定义.

【讨论】：

这可能有助于数据层，没错，但我想重用整个图表：它有它的 html 位、css、某些调整其外观的按钮等......

编辑了问题。您可以将指令用于可重用但可自定义的 html 组件。

【参考方案2】：

您可以在不同的页面上使用服务和调用服务。如果您的图表只是 html，那么您可以使用价值配方

http://learn-angular.org/#!/lessons/the-value-recipe

如果它更复杂，你可以使用类似的东西

http://learn-angular.org/#!/lessons/the-service-recipe

【参考方案3】：

为图表视图创建指令 加载或缓存日期的服务（***人员或公司） 从此两个方向 将服务注入指令并初始化它抛出属性 where put url from where load data 在控制器中注入服务并带有图表日期的 init 指令抛出指令属性

在你想要的地方重用指令