Router ui angolare: come posso ottenere la vista genitore per essere "attiva" quando si naviga nella vista annidata?

StackOverflow https://stackoverflow.com//questions/22054391

Domanda

Sto lavorando a un progetto che ha implementato il router UI e utilizza ui-sref-active="active" per aggiungere la classe attiva alla voce di menu di navigazione quando tale voce è il percorso corrente.Tuttavia, quando si naviga in una vista annidata all'interno di quella vista, la voce del menu principale non è più attiva.Vedi il seguente pinkeer:

http://plnkr.co/edit/2coeds?p=preview .

Per impostazione predefinita (o se fai clic su di esso) Route 1 è "ACTIVE".Quando fai clic su "Mostra elenco", vedrai che la rotta 1 non è più attiva.

Modifica:

L'unica differenza tra questo esempio e il mio progetto effettivo è che il menu di navigazione nel mio progetto effettivo ha il proprio controller e quindi non utilizza la stessa portata del controller per "route1".

È stato utile?

Soluzione

Modifica per UI-router aggiornato 0.2.13:

ui-sref-active="active" Imposta ora la classe 'attiva' quando lo stato corrente è lo stato dell'UI-SRef o qualsiasi figlio

ui-sref-active-eq="active" si comporta come le iterazioni precedenti dell'UI-SREF-attivo e imposta solo la classe per lo stato esatto

Risposta originale:

Vedi problemi di router UI Apri: https://github.com/angular-ui/ui-router/issues/704 e 818

Una soluzione alternativa generale suggerisce che è: 

ng-class="{active:$state.includes('route1')}"
.

Certo, $ Stato deve essere aggiunto a $ ambito.Vedere Aggiornato il sorso: http://plnkr.co/edit/khldjp?p=preview

Altri suggerimenti

Stai avendo una comprensione sbagliata di ui-sref-attive="attivo" 

<li ui-sref-active="active"><a ui-sref="route1">Route 1</a></li>
.

Questo mostrerà una speciale evidenziazione di CSS solo quando si è in stato di stato1 (riferimento https://github.com/angular-ui/ui-router/wiki/quick-reference#wiki-Sreferef-active ). Questo è il caso quando fai clic su Route 1. Ma quando fai clic su "Mostra elenco" non sei più in rotta1. Piuttosto sei in stato "percorso1.list". Puoi verificarlo scrivendo il seguente codice. Questo è rigorosamente per capire come funziona la Stato.

js

Controller interno 

$rootScope.currentState = $state.$current.name //using rootScope so that you can access the variable anywhere inside html
.

Dentro HTML 

{{currentState}}
.

Se si guarda da vicino alla documentazione dell'UI-SREF-Active, non solo guarda il statename ma anche lo Stateparams, quindi quando vai a sostanziarlo non cambia più CSS. Dal sourcecode diventa più chiaro. 

 function update() {
        if ($state.$current.self === state && matchesParams()) {
          $element.addClass(activeClass);
        } else {
          $element.removeClass(activeClass);
        }// route1===route1.list will not be true.
.

Per risolvere il problema, ricordare le variabili dell'ambito sono ereditate in viste nidificate.

All'interno controller del percorso. 

$scope.route1Active = true;
.

in html 

<li ng-class={active:route1Active}><a ui-sref="route1">Route 1</a></li>
.

Ui router angolare ora supporta questo in modo nativo.Vedi commit https://github.com/angular-ui/ui-router/commit/ bf163AD6CE176CE28792696C8302D7CDF5C05A01

La mia soluzione era impostare: 

<li ng-class="{ 'active': state.current.name.indexOf('route1') != -1 }">
.

Lo stato era già stato precedentemente aggiunto all'ambito del controller: 

$scope.state = $state;
.

Non è necessario fare nulla nei controller.Ecco il mio codice di esempio: 

    <ul class="nav nav-pills nav-stacked" role="tablist">
        <li ui-sref-active="active"><a ui-sref="Booking.Step1" href="#/Booking/Step1">Step1</a></li>
        <li ui-sref-active="active"><a ui-sref="Booking.Step2" href="#/Booking/Step2" >Step2</a></li>
        <li ui-sref-active="active"><a ui-sref="Booking.Step3" href="#/Booking/Step3">Step3</a></li>
        <li ui-sref-active="active"><a ui-sref="Booking.Step4" href="#/Booking/Step4">Step4</a></li>
        <li ui-sref-active="active"><a ui-sref="Booking.Step5" href="#/Booking/Step5">Step5</a></li>
    </ul>
.

In Configurazione del percorso: 

$stateProvider.state('Booking', {
        abstract: true,
        url: '/Booking',
        templateUrl: "TourApp/Templates/Booking/SideMenu.html",
        controller: "SideMenuController"
    });

    $stateProvider.state('Booking.Step1', {
        url: "/Step1",
        views: {
            'content': {
                templateUrl: "TourApp/Templates/Booking/Step1.html",
                controller: "Step1Controller"
            }
        }
    });

    $stateProvider.state('Booking.Step2', {
        url: "/Step2",
        views: {
            'content': {
                templateUrl: "TourApp/Templates/Booking/Step2.html",
                controller: "Step2Controller"
            }
        }
    });
.

Ora hanno aggiornato e il modo nuovo per farlo è 

 <a ui-sref-active="{'active': 'main.app.manage.**'}" ui-sref="main.app.manage.people.list"></a>
.

Di seguito è riportato il file di stato 

 angular.module('manage.people', ['people.invite'])
  .config(['$stateProvider', function($stateProvider) {
    $stateProvider
      .state('main.app.manage.people', {
        url: '/people',
        abstract: true,
        cache: false,
        views: {
          'tabContent': {
            template: '<div ui-view="peopleContent"></div>',
            controller: 'peopleController'
          }
        }
      })
      .state('main.app.manage.people.list', {
        url: '/list',
        views: {
          'peopleContent': {
            templateUrl: '/internal/main/app/manage/people/views/people.html',
            controller: 'peopleListController'
          }
        }
      });
.

Abbiamo già una soluzione senza alcun "Hack" qui .

È il modo di fare:

HTML> 

 <li ui-sref-active="active" >
   <a href="#" class="submenu" ui-sref="bands">
       <i class="fa fa-location-arrow" aria-hidden="true"></i>
                     Bands
           <span class="fa fa-chevron-down"></span>
   </a>

   <ul class="nav child_menu">
        <li ui-sref-active="active">
            <a  ui-sref="bands.nirvana">
                 Nirvana   
            </a>
       </li>
       <li ui-sref-active="active">
            <a  ui-sref="bands.iron">
                Iron
            </a>
       </li>
       <li ui-sref-active="active">
            <a  ui-sref="bands.metalica">
                Metalica
            </a>
       </li>           
  </ul>
.

Il nostro router config sarà come questo> 

$stateProvider.state('bands', {
    abstract: true,
    url: '/bands',
    templateUrl: "myapp/categories/template.bands.html", //<ui-view></ui-view> 
    controller: "SomeController as vm"
}).state('bands.nirvana', {
    url: '/nirvana',
    templateUrl: "myapp/categories/band.nirvana.html",
    controller: "SomeController as vm"
}).state('bands.iron', {
    url: '/iron',
    templateUrl: "myapp/categories/band.iron.html",
    controller: "SomeController as vm"
}).state('bands.meatlica', {
    url: '/metalica',
    templateUrl: "myapp/categories/band.metalica.html",
    controller: "SomeController as vm"
})
.

Sono venuto qui 2 anni dopo è stato chiesto la domanda ma angular-ui-router ha un approccio molto esperto per risolvere questo problema.Ha lavorato anche per gli stati annidati. 

<ul>
  <li ui-sref-active="active" class="item">
    <a ui-sref="home">Home</a>
  </li>
  <!-- ... -->
</ul>
.

Quando l'app naviga su home State, questo è il modo in cui verrà visualizzato l'HTML risultante: 

<ul>
  <li ui-sref-active="active" class="item active">
    <a ui-sref="home">Home</a>
  </li>
  <!-- ... -->
</ul>
.

.

UI-SREF-Active Riferimento rapido:

Una direttiva che lavora accanto a UI-SREF per aggiungere classi a un elemento Quando lo stato della direttiva UI-SREF relativo è attivo e la rimozione loro quando è inattivo.L'uso primario è quello di semplificare il Aspetto speciale dei menu di navigazione affidandosi su UI-SREF, avendo Il pulsante del menu "Attivo" dello stato appare diverso, distinguendolo Dalle voci del menu inattivo.

Documentazione completa. .

Spero che questo sia quello che stavi cercando. Posizionare l'URL dei genitori nella classe di elenco, ora ogni volta che vai verso Child Class Class sarà attivo

Step 1: aggiungi un controller per la barra di navigazione Orin il tuo controller esistente in cui è inclusa la barra di navigazione Aggiungi il seguente 

app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
        $scope.isActive = function(destination) {
        return destination === $location.path();
    }

}]);
.

Step2: nella barra di navigazione 

<li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>
.

questo è.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top