Ui-router AngularJS: ricarica: true ricarica anche lo stato genitore

Question

In this plunk si hanno due stati del router, un genitore e un figlio. Quando il bambino viene richiamato facendo clic sul collegamento, poiché ha l'opzione reload: true, viene sempre ricaricato. Questo va bene, ma il problema è che anche lo stato genitore viene ricaricato. Prova a fare clic sul collegamento "Popola 11" più volte e vedrai che anche la data/ora genitore cambia.

Come posso ricaricare solo il bambino?

Javascript:

var app = angular.module("app", ['ui.router']); 

app.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise("/"); 

    $stateProvider 
    .state('state1', { 
      templateUrl: 'state1.html', 
      controller: function($scope) { 

      $scope.theTime1 = Date.now(); 

      } 
    }) 
    .state('state1.state11', { 
      templateUrl: 'state11.html', 
      controller: function($scope) { 

       $scope.theTime11 = Date.now(); 

     } 
    }); 

}); 

Answer 1

In realtà è molto semplice.

Non utilizzare reload perché questo fa esattamente quello che hai trovato. Ricarica tutto per il percorso.

Invece, aggiungere un parametro alla route figlio e ogni volta che si fa clic sul collegamento, assicurarsi di modificare tale parametro. Ciò costringerà lo stato del bambino a essere ricaricato.

Ho aggiornato il tuo plunk con un esempio. Ho appena aggiunto un parametro num e aumentato una variabile count ogni volta che si fa clic sul collegamento.

http://plnkr.co/edit/qTA39rrYFYUegzuFbWnc?p=preview

Answer 2

Un cambiare parametro come Mathew Foscarini suggerito, è (di sicuro) strada da percorrere. Potrebbe esserci anche un'altra soluzione, tecnica con stato reloader. Qui di seguito, e in this updated plunker possiamo vedere versione semplificata, ma possiamo anche passare alcuni params lì per renderlo più generale

.state('state1.reloader', { 
     controller: function($state) { 
     $state.go('state1.state11') 
     } 
}) 

E possiamo chiamarlo come:

// instead of this 
<a href="#" ui-sref="state1.state11" ui-sref-opts="{reload: true}"> 
// we can do this 
<a href="#" ui-sref="state1.reloader" > 

Controllare lo here