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

Question

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

• 在一个"overview"页面中，有几个不同组件的汇总图表，例如："top 3 persons"和"top 3 companies"
• 在单独的 "persons" 页面中，我想再次显示 "top 3 persons" 图表但不显示 "top 3 companies" 图表。
• 同样，在 "companies" 页面中，我只想显示前 3 家公司”图表

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

Answer 1

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

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

如果它更复杂，你可以使用像

这样的东西

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

Answer 2

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

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

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

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

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

Answer 3

• 为图表视图创建指令
• 加载或缓存日期服务（顶级人物或公司） 从这点两个方向
• 将服务注入指令并初始化它抛出属性 where put url from where load data
• 在 too controller 和 init 指令中注入服务，图表的日期抛出指令属性

在你想要的地方重用指令