JSFiddle - React, Tailwind, and code Playground

by robianmcd

HTML

<div ng-app="myApp" ng-controller="myCtrl">
    <button ng-click="triggerRelink()">Trigger Relink</button>
    <div relink-event="myEventName">
        <input type="text">
    </div>
    
</div>

JavaScript

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

app.directive('relinkEvent', function($rootScope) {
    return {
        transclude: 'element',
        restrict: 'A',
        link: function(scope, element, attr, ctrl, transclude) {
            var previousContent = null;
            
            var triggerRelink = function() {
                if (previousContent) {
                    previousContent.remove();
                    previousContent = null;
                }
                
                transclude(function (clone) {
                    console.log('relinking');
                    element.parent().append(clone);
                    previousContent = clone;
                });
                
            };
            
            triggerRelink();                
            $rootScope.$on(attr.relinkEvent, triggerRelink);

        }
    };

});

var myCtrl = function($scope, $rootScope) {
    
    $rootScope.triggerRelink = function() {
        $rootScope.$broadcast('myEventName');
    };
};