Super Button Final Version!

by digitalzebra

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css">
<div ng-app="main">
    <div ng-controller="test">
        <super-button action="doWork()">Click me to begin our deferred!</super-button>
    </div>
</div>

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: '<a ng-click="triggerAction()" ng-disabled="isProcessing" class="btn btn-primary" ng-transclude href="#"><i ng-show="isProcessing" class="icon-refresh icon-spin"></i>&nbsp;</a>',
        scope: {
            action: "&"
        },
        controller: function($scope){
            $scope.isProcessing = false;
            
            $scope.triggerAction = function() {
                $scope.isProcessing = true;
                $scope.action().then(function(){
                    $scope.isProcessing = false;
                });
            };
        }
    }
});;