Angularjs pass element to function

Question

As per core we used this for get element but in AngularJS we get $scope context.

So, I tried this question but without success.

Here is my attempt:

Controller

$scope.clickMe = function(ele) {
 console.log(ele);
 console.log(ele.id);
};

HTML

<div class="input-group">
 <input type="number" id="test-id" ng-blur="clickMe($event.target);">
</div>

How do I get the element in the function?

• Ved: when you pass this like ng-blur="clickMe(this);", are you not getting element?
• Jaydeep Mor: @Ved Nop.... it return $scope context.
• Ved: Okay. than you can use $event.currentTarget

Answer 1

use : $event.currentTarget;

 <div class="input-group">
 <input type="number" id="test-id" ng-blur="clickMe($event);">
 </div>
 $scope.clickMe = function(ele) {
 console.log(ele);
 console.log(ele.currentTarget);
 };

Fiddle" http://jsfiddle.net/h8to34ux/221/

• John Rix: +1 for 'event.currentTarget'. I did not know about this, but it is great for getting the element that actually contains the click handler, as opposed to 'event.target' which may instead point to a child element that was actually clicked on (for example, a <span> element inside of a button that owns the ng-click handler).

Answer 2

your ng-blur event should send $event only like ng-blur="clickMe($event);"

then in your controller

$scope.clickMe = function(ele) { 
 console.log(angular.element(ele));
 console.log(angular.element(ele).attr('id'));
};