gangadharjannu/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
  <input type="text" placeholder="Username" name="userId" ng-model="userId" ng-pattern="/^[a-zA-Z0-9]*$/" ng-maxlength="30" ng-required="true"
         ng-focus="clearIconToggle('userId')" ng-keyup="clearIconToggle('userId')" id="userId" clear-icon/>


</div>
<script id="jsbin-javascript">
var app=angular.module("myApp",[]);
app.directive('clearIcon', ['$compile', function($compile){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
         var model=attrs.ngModel;
          console.log(model);
         var template='<span ng-show="'+model+'Clear" ng-click=\"clearText(\''+model+'\')\">x</span>';
elem.parent().append($compile(template)(scope));
        }
    };
  }]);
app.controller("MyCtrl",["$scope",function($scope){

  $scope.clearIconToggle=function(toggleParam){
    var element = document.getElementById(toggleParam).value.trim();
		if(element.length)
			$scope[toggleParam + 'Clear'] = true;
		else
			$scope[toggleParam + 'Clear'] = false;
  };
  $scope.clearText=function(clearParam){
    document.getElementById(clearParam).value = '';
		$scope.clearIconToggle(clearParam);
  };

}]);
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"><\/script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
  <input type="text" placeholder="Username" name="userId" ng-model="userId" ng-pattern="/^[a-zA-Z0-9]*$/" ng-maxlength="30" ng-required="true"
         ng-focus="clearIconToggle('userId')" ng-keyup="clearIconToggle('userId')" id="userId" clear-icon/>


</div>
</body>
</html></script>


<script id="jsbin-source-javascript" type="text/javascript">var app=angular.module("myApp",[]);
app.directive('clearIcon', ['$compile', function($compile){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
         var model=attrs.ngModel;
          console.log(model);
         var template='<span ng-show="'+model+'Clear" ng-click=\"clearText(\''+model+'\')\">x</span>';
elem.parent().append($compile(template)(scope));
        }
    };
  }]);
app.controller("MyCtrl",["$scope",function($scope){

  $scope.clearIconToggle=function(toggleParam){
    var element = document.getElementById(toggleParam).value.trim();
		if(element.length)
			$scope[toggleParam + 'Clear'] = true;
		else
			$scope[toggleParam + 'Clear'] = false;
  };
  $scope.clearText=function(clearParam){
    document.getElementById(clearParam).value = '';
		$scope.clearIconToggle(clearParam);
  };

}]);</script></body>
</html>

## jsbin.jasiyeziyati.js
var app=angular.module("myApp",[]);
app.directive('clearIcon', ['$compile', function($compile){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
         var model=attrs.ngModel;
          console.log(model);
         var template='<span ng-show="'+model+'Clear" ng-click=\"clearText(\''+model+'\')\">x</span>';
elem.parent().append($compile(template)(scope));
        }
    };
  }]);
app.controller("MyCtrl",["$scope",function($scope){

  $scope.clearIconToggle=function(toggleParam){
    var element = document.getElementById(toggleParam).value.trim();
		if(element.length)
			$scope[toggleParam + 'Clear'] = true;
		else
			$scope[toggleParam + 'Clear'] = false;
  };
  $scope.clearText=function(clearParam){
    document.getElementById(clearParam).value = '';
		$scope.clearIconToggle(clearParam);
  };

}]);
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body ng-app="myApp">
	<div ng-controller="MyCtrl">
	<input type="text" placeholder="Username" name="userId" ng-model="userId" ng-pattern="/^[a-zA-Z0-9]*$/" ng-maxlength="30" ng-required="true"
	ng-focus="clearIconToggle('userId')" ng-keyup="clearIconToggle('userId')" id="userId" clear-icon/>



	</div>
	<script id="jsbin-javascript">
	var app=angular.module("myApp",[]);
	app.directive('clearIcon', ['$compile', function($compile){
	return {
	restrict: 'A',
	link: function(scope, elem, attrs) {
	var model=attrs.ngModel;
	console.log(model);
	var template='<span ng-show="'+model+'Clear" ng-click=\"clearText(\''+model+'\')\">x</span>';
	elem.parent().append($compile(template)(scope));
	}
	};
	}]);
	app.controller("MyCtrl",["$scope",function($scope){

	$scope.clearIconToggle=function(toggleParam){
	var element = document.getElementById(toggleParam).value.trim();
	if(element.length)
	$scope[toggleParam + 'Clear'] = true;
	else
	$scope[toggleParam + 'Clear'] = false;
	};
	$scope.clearText=function(clearParam){
	document.getElementById(clearParam).value = '';
	$scope.clearIconToggle(clearParam);
	};

	}]);
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"><\/script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body ng-app="myApp">
	<div ng-controller="MyCtrl">
	<input type="text" placeholder="Username" name="userId" ng-model="userId" ng-pattern="/^[a-zA-Z0-9]*$/" ng-maxlength="30" ng-required="true"
	ng-focus="clearIconToggle('userId')" ng-keyup="clearIconToggle('userId')" id="userId" clear-icon/>



	</div>
	</body>
	</html></script>


	<script id="jsbin-source-javascript" type="text/javascript">var app=angular.module("myApp",[]);
	app.directive('clearIcon', ['$compile', function($compile){
	return {
	restrict: 'A',
	link: function(scope, elem, attrs) {
	var model=attrs.ngModel;
	console.log(model);
	var template='<span ng-show="'+model+'Clear" ng-click=\"clearText(\''+model+'\')\">x</span>';
	elem.parent().append($compile(template)(scope));
	}
	};
	}]);
	app.controller("MyCtrl",["$scope",function($scope){

	$scope.clearIconToggle=function(toggleParam){
	var element = document.getElementById(toggleParam).value.trim();
	if(element.length)
	$scope[toggleParam + 'Clear'] = true;
	else
	$scope[toggleParam + 'Clear'] = false;
	};
	$scope.clearText=function(clearParam){
	document.getElementById(clearParam).value = '';
	$scope.clearIconToggle(clearParam);
	};

	}]);</script></body>
	</html>