What is the ‘this’ object passed to an ng-click function call?

Consider this plain old JavaScript (non-Angular) form of calling a function when an element is clicked:

<span id="foo1" onclick="clicked(this)">...</span>

So the this argument to clicked() is the span object (foo1) that is clicked.

When this code is converted to AngularJS, we attempt to pass the same this object:

<span id="foo2" ng-click="clicked(this)">...</span>

Now, however, the argument passed to clicked() is an object, but it does not appear to have any relation to the span object.

So my questions are:

  1. What is the value of this when passed to a function by ng-click?

  2. What is the easiest way to retrieve the clicked object within the function, or pass it into the function?


solution

- 1. When passing this as a parameter to a function in the ng-click directive, this will reference the current $scope object.

- 1. You could pass the $event object and then access the target/ currentTarget properties to get a reference to the element.

For instance (example):

<button ng-click="click($event)">Click Me!</button>
$scope.click = function (e) {
  e.currentTarget.style.display = 'none';
}