User Interaction Events
You have already been exposed to user interaction events. These include mouse and keyboard events, as well as other events such as the focus and blur events. There are typically two places where you will implement interactions for user events. One is using the ng event directives, such as ng-click, and simple interactions in the view and controller code. The second place to add user event interactions is in the link function of custom directives.
You have already been exposed to both of these methods in previous chapters; what I wanted to point out here is that you do have a choice of which one you want to use. The advantage of using the built-in ng event directives such as ngClick is that you do not have to add the complexity of creating a custom directive for simple requirements.
There are a couple of downsides to using the ng event directives, though. One is that you should not be doing DOM manipulation in the controller, which is where you can define handlers for the ng directives. Another downside is that you will have to implement the ngClick code in the template every time you want the functionality. For example, consider the following template code to add mouse event handlers to an element:
<span
ng-mouseenter="mouseEntered(event)"
ng-mouseleave="mouseLeft(event)"
ng-click="clicked(event)">
<span>
The code isn’t too bad, but what if there are several different locations where you want the same functionality? If they fall in an ng-repeat block, it’s not too bad, but otherwise it’s a pain. A good rule to follow is that if you want to use the functionality in more than one place and definitely if you will reuse it in multiple applications, you should define a custom directive that implements the handlers.