Angular UI-Router: child using parent's view

Question

In story form:

What I am looking for here is a master-detail setup. The master is in list form and when I click on a link (relative to a particular

Answer 1

You can use '@' to define an absolute path to the ui-view of your choice. For example: "detail@contacts" : { }, where this absolutely targets the 'detail' view in the 'contacts' state. within contacts.html

Source: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

Answer 2

Sounds like you simply don't want the views to be hierarchical. To do this, simply change the name of the second state to detail.

Note however, that in doing so you will lose any hierarchical properties of the state tree (the controller code state of accounts for example).

If you want to keep the controllers hierarchical, but perform a replace of the html, I would create another parent above both others that takes care of the controller logic, but only has an extremely simple view <div ui-view=""></div>.

For example:

$stateProvider
    .state('app', { url: '', abstract: true, template: 'parent.html', controller: 'ParentCtrl' })
    .state('app.accounts', { url: '/accounts', templateUrl: 'accounts.tpl.html', controller: 'AccountsCtrl' })
    .state('app.detail', { url: '/accounts/:id', templateUrl: 'detail.tpl.html', controller: 'AccountDetailCtrl' });