JSFiddle - React, Tailwind, and code Playground

by digitalzebra

HTML

<div ng-app="main">
    <div ng-controller="test">
        <x-super-button notification="doWork()" promise="myPromise">Click me to begin our deferred!</x-super-button>
        <br /><br />
        <button ng-click="resolvePromise()">Resolve our promise.</button>
    </div>
    
    
</div>

JavaScript

angular.module("main", [])
.controller("test", function($scope, $q) {
        
    $scope.doWork = function() {
        var deferred = $q.defer();
        $scope.myPromise = deferred;
    };   
    
    $scope.resolvePromise = function() {
        $scope.myPromise.resolve('something here');
    };
})
.directive("superButton", function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<button ng-transclude ng-click="notify()"></button><span ng-show="isProcessing">Something awesome is in progress</span>',
        scope: {
            notify: "&notification",
            prom: "=promise"
        },
        link: function(scope, element, attrs) {
            scope.$watch("prom", function(newValue, oldValue) {
                if (!newValue) {
                    return;
                }
                scope.isProcessing = true;
                
                newValue.promise.then(function() {
                    scope.isProcessing = false;
                });
            });
        }
    }
});;