angularjs - ui-router parent state optional parameter -

i trying manage crud lists , list elements.

i want have one state, 1 template , 1 controller per element each case(create/edit).

i create state:

state('list', {                 parent: 'root',                 url: '/list?list_id',                 views: {                     'content@root': {                         templateurl: 'list.tmpl.html',                         controller: 'listcontroller',                         controlleras: 'vm',                     }                 }             }) 

which perfect, in controller can check list_id , toggle betweend create/edit.

the problem occurs when state above becomes parent. when child introduced:

state('list-element', {                 parent: 'list',                 url: '/element?list_id&element_id',                 views: {                     'content@root': {                         templateurl: 'element.tmpl.html',                         controller: 'elementcontroller',                         controlleras: 'vm',                     }                 }             }) 

i can no longer have uncertainty need.

to put more simple, want url structure this:

• /list?list_id - if list_id toggle edit
• /list/element?list_id&element_id - if element_id toggle edit

note when list element created, parent state not have parameter.

now, can work around creating 2 states list:

1. /list (parent) create
2. ?list_id (child 1) edit
3. /element?list_id&element_id (child 1) create or edit

but break "one state, 1 template , 1 controller" want.

anyway can achieve the way want?

i know you're looking specific implementation, think part of reason you're hitting trouble because approach may not best you're trying do, since seems you're confusing role of route versus dom element.

components (and directives) designed bundle controllers , templates explicitly elements on page. routing gets there, , tells ones load. here's how might handle using more conventional approach:

statehelperprovider.state({   name: 'list',    url: '/list'   // possible https://github.com/marklagendijk/ui-router.statehelper   children: {     name: 'element',     // example: /list/123     url: '/{list_id:int}?element_id',     resolve: {       item: ['$stateparams', 'fooservice', ($stateparams, fooservice) => {         // whatever info need, based on id.         return fooservice.getitem($stateparams.list_id);       }     },     views: {       'content@root': {         // use resolved `item` , pass component.         template: '<list-element item="$resolve.item"></list-element>'       }     }   } });  // component (function () {   'use strict';   angular.module('yourmodule')     .component('listelement', {       templateurl: 'element.tmpl.html',       bindings: {         item: '<'       }     }); })();  // sample component template <h2 ng-bind="$ctrl.item.name"></h2> <div ng-bind="$ctrl.item.description"></div> 

for different route, may want check out nested named views in ui router. allow specify different controller, template, , state each. gist:

<!-- parent template --> <div ui-view="editcontents"></div> <div ui-view="previewcontents"></div>