JSFiddle - React, Tailwind, and code Playground

by darkoromanov

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div ng-controller='MyCntl'>
    
    <p ng-repeat='item in items'>
        <button ng-click='load(item)'>Load {{item.name}}</button>
    </p>       
</div>

JavaScript

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

demo.directive('panel', function () {
    return {
        restrict: 'E',
        scope: {
            data: '@'
        },
        template: '<pre>I\'m a panel called by {{data.name}}</pre>',
        controller: function ($scope, $element, $attrs) {
               
        }
        
    }
});

demo.controller('MyCntl', function ($scope, $compile) {
    
    $scope.items = [
        { name: 'Diego' },
        { name: 'Darko' }
    ];
    
    
    $scope.load = function (obj) {
        
        $('body').append($compile("<panel data='obj'  />")($scope));
    }
});