JSFiddle - React, Tailwind, and code Playground

HTML

<html ng-app="website">
<body ng-controller="MyController">
    <a href='#' ng-click="load()">Click Event</a>
    <a href='#' click-load>Click Directive</a>

</body>
</html>

JavaScript

angular.module('website', []).directive('clickLoad', function($q, $http, $templateCache) {
        return function(scope, element, attrs) {
            function loadData() {
                    $http.get('http://fiddle.jshell.net', {
                        cache: $templateCache
                    }).then(function(result) {
                        alert('loaded ' + result.data.length + " bytes");
                    });

            }
            element.bind('click', loadData);
          };
    });


function MyController($scope, $http, $templateCache) {
    $scope.load = function() {
        $http.get('http://fiddle.jshell.net', {
            cache: $templateCache
        }).then(function(result) {
            alert('loaded ' + result.data.length + " bytes");
        });
    }
}