JSFiddle - React, Tailwind, and code Playground

by kyrisu

HTML

<div ng-app="app" ng-controller="ctrl">    
    here
    <recursive-list-item parent=parent on-node-click="onNodeClickFn(node)" top-func="onNodeClickFn"></recursive-list-item>
</div>

JavaScript

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

app.controller('ctrl', function($scope) {
    $scope.parent = {Name: "parent", Children: [{Name: "kid1", Children:[{Name: "kid01"}]},{Name: "kid2"}]};
    $scope.onNodeClickFn = function(node) {
        console.log("called with ",node);
    };
});

app.directive('recursiveListItem', ['$http', 'RecursionHelper', function ($http, RecursionHelper) {
    return {
        restrict: 'E',
        scope: {
            parent: '=',
            onNodeClick: '&',
            topFunc: '='
        },
        compile: function (element, attributes) {

            return RecursionHelper.compile(element);
        },
        template:
        '<div class="list-group-item-heading text-muted parent "> \
                <input type="checkbox" data-ng-click="visible = !visible" id="{{parent.Name}}">\
                <label for="{{parent.Name}}">&nbsp;&nbsp;</label>\
                <a href="javascript:void(0)" data-ng-click="onNodeClick({node: parent})">{{parent.Name}}</a> \
</div> \
            <ul data-ng-if="parent.Children.length > 0" data-ng-show="visible"> \
<li ng-repeat="child in parent.Children">\
                    <recursive-list-item data-parent="child" data-on-node-click="top-func(node)" top-func="topFunc"></recursive-list-item> \
                </li> \
            </ul>',     
    };
}]);

app.factory('RecursionHelper', ['$compile', function ($compile) {
    var RecursionHelper = {
        compile: function (element) {
            var contents = element.contents().remove();
            var compiledContents;
            return function (scope, element) {
                if (!compiledContents) {
                    compiledContents = $compile(contents);
                }
                compiledContents(scope, function (clone) {
                    element.append(clone);
                });
            };
        }
    };

    return RecursionHelper;
}]);