Angularjs结构可重用数据可视化？

Question

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

在第一个例子中，我希望能够像这样进行标记，从而呈现具有影响内部状态的表单元素的图表，从而实现数据可视化：

<scatterChart></scatterChart>

=＆GT;

<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>

Answer 1

答案1

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

答案2

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

答案3

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

一般的想法是通过创建服务来将数据与控制器和指令分离。