Superbutton!

This is an awesome super button.

by digitalzebra

HTML

<div ng-app="main">
    <div ng-controller="test">
        <super-button action="doWork()">Click me to begin our deferred!</super-button>
    </div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css');

JavaScript

var returnData = {
        json: JSON.stringify({
            text: 'some text',
            array: [1, 2, 'three'],
            object: {
                par1: 'another text',
                par2: [3, 2, 'one'],
                par3: {}
            }
        }),
        delay: 5
}

angular.module("main", [])
.controller("test", function($scope, $timeout) {
        
    $scope.doWork = function() {
        var gettingData = $timeout(function(){
            return JSON.parse(returnData.json);
        }, 3000);
        
        gettingData.then(function(data){
           console.log(data); 
        });
        
        return gettingData;
    };
})
.directive("superButton", function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<button class="btn btn-primary" ng-click="triggerAction()" ng-disabled="isProcessing"><i class="icon-spin icon-spinner icon-white" ng-show="isProcessing"></i> <span ng-transclude></span></button>',
        scope: {
            action: "&"
        },
        controller: function($scope){
            $scope.isProcessing = false;
            
            $scope.triggerAction = function() {
                $scope.isProcessing = true;
                $scope.action().then(function(){
                    $scope.isProcessing = false;
                });
            };
        }
    }
});;