我有一个工作的角度页面，根据通过服务从服务器检索的数据，使用d3显示一堆图表。
但我很好奇是否有更好的方法将数据从服务传递到用于创建图表的指令。现在我通过指令元素上的属性来做这件事。如果数据集很大（例如，在折线图上显示6行，每行包含100个或更多数据点，每个数据点都有x和y值），最终会成为相当大的HTML标记：）
我考虑过注入检索并将数据保存到指令中的服务。但是这将指令与特定服务联系起来，这使得该指令在其他角度应用程序中不那么有用。
我还考虑过将数据保存在父/页范围内，将该变量的名称传递给指令，然后通过访问父范围从指令中访问数据本身。但同样，这将我与特定的项目结构联系起来（例如，数据总是作为父作用域中的变量存在）。
什么是最佳做法？或者，如果没有普遍接受的最佳实践，人们会使用其他什么方法？
更多信息
通过标记传递的数据采用对象和数组的形式。以下是其中一个图表的chrome调试器的元素选项卡中显示的内容示例，为清晰起见进行了格式化。
<bar-chart
bar-data="{
'type':'LabelValueChartData',
'friendly':{
'vehicles':'Vehicles',
'timeOfDay':'Time of Day'
},
'color':{
'type':'ColorByFieldValue',
'defaultColor':'#000000',
'colors':[
{'name':'12:00 AM','color':'#0000CC'},
{'name':'12:15 AM','color':'#0000CC'},
{'name':'12:30 AM','color':'#0000CC'},
{'name':'12:45 AM','color':'#0000CC'},
{'name':'1:00 AM','color':'#0000CC'},
{'name':'1:15 AM','color':'#0000CC'},
{'name':'1:30 AM','color':'#0000CC'},
...
]},
'colorType':'ColorByFieldValue',
'data':[
{'seriesName':'vehicles','label':'12:00 AM','value':172},
{'seriesName':'vehicles','label':'12:15 AM','value':150},
{'seriesName':'vehicles','label':'12:30 AM','value':158},
{'seriesName':'vehicles','label':'12:45 AM','value':140},
{'seriesName':'vehicles','label':'1:00 AM','value':98},
{'seriesName':'vehicles','label':'1:15 AM','value':104},
{'seriesName':'vehicles','label':'1:30 AM','value':94},
{'seriesName':'vehicles','label':'1:45 AM','value':84},
{'seriesName':'vehicles','label':'2:00 AM','value':64},
{'seriesName':'vehicles','label':'2:15 AM','value':75},
...
],
'valueProps':['vehicles'],
'labelProp':'timeOfDay',
'minValue':0,
'maxValue':445
}"
layout="{
'type':'TwoAxisChartLayout',
'$width':null,
'$height':null,
'$margin':{
'top':10,
'left':80,
'bottom':100,
'right':10
},
'$xAxis':{
'type':'XAxis',
'$title':null,
'$ticks':null,
'$tickSpacing':12,
'$offset':null,
'$anchor':null,
'$fraction':0,
'$independent':true,
'labels':{
'type':'Labels',
'$dx':'-0.7em',
'$dy':'0.7em',
'$anchor':'end',
'$rotate':-45,
'formatter':{
'type':'NumberFormatter',
'$sigDigits':2,
'$negParens':true,
'$commas':true
}
}
},
'$yAxis':{
'type':'YAxis',
'$title':'Vehicles',
'$ticks':5,
'$tickSpacing':null,
'$offset':'-5em',
'$anchor':'middle',
'$fraction':0.5,
'$independent':false,
'labels':{
'type':'Labels',
'$dx':null,
'$dy':'.4em',
'$anchor':'end',
'$rotate':null,
'formatter':{
'type':'NumberFormatter',
'$sigDigits':2,
'$negParens':true,
'$commas':true
}
}
}
}"
class="ng-isolate-scope">
</bar-chart>
这是在角度根据各种范围变量值修改原始标记之后。原始标记是这样的：
<bar-chart bar-data="{{vehiclesByTimeOfDay}}"
layout="{{vehiclesByTimeOfDayLayout}}"></bar-chart>
也许，因为变量替换发生在客户端的浏览器中，所以并不重要。在这种情况下，我将不再担心它:)。似乎应该有更好的方法将数据传递给指令＆＃34;通过引用＆＃34;而不是＆＃34;通过值＆＃34;。