O'Reilly logo

AngularJS Directives by Alex Vanston

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating our own controller communication

Most likely, you'll find that ngModel is the most common controller you'll require within your code. Any time you want to create a custom input, or even just bind an input plugin that requires specific formatting, ngModel provides the methods you'll need to coordinate communication between the plugin and your data model.

With that in mind, let's walk through the process of creating an input for time values that utilizes the handy timepicker jQuery plugin provided by Jon Thornton. Our goal is to be able to turn a regular text field input into a timepicker that displays its value in the format HH:mm but stores it in our data property in milliseconds.

For this example, our HTML is once again pretty simple, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required