JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div ng-app="app">
  <div ng-controller="itemController">
    <menu></menu>
  </div>
</div>

JavaScript

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

app.controller('itemController', [function() {}]);

app.directive('navItem', function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {
      title: '@',
      href: '@',
      icon: '@'
    },
    template: '<li><a href="{{ href }}"><i class="{{ icon }}"></i><span>{{ title }}</span></a><ul class="sub-menu" ng-transclude></ul></li>'
  };
});


app.directive('menu', ['$compile', 'NavBarCreator', function($compile, NavBarCreator) {
  return {
    restrict: 'E',
    replace: true,
    controller: [function() {
      var path = null;
      this.navMenuJson = [{
        title: 'Spaces',
        icon: 'icon-layers',
        href: 'javascript:;',
        isActive: path === '/Spaces',
        subitems: [{
          title: 'OpenSpaces',
          icon: 'icon-layers',
          href: '#/OpenSpaces',
          isActive: path === '/OpenSpaces',
          subitems: [{
            title: 'OpenSpaces2',
            icon: 'icon-layers',
            href: '#/OpenSpaces2',
            isActive: path === '/OpenSpaces2',
          }]
        }]
      }, {
        title: 'Meeting',
        icon: 'icon-layers',
        href: '#/meeting',
        isActive: path === '/meeting'
      }];
    }],
    link: function(scope, iElement, attrs, ctrl) {
      var navbarItems = NavBarCreator(ctrl.navMenuJson);
      iElement.append(navbarItems);

      //compile the raw HTML
      $compile(iElement.contents())(scope);
      console.log(iElement);
    },
    template: '<div class="menu-wrapper"></div>'
  };
}]);

app.service('NavBarCreator', [function() {
  var rawHtml = angular.element("<div />");

  return function(itemJson) {
    recur(itemJson, rawHtml);
    return rawHtml.html();
  };

  function recur(items, parent) {
    angular.forEach(items, function(item, i) {
      var itemHtml = angular.element('<nav-item />', {
        'title': item.title,
        'href': item.href,
        'icon': item.icon
      });
     ...