Angular find element attribute doesn't work

Question

I am following this simple article: Arrow Keys to Navigate. There is a problem with this line towards the bottom:

var nextInput = angular.element(angular.element.find('[arrow-keys-index="'+nextIndex+'"]'));

Basically, what it needs to do is find an element from my HTML where the attribute and value match the string so it can then call to focus that element. HTML example of what it needs to find would look like this:

<input type="text" arrow-keys-index="0:2" />

I am getting an error on that line:

TypeError: angular.element.find is not a function at HTMLInputElement. (arrow-keys-index.js:47:65) at defaultHandlerWrapper (angular.js:3795:11) at HTMLInputElement.eventHandler (angular.js:3783:9) at ZoneDelegate.invokeTask (zone-evergreen.js:406:1) at Object.onInvokeTask (core.js:28564:1) at ZoneDelegate.invokeTask (zone-evergreen.js:405:1) at Zone.runTask (zone-evergreen.js:178:1) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:487:1) at invokeTask (zone-evergreen.js:1600:1) at HTMLInputElement.globalZoneAwareCallback (zone-evergreen.js:1626:1)

Any thoughts?

Answer 1

Assuming that your nextIndex == "0:2"

inject the $element into the controller, then:

var nextInput = $element.find('[arrow-keys-index="'+nextIndex+'"]');