Visualização aninhada do roteador UI angular

Question

Estou tentando injetar uma visualização aninhada na minha visualização normal, usando o ui-router.Eu sei que é possível fazendo ng-include.Mas quero resolver isso usando o ui-router.

Meu html é o seguinte:

<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>

Então, no meu script, obtive um estado:

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

Atualização - não há algo assim possível?

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

Qualquer um pode encontrar um erro de digitação ou algo assim?Eu li os documentos.Não tenho certeza do que há de errado.

Desde já, obrigado!

Answer 1

Há um trabalho desentupidor, mostrando como podemos fazê-lo funcionar

No index.htm precisamos ter o <div ui-view="" ></div>, que é onde injetamos o project.html.Em seguida, ajustamos a definição do estado, para injetar também a visualização aninhada - usando ui-view nomenclatura absoluta:

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

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

O nome absoluto todos@project, injetará todos.html no project.html.Verifica a desentupidor

Veja o:

• Ver Nomes - Relativo vs.Nomes Absolutos

Uma citação:

...Nos bastidores, cada visualização recebe um nome absoluto que segue um esquema de viewname@statename, onde viewname é o nome usado na diretiva de visualização e state name é o nome absoluto do estado, por exemplo.contato.item.Você também pode optar por escrever seus nomes de visualização na sintaxe absoluta...