JSFiddle - React, Tailwind, and code Playground

by Carlos Cariello

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js.map"></script>
<div ng-app="app" ng-controller="MainController as ctrl">
    <user>
        {{ctrl.username}}
    </user>
</div>

JavaScript

angular.module("app", ["dataservice"])
	.controller("MainController", MainController)
  .directive("user", [function() {
                var directive = {
                    link: linkFn,
                    transclude: true,
                    template: "<a title='@{{ctrl.funci}}><ng-transclude></ng-transclude></a>'",
                    restrict: 'E',
                    controllerAs : 'ctrl',
                    controller : UserController
                };
                return directive;

                function linkFn(scope, element, attrs, ctrl, transclude) {
                    //ctrl.funci =  transclude().text();
                    alert(transclude().text());
                }
                ;
                ;
            }])
  ;

angular.$inject = ["EmulatedHttpService"];
function MainController(EmulatedHttpService){
	var ctrl = this;
  
  function init(){
  	ctrl.username = "john";
  	EmulatedHttpService.getUserName()
    	.then(function(response){
      		ctrl.username = response.data;
      })
      .catch(function(){
      
      });
  }
  
  
  init();
};


function UserController(){
    var ctrl = this;
    ctrl.$onInit = init;
    
    function init(){
        
    }
    
    init();
    
}

angular.module("dataservice", [])
			 .service("EmulatedHttpService", ["$q", function($q) {

                var deferredData = function() {
                    var response = $q.defer();

                    setTimeout(function() {

                        var data = "Johnny Crazy";

                        response.resolve({
                            statusCode: 200,
                            statusText: "mock response",
                            data: data
                        });

                    }, 200);

                    return response.promise;
                };

                return {
                		getUserName : deferredData
								};
            }]);