Dynamically add directives in AngularJS

by Divya Manu

HTML

<section ng-app="myApp" ng-controller="MainCtrl">
    <my_isolate_scope_dir columns="columns" />
</section>

CSS

section {
    padding: 2em;
}
button {
    padding:0.3em;
    margin: 0.3em;
}

JavaScript

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

myApp.controller("MainCtrl", ["$scope", function ($scope) {
    $scope.columns = [{
        "Name": "Click Me",
            "onClickFunction": "createRequest"
    }];

    $scope.createRequest = function (raw) {
        console.log(raw);
        
    };
}]);


myApp.directive("myIsolateScopeDir", ["$compile", "$templateCache", "$parse", function ($compile, $templateCache, $parse) {
    return {
        restrict: 'E',
        scope: {
            columns: '=',
        },
        template: "<div ng-repeat=\"column in columns\" " +
        "<a style=\"cursor: pointer\" ng-click=\"this[column.onClickFunction]({arg1:column.Name})\" target=\"_self\" ng-href=\"\">{{column.Name}}" +
            "</a>",
        link: function (scope, element, attrs, ctrls) {
            var watchDeregisterFn = scope.$watch('columns', function () {
                if (!scope.columns || !scope.columns.length) {
                    return;
                }
                watchDeregisterFn();
                scope.columns.forEach(function (column) {
                    if (column.onClickFunction) {
                        var getParentMethod = $parse(column.onClickFunction+"()");
                        scope[column.onClickFunction] = function (l) {
                            console.log(l)
                            return getParentMethod(element.scope(),l,{raw:{"entity":l.arg1}});
                        };
                    }
                });

            });

        }
    }
}]);