JSFiddle - React, Tailwind, and code Playground

by Lune Yu

HTML

<div ng-controller="MyController">
    <my-grid data="data"></my-grid>
</div>

JavaScript

(function (angular) {
        'use strict';
        angular.module('myApp', [])
                .controller('MyController', ['$scope', function ($scope) {
                    $scope.data = [
                        {name: 'field1', config: {type: 'config1'}},
                        {name: 'field2', config: {type: 'config2'}}
                    ];
                }])
                .directive('myGrid', ['$compile', function($compile) {
                    return {
                        restrict: 'E',
                        replace: true,
                        template: '' +
                            '<table>' +
                            '<tbody>' +
                            '<tr ng-repeat="item in data">' +
                            '    <td><div><my-action1 config="item.config"></my-action1></div></td>' +
                            '    <td>{{item.name}}</td>' +
                            '</tr>' +
                            '</tbody>' +
                            '</table>',
                        scope: true
                    }
                    }])
                .directive("myAction1", ["$compile",
                    function ($compilee) {
                        var TEMPLATE_ACTION = 'actionTemplate.html';
                        return {
                            restrict: "E",
                            replace: true,
                            scope: true,
                            templateUrl: function (element, attrs) {
                                return TEMPLATE_ACTION;
                            },
                            link: function (scope, iElement, iAttrs) {
                                var config = scope.$eval(iAttrs.config);
                                scope.config = config;
                            }
                        };
                    }
                ])
                .directive("myAction2", ["$compile",
                    function ($compilee) {
                        return...