ngDisabled demo

https://github.com/kirstein/angular-autodisable

by manoj

HTML

<script src="http://code.angularjs.org/1.2.3/angular.js"></script>
<script src="https://rawgithub.com/kirstein/angular-autodisable/master/angular-autodisable.js"></script>
<blockquote>
    <p><a href="https://github.com/kirstein/angular-autodisable">ngDisable</a> demo page</p>
    <p>ngDisable is a directive that will automatically disable buttons if their click handlers return promises. It even works with multiple click handlers. Simple stuff really.</p>
</blockquote>
<div ng-controller="MyCtrl">
    <div class="row">
        <div class="col-lg-2">
            <div class="panel">
                <fieldset>
                    <legend>$http promise demo</legend>
                    <p>Click handler that returns a HTTP promise. The button will be set as disabled for as long as the promise fulfills.</p>
                    <div class="container">
                        <form role="form">
                            <div class="row">
                                <label for="delay" class="col-xs-4">Http request delay (sec):</label>
                                <div class="col-xs-2">
                                    <input type="number" class="form-control" ng-model="httpDelay" id="delay" />
                                </div>
                            </div>
                            <div class="row">
                                <button ng-click="httpPromiseHandler(httpDelay)" class="btn btn-primary" ng-autodisable>http promise handler (ng-autodisable)</button>
                            </div>
                        </form>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2">
            <div class="panel">
                <fieldset>
                    <legend>$q promise demo</legend>
                    <p>Click handler that returns a $q promise. The button will be set as disabled for as long as the promise fulfills.</p>
                   ...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 form .row {
    margin-bottom:10px;
}

JavaScript

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

function MyCtrl($scope, $q, $http) {
    $scope.defer = null; // Placeholder for the $q promise 
    $scope.httpDelay = 2; // Placeholder for the $http delay

    $scope.httpPromiseHandler = function (delay) {
        alert('$http promise started');
        return $http.get('/echo/html/?delay=' + delay).success(function () {
            alert('$http promise done');
        });
    };

    // Handler that works with $q promise
    $scope.qPromiseHandler = function () {
        alert('$q promise started');

        var defer = $scope.defer = $q.defer();
        return defer.promise.then(function () {
            alert('$q promise successful');
        }, function () {
            alert('$q promise failed');
        });
    };

    $scope.qFulfill = function (result) {
        if (result) {
            $scope.defer.resolve();
        } else {
            $scope.defer.reject();
        }
        $scope.defer = null;
    };
}

function MultiplePromiseCtrl($scope, $q) {
    $scope.defer = {};
    $scope.firstPromiseHandler = function () {
        alert('first handler triggered');
        var defer = $scope.defer.first = $q.defer();
        return defer.promise.then(function () {
            alert('first promise success');
        }, function () {
            alert('first promise fail');
        });
    };

    $scope.secondPromiseHandler = function () {
        alert('second handler triggered');
        var defer = $scope.defer.second = $q.defer();
        return defer.promise.then(function () {
            alert('second promise success');
        }, function () {
            alert('second promise fail');
        });
    };

    $scope.fulfill = function (type, result) {
        var defer = $scope.defer[type];
        if (result) {
            defer.resolve();
        } else {
            defer.reject();
        }
        $scope.defer[type] = null;
    }
}