JSFiddle - React, Tailwind, and code Playground

by Jigar Dafda

HTML

<div ng-app="myApp">
    <div ng-controller = "myCtrl">
        <my-button ng-repeat="btn in btns" conf="btn"></my-button>
    </div>
</div>

JavaScript

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

myApp
    .factory('btnsfactory', function($compile){
        var btnList = [
            {
                id: "1",
                name: "button1",
                command: "alert(\"You pressed 1\")"
            },
            {
                id: "2",
                name: "button2",
                command: "alert(\"You pressed 2\")"
            }
        ];
        
        var obj = {};
        
        obj.getButtonsList = function(ele, scope){
            return btnList;
        };
        
        return obj;
    })
    .directive('myButton', function(){
        return {
            restrict: 'E',
            scope: {
                conf: '='
            },
            template: "<button id='{{conf.id}}' ng-click='clickfn(conf)'> {{conf.name}} </button",
            link: function(scope, ele, attr){
                // we can also use eval but eval is evil
                var fn = new Function(scope.conf.command);
                scope.clickfn = function(conf){
                    console.log(conf)
                    fn();
                };
            }
        };
    })
    .controller('myCtrl', function($scope, btnsfactory){
        $scope.btns = btnsfactory.getButtonsList();
    });