Come si impedisce il ricaricamento sulla vista con nome, quando lo stato cambia? AngularJS UI-Router

Sto usando l’eccellente modulo ui-router nella mia applicazione. Come parte di questo, sto usando le viste con nome per gestire la ‘navigazione secondaria dynamic’ che ho nell’app.

Considera quanto segue:

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

Quando gli utenti visitano per la prima volta l’app, vengono presentati con un elenco di persone. Quando fanno clic su una persona, vengono indirizzati alla pagina dei dettagli. Cose piuttosto semplici. Ecco il markup se aiuta …

 

Tuttavia, PersonNavController chiama un servizio REST per ottenere un elenco di persone, quindi durante la visualizzazione di una persona, l’utente può navigare tra elementi di pari livello. L’utilizzo del metodo sopra riportato fa sì che il template e il controller vengano nuovamente sottoposti a rendering, causando quindi un ritardo dopo ogni clic, nonostante il contenuto non cambi mai.

C’è un modo per mantenere la vista '[email protected]' caricata e aggiornare solo la vista '[email protected]' ?

Il modo in cui sto usando ui-router in questi scenari è: spostare le visualizzazioni al minimo comune denominatore .

Altre parole: nel caso in cui ui-view="nav" sia condiviso tra tutti i dettagli ed è lo stesso per tutti (perché dovrebbe essere caricato una sola volta) – dovrebbe essere parte dello stato della list (parent del detail stato)

la definizione dello stato genitore sarebbe regolata in questo modo:

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

Allora, dov’è il trucco? Nella potenza del ui-router angular. Possiamo, durante ogni definizione di stato , indirizzare la vista corrente . Ora, la vista di nav è parte della definizione di stato list , ovvero non verrà ricaricata durante la commutazione dei dettagli (controlla anche qui per ulteriori spiegazioni)

Dobbiamo solo usare le convenzioni di denominazione definite, vedere:

  • Visualizza nomi – Nomi relativi e assoluti

Poche righe citate dalla documentazione citata:

 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 "[email protected]" : { } // Absolutely targets the 'detail' view in the 'contacts' state. //
within contacts.html "[email protected]" : { }