【问题标题】：Angularjs structure for reusable data visualization?用于可重用数据可视化的 Angularjs 结构？
【发布时间】：2013-10-15 03:11:06
【问题描述】：

我想用 Angularjs 构建一个可重复使用的 SVG 图表，但我有许多与指令控制器相关的问题。

首先，我希望能够使用这样的标记来呈现带有影响内部状态并因此影响数据可视化的表单元素的图表：

<scatterChart></scatterChart>

<div class="scatterChart">
 <div> [Form elements] </div> 
 <svg>
   [Data visualization]
 </svg> 
</div>

问题 1：控制器、指令、模块
将其构建为具有单独控制器的单个指令是否有意义？或者您会将控制器嵌入指令中还是创建一个模块？

问题 2：模型/状态到 SVG 渲染
假设图表控制器具有这样的内部状态：

scope.model = {
  xAxis : "xyz",
  yAxis : "abc"
}

模型中的更改应触发图表的重新呈现。在控制器和指令之间共享所有图表用户控制属性的 DRY/正确方式是什么？（同时指令应该能够有一些依赖/私有属性。）

问题 3：API
我如何将初始状态传递给图表？属性？如果是20参数状态呢？

<scatterChart xAxis="abc"></scatterChart>

【问题讨论】：

【解决方案1】：

回答 1

将控制器嵌入指令中，除非您想在其他指令中重用相同的控制器。

回答 2

您可以创建一个服务来存储所有图表共享的用户控制属性。

当有很多参数时，创建一个服务来存储数据并将其注入到你的指令和控制器中是个好主意。

总体思路是通过创建服务将数据与控制器和指令分离。

【讨论】：