Could not resolve 'javascript:;' from state 'app'

Question

I'm facing a trouble and I'm not understanding. I have a menu of configurations and a submenu when i click on it.

<li ui-sref-active="active">
      <a ui-sref="javascript:;">
        <i class="fa fa-cogs"></i>
        <span>Configurations</span>
      </a>
      <ul class="sub-menu">
        <li ui-sref-active="active">
          <a ui-sref="app.configurations.inventory">
            <span>Devices</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.configurations.users">
            <span>Users</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.configurations.networks">
            <span>Networks</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.configurations.alerts">
            <span>Alerts</span>
          </a>
        </li>
      </ul>
    </li>
    <!-- configurations -->

The problem is when I set a ng-if I just can see the configurations menu and when I click on it I got the error "Could not resolve 'javascript:;' from state 'app'".

I know that "javascript:;" this is not defined in my routes file. This means anything specific ? This code wasnt mine and I'm trying to make some changes to control who can see the menu by doing a ng-if like

<!-- configurations -->
    <li ng-if="permissionGroup.views.configurations" ui-sref-active="active">
      <a ui-sref="javascript:;">
        <i class="fa fa-cogs"></i>
        <span>Configurations</span>
      </a>
      <ul ng-if="permissionGroup.views.configurations" class="sub-menu">
        <li ui-sref-active="active">
          <a ui-sref="app.configurations.inventory">
            <span>Devices</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.configurations.users">
            <span>Users</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.configurations.networks">
            <span>Networks</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.configurations.alerts">
            <span>Alerts</span>
          </a>
        </li>
      </ul>
    </li>
    <!-- configurations -->

To get the permission group on Controller I had this piece of code

var user = JSON.parse(window.localStorage.getItem("userKey"));      

        $http.get('/api/organization_permissions_groups/'+user.organization_permission_group_id).success(function (data) {           
            $scope.permissionGroup = data;
        });

Answer 1

You should use ng-show instead of ng-if:

<!-- configurations -->
    <li ng-show="permissionGroup.views.configurations" ui-sref-active="active">
      <a ui-sref="javascript:;">
        <i class="fa fa-cogs"></i>
        <span>Configurations</span>
      </a>
      <ul ng-show="permissionGroup.views.configurations" class="sub-menu">
        <li ui-sref-active="active">
          <a ui-sref="app.configurations.inventory">
            <span>Devices</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.configurations.users">
            <span>Users</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.configurations.networks">
            <span>Networks</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.configurations.alerts">
            <span>Alerts</span>
          </a>
        </li>
      </ul>
    </li>
    <!-- configurations -->