ui-router nested view could not resolve state

Question

i try to make a nested view in my app. This is how I try, I have parent UI-view

<div class="ui-view-container col-lg-offset-2 col-lg-10 col-md-offset-2 col-md-10 col-sm-12 col-xs-12" ng-cloak>
                <div ui-view></div>
            </div>

where I change all state on my web app. For example, this is one state

.state('distributorItem', {
                url: '/distributorItem',
                templateUrl: 'distributorItem.html',
                controller: 'distributorItem',
                authentication: {roles: ["distributor"]}
            })

Inside this state, I want to make another MENU, where user can select item and find information by ID, below is example how I pass ID params and add child UI-view

<table class="table-hover">
            <thead>
                <tr>
                    <th>Item ID</th>
                </tr>
            </thead>   
            <tbody>
                <tr ng-repeat="(key, value) in itemIdInClientDetail">
                    <td><a ui-sref="client/info/{{value.id}}">{{value.id}}</a></td>
                </tr>   
            </tbody> 
        </table>
       <div class="col-lg-11 col-md-11 col-sm-10 col-xs-12">
        <div ui-view></div>
         </div>

There is child state

.state('distributorItem.client/info/:itemID', {
                url: '/client/info/:itemID',
                templateUrl: 'clientItemInfo.html',
                controller: 'clientItemInfo',
                authentication: {roles: ["distributor"]}
            })

And this not working, because I get this error in console

angular.js:12477 Error: Could not resolve 'client/info/1126' from state 'distributorItem'

Pls, help... thnx

EDIT:

I make a change like @Maxim Shoustin answered. Now state changed, but in child navigation when I click on item, parent ui-view is full refreshed (child navigation and ui-view) not only child
now my state looks like this

.state('client', {
                url: '/client/info/:itemID',
                templateUrl: 'clientInfo.html',
                controller: 'detailControllerClient as vm',
            })
            .state('client.detail', {
                url: '/detail/:itemID',
                templateUrl: 'itemInfoById.html',
                controller: 'detailControllerClient as vm',
            })

And html is here. (infoDisplay.html is parent view inside index.html. This ui-view in code bellow is child view (client.detail)) infoDisplay.html

<div class="new_nav col-lg-1 col-md-1 col-sm-2 col-xs-12">
            <table class="table-hover">
                <thead>
                    <tr>
                        <th>item ID</th>
                    </tr>
                </thead>   
                <tbody>
                    <tr ng-repeat="(key, value) in clientDetail">
                        <td><a ui-sref=".detail({'itemID': value.id})">{{value.id}}</a></td>     
                    </tr>   
                </tbody> 
            </table>
        </div>
        <div ui-view></div>

artgb · Accepted Answer · 2017-10-06T11:51:22.967

1

You have to use this format

.state('detail', {
   url: '/client/info/{itemID}',

and

ui-sref="detail({itemID: '1126'})"

for more see Give URL with ID in Angular UI Router and How to pass parameters using ui-sref in ui-router to controller

edited Oct 06 '17 at 11:51

answered Oct 05 '17 at 13:30

artgb

3,177
6
19
36

I make this.... pls look at script.js there is explanation. I can't get this plunker to work because it's too big app and all data I get from API. https://plnkr.co/edit/rtmmv9q5O0OrcW0VfEUC?p=info – Arter Oct 06 '17 at 12:14
Please make minimum working code, this plnkr is not useful. – artgb Oct 06 '17 at 12:22
Ok... pls give me some times for this – Arter Oct 06 '17 at 12:23

score 1 · Answer 2 · answered Oct 09 '17 at 09:06

try this

.state('distributorItem', {
            url: '/distributorItem',
            abstract:true,
            templateUrl: 'distributorItem.html',
            controller: 'distributorItem',
            authentication: {roles: ["distributor"]}
        })
       .state('distributorItem.client', {
            url: '/client/info/:itemID',
            templateUrl: 'clientItemInfo.html',
            controller: 'clientItemInfo',
            authentication: {roles: ["distributor"]}
        })

hi @Kalpesh I try to add abstract:true but still the same... Nested nav refresh parent and child view. — Arter, Oct 09 '17 at 10:15

ui-router nested view could not resolve state

2 Answers2