Why use element [0] instead of element when creating AngularJS directive with d3?

Question

It seems you should use element[0] when creating the directive with D3, for example, as shown below:

 app.directive('firstTry', function () { function link(scope, element, attrs) { var sampleSVG = d3.select(element[0]) ... 

So why is element[0] but not element ? The name element suggests that this is a single object, not an array, but apparently this is not the case. Another question: what else does this element ?

By the way, any official links on this issue would be very helpful.

Many thanks.

Answer 1

Directives that want to change the DOM usually use the link option. link accepts a function with the following signature function link(scope, element, attrs) { ... } where:

• scope - An Angular scope object.
• element is an element wrapped by jqLite that matches this directive.
• attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.

You can find it in the documentation here . Thus, for the htmlElement key element, get the first member of the collection