no array operation allowed on element parameter of link function

Question

link: function(scope, element, attrs, model) 

this is a link function for angular directive.

when i look into element object it has following structure

[<input google-place type=​"text" id=​"existingAreas" class=​"form-control      ng-isolate-scope" place=​"newProperty.address.selectedArea" country=​"in">​]

console.log(element) gives this

R[1]
0: input#existingAreas.form-control.ng-isolate-scope
length: 1
__proto__: Object[0]

It looks like it is an array. But when I try to do array operation like pop on it, it gives error. While reference to element[0] works.

I am unable to understand why it happens so

Answer 1

Looking at the the documentation we can see that:

element is the jqLite-wrapped element that this directive matches.

jQuery (and as such jqLite) return what are known as array-like objects which means that they have numerically indexed properties and a length property. These look like arrays, and can be used with some array functions via the call function, but they are not true arrays and thus do not have normal array methods.

To get the last element, you can simply do

var last = element[element.length-1];