Up to this point in the AngularJS directives series you’ve learned about many key aspects of directives but haven’t seen anything about how controllers fit into the picture. Although controllers are typically associated with routes and views, they can also be embedded in AngularJS directives. In fact, there are many scenarios where custom directives can take advantage of controllers to minimize code and simplify maintenance. While using controllers in directives is certainly optional, if you’d prefer to build directives using similar techniques that you use now to build views then you’ll find controllers are essential in many cases. By using controllers, directives start to feel like “child views”.

In a previous post I demonstrated how to build a unique value directive to ensure that an email address isn’t already in use before allowing a user to save a form. With changes in AngularJS 1.3+, several new features are available to clean up the previous version of the directive and make it easier to work with. In this post I’ll update the previous post, walk-through some of the new features in a directive called wcUnique, and show how a few of the new features can be applied. The code shown is part of the Customer Manager Standard sample application that’s available on Github.

In Part 3 of this series I introduced how an isolate scope local property defined in a directive can be used to pass parameters to external functions (something that’s a bit tricky at first glance but easy once you know the process). In this post I’ll continue the series on building custom directives and discuss “transclusion” and how it can be used to add flexibility to directives.