Optimizing AngularJS directive that updates ng-model and ng-style on focus

I'm new to AngularJS and I'm making made a couple of custom Angular directives to do what I used to do with Jquery, however there is one case where I'm not sure if I'm doing it the "the angular way". It works but I think there might be a better way.

I want to do is this for a search box:

When focus is on the search box the app must change the color of the text in the box from grey to black. The app must also then check the current text in the box, if it is the default text then the app must clear the text.

When the box loses focus (blur) the app must change the box's text back to grey. It must then put back the default text only if the text box is empty upon losing focus.

Here is a jsfiddle that has a directive set up to do all of this perfectly. http://jsfiddle.net/Rick_KLN/5N73M/2/

However I suspect there is an even better way to do it.

It seems like all three those variables in the controller should be unnecessary. I also seems like having 4 if, else statements is too much and that binding to all the events is overkill seeing as only focus and blur are used and they are specified in the if statements.

Any ideas on optimizing this directive?

You can create a custom directive that requires the ng-model directive and then within your directive's link function supply a fourth parameter that is a reference to the model. This will allow you to watch the model for changes and react accordingly. Here is the fiddle: http://jsfiddle.net/brettlaforge/6t39j/3/

var app = angular.module('app', []);

app.directive('searchbar', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, model) {

            var options = scope.$eval(attrs.searchbar);
            scope.$watch(attrs.ngModel, function(value) {
                // If the input element is currently focused.
                if (!elm.is(":focus")) {
                    // If the input is empty.
                    if (value === undefined || value === "") {
                        // Set the input to the default. This will not update the controller's model.
                        elm.val(options.default);
                    }
                }
            });

            elm.on('focus', function(event) {
                // If the input is equal to the default, replace it with an empty string.
                if (elm.val() === options.default) {
                    elm.val('');
                }
            });

            elm.on('focusout', function(event) {
                // If the input is empty, replace it with the default.
                if (elm.val() === '') {
                    elm.val(options.default);
                }
            });
        }
    };
});

function FormCtrl($scope) {
    $scope.search = "";
}​

The "default text" behavior you are looking for is automatically handled by the HTML5 placeholder attribute. It is supported in just about any modern browser, and can be styled using CSS, as follows:

Markup:

<input id="searchBar" type="text" placeholder="Search" />

CSS:

#searchBar                                  { color: #858585; }    
#searchBar:focus                            { color: #2c2c2c; }    
#searchBar:focus::-webkit-input-placeholder { color: transparent; }
#searchBar:focus::-moz-placeholder          { color: transparent; }
#searchBar:focus:-moz-placeholder           { color: transparent; }
#searchBar:focus:-ms-input-placeholder      { color: transparent; }

It's that simple.

Notes:

  • The pseudo-elements & pseudo-classes (-webkit-input-placeholder, etc) are what hide the placeholder text on focus. Normally it stays until you start typing.
  • I forked your original jsFiddle. It's not really an AngularJS app anymore: http://jsfiddle.net/Smudge/RR9me/
  • For older browsers: You can still use the same code as above, but you could use Modernizr (or something similar) to fall-back to a javascript-only approach if the attribute is not supported.