CODEWITHSUNDEEP
javascriptangularjs
ssuhat
ssuhat

Reputation: 7656

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!

Upvotes: 3

Views: 181

Answers (1)

Atula
Atula

Reputation: 2173

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

Upvotes: 1

Related Questions