JSFiddle - React, Tailwind, and code Playground

by nicholasstephan

HTML

<div ng-app="MyApp" ng-controller="MyCtrl">
    <button my-directive="doSomething()">Button</button>
</div>

JavaScript

angular.module('MyApp', [])

.factory('myService', function($q) {
    
    return {
        doSomethingHard: function() {
            alert('3. doing something hard');
            
            var deferred = $q.defer();

            setTimeout(function() {
                alert('4. resolving deferred');
                deferred.resolve('Hello World!');
            }, 1000);
       
            return deferred.promise;
        }
    };
})

.controller('MyCtrl', function($scope, myService) {
    
    $scope.doSomething = function() {
        alert('2. doing something');
        var promise = myService.doSomethingHard();
        
        promise.then(function(result) {
            alert('5. ' + result);
        });
    };
    
})

.directive('myDirective', function($parse) {
    return {
        link: function(scope, el, attr) {
            
            var myParsedFunction = $parse(attr.myDirective);
            
            el.bind('click', function() {
                alert('1. clicked button');
                myParsedFunction(scope);
            });
        }
    };
});