Como evito recarregar a exibição nomeada quando alterações de estado? Roteador de interface do usuário AngularJS

Estou usando o excelente módulo ui-router no meu aplicativo. Como parte disso, estou usando exibições nomeadas para gerenciar a “sub-navegação dinâmica” que tenho no aplicativo.

Considere o seguinte:

 $urlRouterProvider.otherwise('/person/list'); $stateProvider .state('person', { url: '/person', abstract: true, }) .state('person.list', { url: '/list', views: { "main@": { templateUrl: "person.list.html", controller: 'PersonListController' } } }) .state('person.details', { url: '/{id}', views: { 'main@': { templateUrl: "person.details.html", controller: 'PersonController' }, 'nav@': { templateUrl: "person.nav.html", controller: 'PersonNavController' } } }); 

Quando os usuários visitam o aplicativo pela primeira vez, eles são apresentados a uma lista de pessoas. Quando eles clicam em uma pessoa, eles são levados para a página de detalhes. Coisas bem básicas. Aqui está a marcação se isso ajudar …

 

No entanto, o PersonNavController chama um serviço REST para obter uma lista de pessoas, portanto, ao visualizar uma pessoa, o usuário pode navegar pelos elementos irmãos. O uso do método acima faz com que o modelo e o controlador sejam renderizados novamente, causando um atraso após cada clique, apesar de o conteúdo nunca mudar.

Existe uma maneira de manter a visualização 'nav@' carregada e apenas atualizar a visualização 'main@' ?

A maneira que eu estou usando o ui-router cenários é: mover as vistas para o mínimo denominador comum .

Outras palavras: No caso em que ui-view="nav" é compartilhado entre todos os detalhes e é o mesmo para todos eles (porque deve ser carregado apenas uma vez) – deve ser parte do estado da list (pai do detail Estado)

a definição de estado pai seria ajustada assim:

 .state('person.list', { url: '/list', views: { "main@": { templateUrl: "person.list.html", controller: 'PersonListController' } // here we target the person.list.html // and its ui-view="nav" 'nav@person.list': { templateUrl: "person.nav.html", controller: 'PersonNavController' } } 

Então, onde está o truque? No poder do ui-router angular. Podemos, durante cada definição de estado , direcionar a visão atual . Agora, a visualização nav é parte da definição do estado da list – isto é, ela não será recarregada durante a troca de detalhes (verifique também aqui mais explicações)

Nós apenas temos que usar as convenções de nomenclatura definidas, veja:

  • Exibir nomes – relativos versus nomes absolutos

Algumas linhas citadas da documentação mencionada:

 views: { //////////////////////////////////// // Relative Targeting // // Targets parent state ui-view's // //////////////////////////////////// // Relatively targets the 'detail' view in this state's parent state, 'contacts'. // 
within contacts.html "detail" : { }, // Relatively targets the unnamed view in this state's parent state, 'contacts'. //
within contacts.html "" : { }, /////////////////////////////////////////////////////// // Absolute Targeting using '@' // // Targets any view within this state or an ancestor // /////////////////////////////////////////////////////// // Absolutely targets the 'info' view in this state, 'contacts.detail'. //
within contacts.detail.html "info@contacts.detail" : { } // Absolutely targets the 'detail' view in the 'contacts' state. //
within contacts.html "detail@contacts" : { }