SSuhat SSuhat - 6 months ago 47x
Javascript Question

Angular UI-Router wih empty ui-sref and load once

I have this sidebar.html:

<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> {{ }}</span>
<a ng-if="menu.url == '#'" class="waves-effect" ui-sref-active="active subdrop" href="#">
<i class="fa fa-{{ menu.icon }}"></i> <span> {{ }}</span>
<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">{{ }}</a>


And my appController.js:

$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'} ]

Those code above will produce sidebar menu.

Yes above code is worked perfectly.

I've got 2 questions:

  1. As above I need to repeat my
    tag and hide it manually if it '#' because it always return me an error if I put
    or blank inside
    ui-sref = {{menu.url}}

  2. How can I create my sidemenu only once?. Right now my controller will load the
    every time the page is loaded (I define it as appController and put it on my body tag so it always return me those menu).

Thanks in advance!

  1. As a tag and ui-router are used for going to a link so of course they will give you error if you don't give address to them.
  2. Try this :
    $( document ).ready(function() { //your code })/