Improve user experience with these 3 AngularJS directives
AngularJS directives can give your visitor a better user experience (UX), e.g. by showing user avatars to make a page look more personal. An email field in your sign-in form could show an avatar next to it, indicating to the user that he typed in the correct email-address. If you have optional input fields in your form, you can hide them by default and make them appear on click, immediately focusing the first one. These approaches are very easy to achieve and reusable with directives.
You can build AngularJS directives in various ways. There are many guides out there already on how you can create custom directives (so I will not describe these basics here):
I have chosen 3 AngularJS directives that we found useful for improving user experience and we already use them in production.
1. Gravatar Image
To show a gravatar image in your app you need to use the user's email, make it lowercase and md5 hash that string. So it's very wise to use a directive for that, so you can reuse it every time.
[gist id=34eb31907c19d1c66b0d]
2. Focus-Me
It is really just a small directive, but it's awesome. In the example below the user clicks on a link, where he makes an input visible, which gets automatically focused. So he doesn't need to click in the input field when it shows up.
[gist id=43be83926cab593ca86c]
3. Contenteditable Element Model Binding
The main reason we want to use a contenteditable instead of a textarea element is to have no limitations in layout and UI. We use this directive in our editor, to achieve two-way-binding between the HTML of the contenteditable element and ng-model. There is currently no support for ng-model in contenteditable elements ... yet!
[gist id=696fd2fa529f4951e569]
Conclusion: AngularJS directives to improve user experience
I hope you find one of the described AngularJS directives useful!
To me, directives are the most exciting feature of AngularJS. The ability to create reusable libraries of components that can be added to applications in pure HTML is something incredibly powerful. Because directives are so useful, and not all that hard to write, many people are already creating directives for popular libraries. For example, the AngularJS team has created a set of directives for Bootstrap (who doesn't use it?) called UI Bootstrap.
Use AngularJS directives to teach HTML new tricks.