AngularJS ngModel Placeholder

by robcampo

HTML

<div ng-app="custom">
  <h2>Placeholder</h2>
  <div ng-controller="FormCtrl">
    
    <form ng-submit="submitForm()">
        <input type="text" ng-model="username"  size="30"
               placeholder="Username" />
        
        <input class="btn-primary" type="submit" value="Submit">
    </form>
  </div>
</div>

JavaScript

var customModule = angular.module("custom", []);

customModule.directive("placeholder", function() {

    return {
        restrict: 'A', // only activate on element attribute
        require: '?ngModel', // get a hold of NgModelController
        link: function(scope, element, attrs, ngModel) {
            if(!ngModel) return; // do nothing if no ng-model

            console.log("placeholder directive link  scope: %o", scope);
            console.log("placeholder directive link  element: %o", element);
            console.log("placeholder directive link  attrs: %o", attrs);
            console.log("placeholder directive link  ngModel: %o", ngModel);
            
            ngModel.$parsers.push(function(value){
                console.log("ngModel parsers push value: %o", value);
                console.log("element placeholder value: %o", element[0].placeholder);
                
                if(element[0].placeholder == value) {
                    return "";
                }
                
                return value;
            });
            
            console.log("placeholder directive link  ngModel.$viewValue: %o", ngModel.$viewValue);
            console.log("placeholder directive link  ngModel.$modelValue: %o", ngModel.$modelValue);
            console.log("placeholder directive link  ngModel.$parsers: %o", ngModel.$parsers);
            console.log("placeholder directive link  ngModel.$formatters: %o", ngModel.$formatters);
        }
    }
});

function FormCtrl($scope) {
    $scope.submitForm = function() {
        console.log("Form submitted");  
        console.log("Form submitted username: %o", $scope.username);
    };
}