Dynamic view names with ui-router

Question

I am trying to target dynamic named views in an ng-repeat but can't do so at config phase as views can only be named statically. Is there a way imitate url param matching like '/path/:param' but with view names like views: {'path:param': {...}} ?

I've tried modifying the state config object at run() to see if changing state configuration after config() had any effect:

rootScope.$on('$stateChangeStart', function(e, to, toP, from, fromP) {
  //nope
  if(toP.itemId) {
    to.views['item-'+toP.itemId+'@home'] = to.views['item-:itemId@home'];
    delete to.views['item-:itemId@home'];
  }
}

plunker: http://plnkr.co/edit/ZkrteD1ls71yd5V10Xub?p=preview

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

This concept would not be working, in general.

The reason is that stable, solid states should not be driven by the data (which are very dynamic, changing frequently). All states and their views :{} should be defined first. The data (as a list of items) should be injected there, consuming already defined states.

states should be defined once (even if a bit later, once configuration is loaded via $http)

data could change during the application life-time often, frequently. They should be placed into states/views - but not drive them

How to load dynamic states dynamically with $http (using the .run() phase)? Check these with full examples and details:

Small extract from the doc of deferIntercept(defer):

Disables (or enables) deferring location change interception...

So, we can (once) postpone the url / location handling... to the moment, when all states are dynamically loaded. But this feature could be used just once.

Well - all that could still not fit into what we want - place some details into the list.

There is a big detail Q & A, which should give some insight:

How to replace list item with details

Please, have a look at that, because there is detailed explanation and working example...

Dynamic view names with ui-router

1 Answers1