Implementing Event Handlers in a Custom Directive

Another very common use of custom directives is to implement event handlers to interact with mouse and keyboard events that are occurring in the custom elements. This enables you to provide enhanced user interactions to the custom elements.

In this example we will add mouse event handlers that enable you to use drag operations on images to resize and adjust the opacity. When the mouse is dragged left the image shrinks; right, the image enlarges; up, the image fades; and down, the opacity increases. For this example, I have included the full version of jQuery by loading it in the AngularJS template. I chose to do so to use some capabilities like getting the image width() that is not available in ...

Get Learning AngularJS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.