AAT AAT - 4 months ago 13
Javascript Question

state could not be resolved in angularjs

I am using nested view for ui-router.
My menu html


<li ng-class="{active: $state.includes('staffs')}">
<a ui-sref="dashboard"><i class="fa fa-users"></i> <span class="nav-label">{{ 'STAFFS' | translate }}</span> <span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse" ng-class="{in: $state.includes('staffs')}">
<li ui-sref-active="active"><a ui-sref="staffs.add"><i class="fa fa-circle-o"></i>{{ 'ADDSTAFF' | translate }}</a></li>
<li ui-sref-active="active"><a ui-sref="staffs.view"><i class="fa fa-circle-o"></i>{{ 'VIEWSTAFFS' | translate }}</a></li>
<li ui-sref-active="active"><a ui-sref="staffs.permission"><i class="fa fa-circle-o"></i>{{ 'STAFFPERMISSION' | translate }}</a></li>
<li ui-sref-active="active"><a ui-sref="staffs.prdtype"><i class="fa fa-circle-o"></i>{{ 'PRODUCTTYPE' | translate }}</a></li>
</ul>
</li>


Below is my config.js

.state('staffs.add', {
abstract: true,
url: "/add_staff",
templateUrl: "views/staff_add.php",
})


I am getting an error Error: Could not resolve 'staffs.add' from state ''.
Can anyone tell me where am I doing wrong

Answer

You cannot go to an abstract state

abstract state can act as container/parent state

remove abstract: true, it should work