The workout name's remote validation works well now, but the user does not realize that the workout name is being validated remotely, and may be surprised when all of a sudden a validation message appears.
We can improve the overall user experience if we can show a busy/progress indicator every time remote validation happens. Let's build a busy-indicator directive. We plan to build three versions of the same validator with a slightly different approach and work our way through some new concepts in directive building.
Here is what the first version busy-indicator implementation looks like:
angular.module('app').directive('busyIndicator', ['$compile', function ($compile) {
return {
scope: true,
link: function (scope, element, attr) {
var linkfn = $compile('<div><label ng-show="busy"
class="text-info glyphicon glyphicon-refresh spin"></label></div>');
element.append(linkfn(scope));
...