JSFiddle - React, Tailwind, and code Playground

by JasonMore

HTML

<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, $q, $http) {
        
    $scope.doWork = function() {
        var gettingData = $http.post('/echo/json', returnData);
        
        gettingData.then(function(data){
           console.log(data); 
        });
        
        return gettingData;
    };
})
.directive("superButton", function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<button ng-transclude ng-click="action()"></button><span ng-show="isProcessing">Something awesome is in progress</span>',
        scope: {
            action: "&"
        },
        controller: function($scope){
            $scope.isProcessing = false;
            
            var oldAction = $scope.action;
            
            $scope.action = function() {
                $scope.isProcessing = true;
                oldAction().then(function(){
                    $scope.isProcessing = false;
                });
            };
        }
    }
});;