JSFiddle - React, Tailwind, and code Playground

by Aaron Zhang

HTML

<div ng-app="myApp" ng-controller="myController">
    <ul category-root="categories"></ul>
</div>

CSS

.list-categories-nav {
  list-style-type: none;
  padding-left: 0px;
}
.list-categories-parent{
  list-style-type: none;
  padding-left: 0.5em;
}
.list-categories-nav > li {
  margin-left: 0.5em;
}
.list-categories-nav-heading {
  margin-left: inherit !important;
}

JavaScript

var app = angular.module('myApp', []);
app.directive('categoryRoot', [function () {
    return {
        restrict: 'A',
        template: 
            '<ul class="list-categories-nav">' + 
                '<li ng-repeat-start="child in root.children" category-leaf="child" ng-if="!child.children"></li>' +
                '<li ng-repeat-end category-parent="child" ng-if="child.children"></li>' +
            '</ul>',
        replace: true,
        scope: {
            root: '=categoryRoot'
        }
    };
}]);
app.directive('categoryParent', ['$compile',function ($compile) {
    return {
        restrict: 'A',
        replace:'true',
        template:'<li class="list-categories-nav-heading"><strong><a ng-href="{{node.url}}">{{node.name}} ({{ node.total }})</a></strong></li>',
        scope: {
            node: '=categoryParent'
        },
        compile:function(){
            return {
                post:function(scope,element,attr){
                    var html = 
                        '<li><ul class="list-categories-parent"><li ng-repeat-start="child in node.children" category-leaf="child" ng-if="!child.children"></li>' +
                        '<li ng-repeat-end category-parent="child" ng-if="child.children"></li></ul></li>';
                    element.after($compile(html)(scope));
                }
            }
        }
    };

}]);
app.directive('categoryLeaf', [function () {
    return {
        restrict: 'A',
        template:'<li><a ng-href="{{node.url}}">{{node.name}} ({{ node.total }})</a></li>',
        replace:true,
        scope: {
            node: '=categoryLeaf'
        }
    };
}]);

app.controller('myController', function ($scope,$http) {
    $http.jsonp('https://a0d5b7a95a5b07e6ef8c-3b55286d149859b12f6538d484d5c8c2.ssl.cf4.rackcdn.com/sydney-tech/json/categories1.js?callback=JSON_CALLBACK').success(function(data){
        $scope.categories = data;
    });
});