angularjs - sref - Router UI angular: niño usando la vista de los padres

ui-router angular 6

Question

En forma de cuento:

Lo que estoy buscando aquí es una configuración de detalles maestros. El máster está en forma de lista y cuando hago clic en un enlace (relativo a una fila / registro particular (o a una 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, la ruta /accounts funciona como se esperaba. Muestra accounts/accounts.tpl.html correctamente en la vista main . En ese html cada línea en el repetidor lo vincula a su URL /accounts/:id apropiada, que estoy manejando con las accounts.detail estado anidadas.

Lo que probablemente sea obvio para la mayoría de ustedes que saben más que yo acerca de esto, mis accounts.detail mostrarán en la vista main si esa vista nombrada existe en la plantilla accounts/accounts.tpl.html . Eso es cierto.

Pero eso no es lo que quiero. Quiero que las cosas de accounts.detail muestren en la vista main ; Quiero el html de accounts/detail.tpl.html para reemplazar el html de accounts/accounts.tpl.html encontrado en index.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 URL "misma" (indicada por '''' ).

Si necesita más claridad, solo 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'' }
    });

Answer 1

Parece que simplemente no quieres que las vistas sean jerárquicas. Para hacer esto, simplemente cambie el nombre del segundo estado al detail .

Sin embargo, tenga en cuenta que al hacerlo perderá todas las propiedades jerárquicas del árbol de estado (el estado de las cuentas del código del controlador, por ejemplo).

Si desea mantener los controladores jerárquicos, pero realice un reemplazo del html, crearía otro padre sobre los otros que se encargue de la lógica del controlador, pero que solo tenga una vista extremadamente simple <div ui-view=""></div> .

Por ejemplo:

$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'' });

Answer 2

Puede usar ''@'' para definir una ruta absoluta a la vista de usuario de su elección. Por ejemplo: "detail @ contacts": {}, donde esto se dirige completamente a la vista de "detalles" en el estado de "contactos". dentro de contacts.html

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