JSFiddle - React, Tailwind, and code Playground

by Vincent Dagpin

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="TestApp">
    <div ng-controller="TestCtrl">
        <custom-input on-click="onClickEvent($event)" />        
    </div>
</div>

JavaScript

var app = angular.module('TestApp', []);

app.controller('TestCtrl', ['$scope', function($scope){
    $scope.onClickEvent = function($event)
    {
         console.log($event);
    }
}]);

app.directive("customInput", function ($timeout, $compile) {
    return {
        restrict: "E",
        scope: {
            onClickNotify: "&onClick",
        },
        replace: true,
        transclude: false,          
        link: function (scope, element, attrs, controller) {
            var ipt = $('<input />')
                .attr({
                    'type' : 'text',
                    'ng-click' : 'onClick({$event: $event})'
                });
            
            scope.onClick = function ($event) {
                if (typeof (scope.onClickNotify) == 'function') {
                    scope.onClickNotify({$event:$event});
                }
            }
            
            $compile(ipt)(scope);
            $(element).replaceWith(ipt);
        }
    }
});