JSFiddle - React, Tailwind, and code Playground

by Sai Baba Satchitanand

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
    <sample id="myElement">This is a test</sample>
</div>

JavaScript

var myApp=angular.module('myApp',[]);
myApp.directive('sample', function () {
    return {
        restrict: "E",
        replace: true,
        transclude: true,
        template: "<div ><a href='' ng-transclude></a></div>",
        link: function (scope, element, attributes) {
            element.find('a').on('click', function () {
                //problematic line HERE
                $(element).trigger("myEvent.sample");
            });
        },
        //some other stuff
    };
});

function Ctrl($scope)
{
}

$(document).ready(function(){
    $("#myElement").on("myEvent.sample", function (e) {
        alert('clicked!');
    });
})