Mostrare e nascondere usando $ rootscope

Question

Ho una barra di ricerca nel mio modello index.html che ho bisogno di nascondere su alcune pagine. Sto usando ui-router e $state.

L'unico modo per eseguire questa operazione è iniettare $rootscope in tutti i miei controller su ng-hide: true o false per attivarli o disattivarli, se necessario. (Ho davvero bisogno di nascondermi su 1 o 2 pagine)

Non penso che questo sia il modo corretto di farlo poiché tutti i miei controller ora sono dipendenti e iniettati su $rootscope.

C'è un altro modo per farlo?

Answer 1

Iniziamo con un esempio di controller globale GlobalCtrl che viene aggiunto al tag body o html come ng-controller="GlobalCtrl.

Facendo questo ci consentirà di mantenere la portata di questo GlobalCtrl per tutta la singola pagina app angolare (come si utilizza ui-router) e siamo in grado di evitare l'utilizzo di $rootScope (in realtà simulando l'utilizzo di $rootScope).

Ora, all'interno del vostro GlobalCtrl definire qualcosa di simile:

// Using an object to avoid the scope inheritance problem of Angular 
// https://github.com/angular/angular.js/wiki/Understanding-Scopes 
$scope.globalData = {showSearchBar: true}; 

// This callback will be called everytime you change a page using ui-router state 
$scope.$on('$stateChangeStart', function(event, toState, toParams) { 
    $scope.globalData.showSearchBar = true; 

    // Just check for your page where you do not want to display the search bar 
    // I'm using just an example like I don't want to display in contac-us page named state 
    if (toState.name == 'contact-us' || toParams.foo == "bar") { 
     $scope.globalData.showSearchBar = false; 
    } 
}); 

Ora, nella vostra index.html, basta usare ng-show:

<div ng-show="globalData.showSearchBar"> 
    <input type="text" ng-model="query" /> 
</div> 

Answer 2

Per esempio

<div ng-controller="SearchCtrl"> 
<div ng-if="show"> 
... 
</div> 
</div> 

app.controller('SearchCtrl', ['$state', '$scope', function($state, $scope) { 
    $scope.show = !$state.is('someState1') && !$state.is('someState2'); 
} 

Questo non è che un buon stile, ma sarà semplicemente funziona.

Answer 3

Non mi piace andare avanti con un controller, I pensa che sia meglio separare ogni parte della tua applicazione in un modo che non dipende da un altro controller.

userò un servizio per condividere i dati:

'use strict'; 

angular.module('yourModule') 
    /** 
     A service used to share resources between controllers 
    */ 
    .factory('Shared', [function() { 
     var resources = {}; 

     resources.targetList = []; 
     resources.isVisibleDivA = true; 
     resources.isVisibleDivB = false; 

     return resources; 
    }]); 

In questo modo, iniettando il servizio che sarà sempre in grado di interagire con le variabili di stato necessari per formattare correttamente il layout.

Se si desidera riutilizzare un controller, è sufficiente aggiungere un servizio di simulazione e non è necessario dipendere da un controller.

Answer 4

In ui-router è possibile utilizzare abstract states per creare gerarchie. In questo modo puoi avere una route genitore che ha la vista nella barra di ricerca e un'altra che non lo fa. Tutti i tuoi percorsi reali possono ereditare da questi due e hai finito.

Qualcosa di simile

$stateProvider 
.state('rootLayout', { 
    abstract: true, 
    // Note: abstract still needs a ui-view for its children to populate. 
    // You can simply add it inline here. 
    template: '<div><div ui-view="topbar"></div><div ui-view></div></div>' 
}) 
.state('searchbarLayout', { 
    abstract: true, 
    views: { 
     '@rootLayout': { 
      // Note: abstract still needs a ui-view for its children to populate. 
      // You can simply add it inline here. 
      template: '<div ui-view></div>' 
     }, 
     'topbar@rootLayout': { 
      template: '<input type="search" />' 
     }, 
    }  
}); 

Answer 5

È possibile accedere a $ rootScope dal modello utilizzando $root nell'espressione.Come:

<div ng-show="$root.appSettings.flag"> 
    <span>Hello!</span> 
</div> 

Answer 6

ho registrato l'oggetto nella funzione di esecuzione delle app

.run([ '$rootScope', function ($rootScope) { 
    $rootScope.searchBar = { value: true }; 
}]) 

poi utilizzato lo scopo di modificare il valore. Ciò arresta l'aggiunta di $ rootscope in ogni controller

$scope.searchBar.value = false; 

Impostare il valore nella pagina index.html

<div ng-show="searchBar.value" ng-include src="'app/shared/search.html'"></div>