0

This follows from my question Recursion with ng-repeat in Angular, but is no way a duplicate. Now I know how to do that, but am asking why my current solution to the problem isn't working.

I'm busy adapting the huge Metronic Angular theme, and my first task is to dynamically load side menu items from a REST api. The container for the side meny, in the main index.html page (only page used: doing spa) looks like this:

<div data-ng-include="'tpl/sidebar.html'" data-ng-controller="SidebarController" class="page-sidebar-wrapper"></div>

Then sidebar.html looks like this:

<div class="page-sidebar navbar-collapse collapse">
    <ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200"
        ng-class="{'page-sidebar-menu-closed': settings.layout.pageSidebarClosed}"
        rsng-menuItem="menuItems">
    </ul>
</div>

You'll notice my custom directive, rsng-menuItem, used for recursing a menu tree:

angular.module("ReflexPortalApp").directive("rsngMenuItem", ["$parse", function ($parse) {
    return {
        restrict: "A",
        scope: true,
        templateUrl: "/tpl/sidebar/menu-item.html",
        link: function (scope, element, attrs) {
            scope.List = $parse(attrs.rsngMenuItem)(scope);
        }
    }
}]);

and it's template looks like this:

<li ng-repeat="item in List" ng-class="{\'nav-item\': !item.IsHeading, \'start\': item.IsStart}">
    <a href="{{item.Href}}" ng-class="{\'nav-link nav-toggle\': item.subItems && item.subItems.length > 0}">
        <i ng-if="{{item.Icon && item.Icon.length > 0}}" class="icon-{{item.Icon}}"></i>
        <span class="title">{{item.Text}}</span>
        <span ng-if="{{item.DecorClass || item.DecorText}}" class="{{item.DecorClass}}">{{item.DecorText}}</span>
    </a>
    <ul rsng-menuItem="item.subItems" class="sub-menu"></ul>
</li>

In SideBarController1, the menu items do load successfully from the REST API, and are assigned to themenuItems` scope property, so they should be available for binding.

Lastly, a menu item looks like this in JSON:

{
  "IsDisabled": "0",
  "seq": 2,
  "Href": "javascript:;",
  "Id": "2",
  "IsStart": "0",
  "IsNavItem": "1",
  "DecorText": null,
  "ApiCall": null,
  "Index": 3,
  "Text": "Accounting",
  "Icon": "settings",
  "ParentId": null,
  "DecorClass": "arrow",
  "subItems": [
    {
      "DecorClass": "arrow",
      "ParentId": "2",
      "Icon": "wrench",
      "Text": "Statement",
      "Index": 1,
      "ApiCall": "statement&CustID=4446&statementdate=2016-05-01",
      "DecorText": null,
      "IsNavItem": "0",
      "IsStart": "0",
      "Id": "3",
      "Href": "list",
      "seq": 1,
      "IsDisabled": "0"
    }
  ]
}

When I started, and didn't have a clue how to do recursion in templates, I simply used a recursive code loop and jQuery to 'manually' construct and populate all the elements for each menu item, and that worked fine, but writing HTML with code literals stinks.

Now I simply get an empty side menu, with no errors in the console (gotta love that part of Angular), and was wondering if I'm doing anything obviously wrong.

Community
  • 1
  • 1
ProfK
  • 49,207
  • 121
  • 399
  • 775
  • No way angular can throw error when you have typo in directive naming vs attributes. It doesn't know you made mistake. Check if directive is even being initialized yourself – charlietfl Jul 09 '16 at 12:23

1 Answers1

0

The problem lies in your directive-name, angular simply doesn't recognize your directive because it doesn't deal well with uppercase letters in attribute-names. Rename rsng-menuItem to rsng-menu-item.

However, this won't work because you can't just recursively nest directives in angular, it will end in an infinite loop.

There are multiple solutions for this, take a look at Recursion in Angular directives and https://github.com/marklagendijk/angular-recursion

Community
  • 1
  • 1
Johannes Reuter
  • 3,501
  • 19
  • 20