2016-05-17 17 views
5

Sto utilizzando ui-route per la navigazione.
Ho stato padre chiamato principale, è un abstract stato (l'url: /main) e del bambino afferma prodotti e utenti (URL: /main/prodotti e /main/utenti).

app.config(["$stateProvider", "$urlRouterProvider", 
    function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise("/main/products"); 
    $stateProvider 
     .state("main", { 
     url:"/main", 
     templateUrl: "main.html", 
     abstract: true, 
     controller: "MainCtrl", 
     }) 
     .state("main.products", { 
     templateUrl: "products.html", 
     controller: "productsCtrl", 
     }) 
     .state("main.users", { 
     templateUrl: "users.html", 
     controller: "usersCtrl", 
     }) 
    } 
]); 

E qui il mio controller:

app.controller('MainCtrl', function($scope,$state) { 
    console.log("I'm Main controller") 

    $scope.goToProduct = function() 
    { 
    //$state.go("main.products",{}) 
    $state.go("main.products",{},{reload:true}) 
    } 

    $scope.goToUsers = function() 
    { 
    //$state.go("main.users",{}) 
    $state.go("main.users",{},{reload:true}) 
    } 

}); 

app.controller('usersCtrl', function() { 
    console.log("I'm users controller") 

}); 

app.controller('productsCtrl', function() { 
    console.log("I'm products controller") 
}); 

Il codice HTML:

<ul> 
    <li style="cursor:pointer" ng-click="goToProduct()">Click for products</li> 
    <li style="cursor:pointer" ng-click="goToUsers()">Click for users</li> 
</ul> 

<br> 
<div style="font-size:28px" ui-view></div> 

Come potete vedere, sto usando: $ state.go ("main.products ", {}, {reload: true}) per la navigazione

Quando faccio clic su utenti/prodotti sul menu, lo MainCtrlreinizializza !!
È perché il {reload:true}.

Le mie domande:
1) Perché il controller di stato "padre" viene reinizializzato anche a ogni clic?
2) Ho bisogno di un elegante soluzione per evitare di il MainCtrl a reinizializzare!

Ecco l'esempio completo - plunker vedere la console.

+0

Perché senti la necessità di forzare il reload (usando il parametro '{reload: true}')? – JAAulde

+0

Ho le mie ragioni, devo usarlo nella mia applicazione, ovviamente senza che tutto funzioni perfettamente – cheziHoyzer

+0

* sospiro * Stai chiedendo una soluzione e non spiegherai il tuo pieno intento. Come tale, la mia risposta alla tua prima domanda è "Perché gli sviluppatori di UI Router dicono che è come dovrebbe funzionare. (Http://angular-ui.github.io/ui-router/site/#/api/ui.router. stato. $ stato) "La mia risposta alla seconda domanda è:" Non sono state fornite sufficienti informazioni, anche dopo che è stata richiesta. Buona fortuna. " – JAAulde

risposta

11
  1. Aggiornare il ui-router alla versione più recente (0.2.14 almeno)
  2. Change $state.go chiamata a qualcosa di simile $state.go("main.users",{},{reload: "main.users"})

Dal ui-router 0.2.14 si può passare stringa come reload valore - il router ui aggiornerà lo stato che corrisponde alla stringa passata e tutti i suoi figli.

+0

2) La tua soluzione funziona per me !!! Ancora non capisco perché il team Angular abbia deciso di ricaricare anche la stae astratta su {reload: true} – cheziHoyzer

0

la ricarica: l'opzione true ricaricherà gli stati corrente e padre (in pratica dallo stato corrente allo stato di livello più alto). Tuttavia, se si specifica l'opzione di ricarica con il nome dello stato. ricarica solo lo stato che hai inserito e lo stato di tutti i bambini. Questo è direttamente dal doc