SSuhat SSuhat - 7 months ago 51
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> {{ 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>


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
    <a>
    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
    $scope.menus
    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!

Answer
  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 })/