CODEWITHSUNDEEP
javascriptangularjsangular-uiangular-ui-routerangularjs-routing
Arne H. Bitubekk
Arne H. Bitubekk

Reputation: 3033

Angular ui-routing and multiple views in nested child states

I have a parent state that is abstract which basically only contains a template html that has ui-views. I have multiple child states that contains multiple views, and each of the child states has child states which also contains multiple views. The first child state in the line works fine but when I try to access the child state to the child state then it crashes.

Here's some code simplified (I have several components in on page in the real code. It works like todo. It basicly has a list and a edit view (I don't want in row/in line edit for the list) and the edit view will show/hide depending on the state your in of editing a single item or creating new item. I want rest of the lists for the other components to be still showing up):

index.html:

<div ui-view></div>
<div ui-view="todo-edit"></div>
<div ui-view="todo-list"></div>

js code:

$stateProvider
    .state('root', {
        abstract: true,
        url: '/',
        templateUrl: '/index.html'
    })
    .state('root.todo', { //This state works
        url: '/todo',
        views: {
            '': {
                template: 'Todo list'
            },
            'todo-list': {
                templateUrl: '/todo-list.html',
                controller: 'TodoListController'
            }
        }
    })
    .state('root.todo.edit', { //This state does not work
        url: '/edit/:id',
        views: {
            '@root': {
                template: 'Edit todo'
            },
            'todo-list@root': {
                templateUrl: '/todo-list.html',
                controller: 'TodoListController'
            },
            'todo-edit@root': {
                templateUrl: '/todo-edit.html',
                controller: 'TodoEditController'
            }
        }
    })
    .state('root.todo.create', { //This state does not work
        url: '/create',
        views: {
            '@root': {
                template: 'Create todo'
            },
            'todo-list@root': {
                templateUrl: '/todo-list.html',
                controller: 'TodoListController'
            },
            'todo-edit@root': {
                templateUrl: '/todo-edit.html',
                controller: 'TodoEditController'
            }
        }
    });

The state todo.list.edit does not work and it will just return me to the root page without any errors. Anyone have any idea what the problem might be and how to solve it? Any suggestions would be appreciated. Perhaps I'm on the wrong track with views and there's another way to solve it?

I want to solve the different "states" using states and not ng-include and sharing state between a service or something simlar.

Upvotes: 3

Views: 1600

Answers (2)

Arne H. Bitubekk
Arne H. Bitubekk

Reputation: 3033

From what I've gathered you can only set the template in the states parents view container and not the parents parent. If anyone finds a solution on this then please post and I'll set it as asnwer

Upvotes: 1

ms87
ms87

Reputation: 17492

You are defining 2 child states of todo.list:

.state('todo.list.edit') and .state('todo.list.create')

but I don't see where you've defined a state called todo.list. For that to work either define a todo.list state or make the 2 create and edit states children of todo:

.state('todo.edit') and .state('todo.create')

Also,

todo.list.edit

is not valid since your todo state is actually called root.todo so even if you have a todo.list state it would have to be called root.todo.list.

Upvotes: 3

Related Questions