AngularJS - passing this.value to a function

Question

I have this code in my own javascript and it works fine. it registers the current value of the text field

<script> var boom = function(val) { console.log(val); }; </script> <input type="text" onclick="boom(this.value)"/> 

Then I want to do the same on AngularJS without using a model. Here is the code:

 $scope.boom = function(val) { console.log(val); }; <input type="text" ng-click="boom(this.value)"/> 

But he always registers undefined !
Why?

Answer 1

As I know, this in the context of ng-* is scope .
You can access through boom($event.target.value) .

Answer 2

Angular's way is to use ngModel :

 <input type="text" ng-model="input" ng-click="boom()"/> 

and in the controller:

 var boom = function() { console.log($scope.input); }; 

this.input will also work as this points to the current scope object.

If you still want to avoid the model, you can use the event object:

 <input type="text" ng-click="boom($event)"/> 

and

 var boom = function($event) { console.log($event.target.value); }; 

Answer 3

'value' is not defined in the field.

I will make out a little Miraage answer ..

this will refer to the scope. If you want to access the DOM element, use $ event. In the callback function, you can get the value of the DOM element with boom($event.target.value)