AngularJS specifying multiple values for attribute of custom directive

Question

I am creating a directive <chart> in AngularJS. I want to add a attributes x-series and y-series to it.

A requirement is that these attributes should take multiple parameters like x-series="xData1 xdata2 xdata3" and y-series="ydata1 ydata2 ydata3".

How do I resolve the different values of x-series and y-series attributes? I can do it by splitting the values of scope.xSeries and scope.ySeries by space but I want to know that if Angular provides any better way to specify attribute with multiple values.

Answer 1

You can actually pass an array, for instance.

<chart y-series="myArray"></chart>

//in controller

$scope.myArray = ['ydata1','ydata2'];

//in directive

scope:{
  'y-series': '=' // this will set up bi-directional data binding to the array
}

Answer 2

Maybe use keys for more information

x-series={key1:xData1, key2:xData2, key3:xData3}

This way you can distinguish using x-series.key1 and x-series.key2