CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scopejavascript-framework
AndreaNobili
AndreaNobili

Reputation: 42957

What is the best way to handle events in AngularJS in this case?

I am absolutly new in AngularJS and I have the following doubt about how to handle event in Angular.

So I know if in a view I have something like this:

<input type="text" ng-model="handle" />

it means that exist a 2 way binding between this input element in the dom and an handle variable into the Angular $scope, for example:

$scope.handle = '';

So any change that happen into this input object implies a change of the handle property in the $scope and vice-versa.

So, into the Angular applcation, I can explicitly declare a whatcher

// I explicitly declare a whatcher on the handle property: when the value of this propertu change the function() is performed:
$scope.$watch('handle', function(newValue, oldValue) {

    console.info('Changed!');
    console.log('Old:' + oldValue);
    console.log('New:' + newValue);

});

So it should have the same meaning of manually adding a classic vanilla JavaScript EventListener (by the addEventListener() on the object that I want to observe in a classic old vanilla JavaScript application (that don't use Angular).

When something change on the input value the function associated to the whatcher is performed.

Ok it is pretty clear for me.

Now I say that I can also do something like this.

Into the HTML code I can have something like:

<input type="button" value="Click Me" ng-click="alertClick()" />

And in the Angular controller I will have something like:

$scope.alertClick = function() {
    alert("Clicked !!!");
}

So it seems like the ng-Click directive perform a function that is a $scope field when there is the click event on the button.

But can I do the same operation as done in the first example? Can I do it declaring a whatcher on the button if it is associated to a model object by the ng-model="handle" directive?

When is better use the first method and when is better the second method to handle events in AngularJS?

Upvotes: 3

Views: 1763

Answers (4)

B0ltz
B0ltz

Reputation: 425

ngModel is used to bind an imput form the UI to your controller

ngClick is just a regular javascript expression that have access to your controller scope that will be executed at the click event.

Here you have to use ng-click.

With angular a good practice is to avoid using function like addEventListener() or Jquery other function... Because AngularJS wrap all this functionality and will run digest loop or other voodoo magic if necessary.

Upvotes: 2

Thomas Kerbrat
Thomas Kerbrat

Reputation: 126

The tow "methods" you pointed out are not the same thing. At all.

The first, $watch, is intended to listen to the $scope changes. You can specify which property of the scope you want to watch, and when a change occur it will call you callback function. For more details, see the Digest cycle documentation.

The second, ng-click attribute directive, listen to the DOM events and evaluate the expression you pass in when the event occur.

In your case, for the button, you have two options. You can use the ng-click attribute directive to trigger a function in your scope OR use the ng-submit attribute directive in the form html tag of your inputs. That way you can trigger the form validation with the button or when the Enter is pressed.

See the documentation for ngSubmit.

Upvotes: 1

user5250554
user5250554

Reputation:

Use the click event. $scope.$watch should be used watching when something changes instead of things that are better for event handlers.

Upvotes: 1

Arashsoft
Arashsoft

Reputation: 2757

ngModel applies to specific elements such as input,select, and textarea. As the result, you cannot use ngModel on a button. That is why you use ngClick to get the click event.

Upvotes: 0

Related Questions