En forma de historia:

Lo que estoy buscando aquí es una configuración de detalles maestros. El maestro está en forma de lista y cuando hago clic en un enlace (relativo a una fila / registro particular (o Cuenta en este caso)) quiero ver los detalles en la vista principal (literalmente, la vista "principal":<div class="container" ui-view="main"></div>)

Quiero hacer esto y mantener mi estructura de URL (/accounts para la lista de Cuentas;/accounts/:id para la versión detallada)pero quiero que la vista de detalles use la vista que estaba usando la lista.

Lo que tengo actualmente

index.html

...
<div class="container" ui-view="main"></div>
...

cuentas.js

$stateProvider
    .state ('accounts', {
        url: '/accounts',
        views: {
            'main': {
                controller: 'AccountsCtrl',
                templateUrl: 'accounts/accounts.tpl.html'
            }
        },
        data: { pageTitle: 'Account' }
    })
    .state ('accounts.detail', {
        url: '/:id',
        views: {
            'main': {
                controller: 'AccountDetailCtrl',
                templateUrl: 'accounts/detail.tpl.html'
            }
        },
        data: { pageTitle: 'Account Detail' }
    });

En este punto, el/accounts La ruta funciona como se esperaba. Muestraaccounts/accounts.tpl.html correctamente en elmain ver. En esohtml cada línea en el repetidor lo vincula a su apropiado/accounts/:id URL, que estoy manejando con el estado anidadoaccounts.detail.

Lo que probablemente sea obvio para la mayoría de ustedes que saben más que yo sobre esto, miaccounts.detail se renderizará a la vistamain si esa vista con nombre existe en la plantillaaccounts/accounts.tpl.html. Eso es realmente cierto.

Pero eso no es lo que quiero. Quiero elaccounts.detail cosas para representar en el padremain ver; Quiero el html deaccounts/detail.tpl.html areemplazar el html deaccounts/accounts.tpl.html encontrado enindex.html: <div class="container" ui-view="main"></div>.

Entonces, ¿cómo podría lograr esto?

MI SOLUCIÓN EN CONTEXTO El truco es, como dice la respuesta, configurar el esquema de URL para identificar qué estado secundario es "predeterminado". La forma en que interpreto este código en inglés simple es que la clase principal es abstracta con la URL adecuada y la clase secundaria "predeterminada" tiene la "misma" URL (indicada por'')

Si necesita más claridad, simplemente publique un comentario y compartiré más orientación.

.config(function config( $stateProvider ) { $stateProvider
    .state ('accounts', {
        abstract: true,
        url: '/accounts',
        views: {
            'main': {
                templateUrl: 'accounts/accounts.tpl.html',
                controller: 'AccountsCtrl'
            }
        },
        data: { pageTitle: 'Accounts' }
    })
    .state ('accounts.list', {
        url: '',
        views: {
            'main': {
                templateUrl: 'accounts/list.tpl.html',
                controller: 'AccountsListCtrl'
            }
        },
        data: { pageTitle: 'Accounts List' }
    })
    .state ('accounts.detail', {
        url: '/:id',
        views: {
            'main': {
                templateUrl: 'accounts/detail.tpl.html',
                controller: 'AccountDetailCtrl'
            }
        },
        data: { pageTitle: 'Account Detail' }
    });