JSFiddle - React, Tailwind, and code Playground

by jgoemat

HTML

<div ng-app="TestApp" ng-controller="Ctrl" id="divCtrl">
    <label>Name:</label>
    <input ng-model="name"> <br/>
        <label>Html:</label>
        <textarea ng-model="html"></textarea> <br/>
        <label>Js:</label> <textarea ng-model="js"></textarea> <br/>   
    <div compile="html" compile-code="js">Hi {{name}}</div>
    <input type="button" value="Simulate AJAX" ng-click="simulateAjax()">
</div>

CSS

textarea {
    width: 400px;
    height: 60px;
}

label {
    width: 50px;
    display: inline-block;
    text-align: right
}
}

JavaScript

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

module.directive('compile', function($compile, $injector) {
    var obj = {
        scope: true, // child scope
        link: function(scope, element, attrs) {
            // 1st function returns value, if changed call 2nd
            scope.$watch(
                function(scope) {
                    return scope.$eval(attrs.compile);
                },
                function(value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                }
            );
            
            scope.$watch(function(scope) {
                return scope.$eval(attrs.compileCode);
            }, function(value) {
                // get 'function' object
                var controller = eval(value);
                if (typeof(controller) == "function") {
                    // invoke controlleron our child scope
                    $injector.invoke(controller, this, { $scope: scope });
                }
            });
        }
    };
    return obj;
});

module.controller("Ctrl", function($scope) {
    $scope.name = 'Angular';
    var code = 'var f = function($scope) { $scope.name = "Ctrl2"; }\r\nf';
    $scope.simulateAjax = function() {
        $scope.html = '<div>Hello {{name}}</div>';
        $scope.js = code;
        code = 'var f = function($scope) { $scope.name = "Ctrl2-next"; }\r\nf';
    };
});