Vista anidada del enrutador de interfaz de usuario angular

Question

Estoy intentando inyectar una vista anidada en mi vista normal, usando ui-router.Sé que es posible haciendo ng-include.Pero quiero solucionarlo usando ui-router.

Mi html es el siguiente:

<div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">Project todos</div>
                <div class="panel-body">
                    <div ui-view="todos"></div>
                </div>
            </div>
        </div>
    </div>

Luego en mi script obtuve un estado:

.state('project', {
   url: '/project/:projectId',
   templateUrl: 'views/project/project.html',
   controller: 'ProjectCtrl',
   views: {
      'todos': {
       templateUrl: 'views/project/todos.html'
      }
   }
})

Actualización: ¿no es posible algo como esto?

.state('project', {
   url: '/project/:projectId',
   templateUrl: 'views/project/project.html',
   controller: 'ProjectCtrl',
   views: {
      'todos@project': {
         templateUrl: 'views/project/todos.html'
      }
   }
})

¿Alguien puede encontrar un error tipográfico o algo así?He leído los documentos.No estoy seguro de qué pasa.

¡Gracias de antemano!

Answer 1

Hay un trabajo plomero, mostrando cómo podemos hacerlo funcionar

En index.htm necesitamos tener el <div ui-view="" ></div>, que es el lugar donde inyectamos el proyecto.html.Luego ajustamos la definición del estado para inyectar también la vista anidada, usando ui-view denominación absoluta:

  .state('project', {
    url: '/project/:projectId',

    views: {
      '' : {
        templateUrl: 'views.project.project.html',
        controller: 'ProjectCtrl',
      },
      'todos@project': {
        templateUrl: 'views.project.todos.html'
      }
    }
  });

el nombre absoluto todos@project, inyectará todos.html en project.html.Comprobar el plomero

Ver el:

• Ver nombres: relativo vs.Nombres absolutos

Una cita:

...Detrás de escena, a cada vista se le asigna un nombre absoluto que sigue un esquema de viewname@statename, donde nombre de vista es el nombre utilizado en la directiva de vista y nombre de estado es el nombre absoluto del estado, p.contacto.elemento.También puede optar por escribir los nombres de sus vistas en la sintaxis absoluta...