Angularjs 将数据传递到角度指令

我有一个工作的角度页面，它使用d3显示一系列图表，这些图表基于通过服务从服务器检索到的数据

但我很好奇是否有更好的方法将数据从服务传递到用于创建图表的指令。现在我通过directive元素上的属性来实现这一点。如果数据集很大（例如，在折线图上显示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>

这是在angular基于各种作用域变量值修改原始标记之后进行的。原始标记如下所示：

<bar-chart bar-data="{{vehiclesByTimeOfDay}}"
           layout="{{vehiclesByTimeOfDayLayout}}"></bar-chart>

---

也许，因为变量替换发生在客户端的浏览器中，所以这并不重要。这样我就不用担心了：）。似乎应该有更好的方法“通过引用”而不是“通过值”将数据传递给指令。

数据的格式是什么？您不需要传入数组吗？为什么指令元素上的属性会随着数据的大小而变化？事件系统可以允许您在不影响HTML标记的情况下传递数据。属性可能很好，但为什么听起来您有这么多属性？当然可以将它们包装在一两个对象中？如果使用

{{}

传递对象，则传递的是包含该对象JSON表示形式的字符串。不要使用

{{}

。传递对象本身，使用隔离作用域绑定，使用

=

或

这是我解决的解决方案，JB Nizet。我放弃了独立绑定（即前缀为“@”）并传递了对象，而不是它计算结果的字符串。这样做会混淆$watchGroup指令，它以前主要关注json字符串中的更改，因此我还使用$rootScope事件来指示数据何时更改（数据集太复杂，无法在数据本身上创建简单的$watch）。数据的格式是什么？您不需要传入数组吗？为什么指令元素上的属性会随着数据的大小而变化？事件系统可以允许您在不影响HTML标记的情况下传递数据。属性可能很好，但为什么听起来您有这么多属性？当然可以将它们包装在一两个对象中？如果使用
{{}
传递对象，则传递的是包含该对象JSON表示形式的字符串。不要使用
{{}
。传递对象本身，使用隔离作用域绑定，使用
=
或
这是我解决的解决方案，JB Nizet。我放弃了独立绑定（即前缀为“@”）并传递了对象，而不是它计算结果的字符串。这样做会混淆$watchGroup指令，它以前主要关注json字符串中的更改，因此我还使用$rootScope事件来指示数据何时更改（数据集太复杂，无法在数据本身上创建简单的$watch）。