faridprogrammer/Index.html

## Index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="apps">
  <div ng-controller="myCtrl">

    <button click-and-disable="loadData($notify)">Click and disable</button>
      <br/>
      {{ text }}
  </div>
  <script>
var module = angular.module("apps", []);

angular.module("apps").controller("myCtrl", function($scope, $timeout){

  $scope.loadData = function($notify) {
    $scope.text = '';
    $timeout(function() {
      $scope.text = 'data loaded!';
      $notify && $notify();
    }, 1000);
  };
});

angular.module("apps").directive('clickAndDisable', function($parse, $q, $timeout) {
  var link = function(scope, elem, attr) {
    var isNotifyMode = attr.clickAndDisable.indexOf('$notify') > -1;
    var fn = $parse(attr.clickAndDisable, null, true);
    var previousText = elem.text();

    var disableBtn = function() {
      elem.text('wait...');
      elem.attr('disabled', 'disabled');
    };
    var enableBtn = function() {
      elem.text(previousText);
      elem.attr('disabled', '');
    };

    elem.on('click', function(event) {
      scope.$apply(function() {
        if (isNotifyMode) {
          disableBtn();
        }
        fn(scope, {
          $event: event,
          $notify: function() {
            enableBtn();
          }
        });
      });
    });

  };
  return {
    link: link,
    restict: 'A',
  };
});
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body ng-app="apps">
	<div ng-controller="myCtrl">

	<button click-and-disable="loadData($notify)">Click and disable</button>
	<br/>
	{{ text }}
	</div>
	<script>
	var module = angular.module("apps", []);

	angular.module("apps").controller("myCtrl", function($scope, $timeout){

	$scope.loadData = function($notify) {
	$scope.text = '';
	$timeout(function() {
	$scope.text = 'data loaded!';
	$notify && $notify();
	}, 1000);
	};
	});

	angular.module("apps").directive('clickAndDisable', function($parse, $q, $timeout) {
	var link = function(scope, elem, attr) {
	var isNotifyMode = attr.clickAndDisable.indexOf('$notify') > -1;
	var fn = $parse(attr.clickAndDisable, null, true);
	var previousText = elem.text();

	var disableBtn = function() {
	elem.text('wait...');
	elem.attr('disabled', 'disabled');
	};
	var enableBtn = function() {
	elem.text(previousText);
	elem.attr('disabled', '');
	};

	elem.on('click', function(event) {
	scope.$apply(function() {
	if (isNotifyMode) {
	disableBtn();
	}
	fn(scope, {
	$event: event,
	$notify: function() {
	enableBtn();
	}
	});
	});
	});

	};
	return {
	link: link,
	restict: 'A',
	};
	});
	</script>

	</body>
	</html>