In my sidebar.html file, I have the following code:
<ul id="menu-sidebar">
<li class="has_sub" ng-repeat="menu in menus | filter: filterTier | filter: filterRole">
<a ng-if="menu.url != '#'" ui-sref="{{ menu.url }}" class="waves-effect" ui-sref-active="active subdrop">
<i class="fa fa-{{ menu.icon }}"></i> <span> {{ menu.name }}</span>
</a>
<a ng-if="menu.url == '#'" class="waves-effect" ui-sref-active="active subdrop" href="#">
<i class="fa fa-{{ menu.icon }}"></i> <span> {{ menu.name }}</span>
</a>
<ul class="list-unstyled" ng-if="menu.sub_menus.length > 0">
<li ng-repeat="submenu in menu.sub_menus">
<a ui-sref="{{ submenu.url }}" ui-sref-active="active">{{ submenu.name }}</a>
</li>
</ul>
</li>
</ul>
As for my appController.js file:
$scope.menus = [{name: 'Customers', url: 'customers', icon: 'users', tier: 1, role: 1},
{name: 'Settings', url: '#', icon: 'gear', tier: 1, role: 1,
sub_menus: [{name: 'Admin', url: 'settings.admin'}, {name: 'Outlet', url: 'settings.outlet'} ]
}];
Using the above code will generate the sidebar menu successfully.
I have two questions:
How can I avoid repeating my
<a>tag and manually hiding it when the URL is '#' to prevent errors withui-sref={{menu.url}}?Is there a way to load the sidebar menu only once? Currently, the controller reloads
$scope.menusevery time the page loads because it's defined in the appController.
Thank you!