JSFiddle - React, Tailwind, and code Playground

by Yang Tyler

HTML

<script src="https://code.angularjs.org/1.2.26/angular.js"></script>
<div ng-app="myApp">
    <div ng-controller="MainController">{{msg}}</br>
        <my-follow my-click="testFunc()">{{_state}}John Smith</my-follow>
        
    </div>
</div>

JavaScript

var myApp = angular.module("myApp", []);
myApp.service("myService", function($q){
    var count = true;
    this.getSth = function(){
        var defer = $q.defer();
        if(count){
            count = !count;
            setTimeout(function(){
                console.log("Trigger success");
                defer.resolve("success");
            }, 300);    
        }else{
            count = !count;
            setTimeout(function(){
                console.log("Trigger error");
                defer.reject("error");
            }, 300);
        }
        return defer.promise;
    };
});
myApp.controller("MainController", function($scope, $q, myService){
    
    
    $scope.testFunc = function(){
        var getSthPomise = myService.getSth();
        console.log(getSthPomise);
        getSthPomise.then(handleData, handleData);
        return getSthPomise;
    };
    function handleData(data){
        $scope.msg = data;   
    }
});
myApp.directive("myFollow", function(){
    function linkFunc(scope, element, attrs){
        var ngClickHandler = attrs["myClick"];
        scope._state = true;
        function toggleState(){
            scope._state = !scope._state;   
        }
        
        element.bind("click", function(){
            scope.$apply(toggleState());
            scope.$eval( ngClickHandler).then(function(){
                console.log("there!");
            }, function(){
                console.log("here!");
               toggleState();
            });
        });        
        
    }
    return {
        link: linkFunc,
        restrict: "E"
    }
});