ngHide/ngShow che utilizza $ rootScope nell'applicazione per singola pagina

Question

Rivolgiti a tutti per chiedere aiuto ancora per AngularJS. Sto costruendo una SPA in cui la mia pagina Layout (principale) è divisa in tre barre di navigazione a sinistra in sezione, contenuto centrale, barra degli articoli a destra. La mia lista di articoli a destra dovrebbe essere nascosta quando carico la mia home page, ma dovrebbe essere visibile nelle schermate rimanenti. Ho creato una variabile $ rootScope in homeController e impostato il valore su "true" in base al percorso della posizione e utilizzando tale variabile nel modello per impostare il valore su ngHide. Quando navigo su una pagina diversa mentre sto usando SPA, le mie barre destra e sinistra non verranno caricate di nuovo, solo il mio contenuto centrale farà una nuova vista. Durante il caricamento della nuova vista nel controller che sta inviando i dati al modello della nuova vista, sto reimpostando la variabile $ rootScope che ho creato in homeController su "false", ma la mia barra destra non è ancora visibile. Ho potuto vedere che la classe ng-hidden è ancora attiva anche se l'interpollazione ha aggiornato il valore su "true". Ogni suggerimento sarà molto apprezzato.

markup dal layout di pagina:

<aside class="right_bar" ng-hide="{{$root.show}}"> 
     <div class="my-list"><span class="f3">My Cart</span><div class=""><span class="list-count">0</span></div></div><div class="list-item"><ul></ul></div> 
    </aside> 

codice HomeController:

function getHomeConfigsCtrl($http, $location, $rootScope) { 

    $rootScope.show = false; 

    var loc = $location.path(); 

    if (loc === '/Home/Index' || loc ==='') 
    { 
     $rootScope.show = true; 
    } 
    } 

Categorie codice del controller: questo è dove sto reimpostare il valore my $ variabile rootScope

function getAllCategoryDetails($routeParams,$rootScope) { 
    $rootScope.show = false; 
} 

Answer 1

Two le cose sull'angolare che devi sapere per far funzionare il tuo codice presentato:

• Non è necessario interpolare i valori utilizzando {{}} nelle direttive ng, invece usare ng-hide="showCart".

• Assumendo tutti i controller sono all'interno della stessa applicazione angolare, tutti gli ambiti all'interno della stessa applicazione eredita dalla stessa radice, cioè tutto ciò che si definisce sulla $ rootScope sarà a disposizione di tutti gli ambiti bambino. Per accedere a $ rootScope.x da qualsiasi vista nell'applicazione, tutto ciò che devi fare è: {{x}} o nel tuo caso lo stai utilizzando all'interno di una direttiva puoi fare qualcosa di simile:

  <aside class="right_bar" ng-hide="showCart">

  Questo cercherà dell'ambito corrente, se ha uno showCart allora userà, altrimenti sarà recuperare il $ rootScope.showCart