Angular+JQ+Bootstrap

by dandoyon

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="FormCtrl">
    <input id="searchBar" type="text" name="explore" size="30" ng-model="search"   
      searchbar="{focus:'search=focus', blur:'search=blur'}">
</div>

CSS

#searchBar{
    color: #858585;
}    

#searchBar:focus{
    color: #2c2c2c;
}

JavaScript

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

app.directive('searchbar', function() {
    return function(scope, elm, attrs) {
        var events = scope.$eval(attrs.searchbar);
        angular.forEach(events, function(value, key) {
            elm.bind(key, function() {
                if (scope.search == scope.blur) {
                    scope.$apply(value);
                }
                else if (scope.search == scope.focus) {
                    scope.$apply(value);
                }
            });
        });
    };
});

function FormCtrl($scope) {
    $scope.search = "Search";
    $scope.blur = "Search";
    $scope.focus = "";
}