Domanda Esporre il nome dello stato corrente con il router ui


Sto tentando di implementare un selettore di lingua in cui se un utente fa clic su "de" da una determinata pagina su un lato "en", li porta a quella pagina del lato "de". Se console.dir il parametro $ state, espone i valori che vorrei con la proprietà "current" dello stato $ dato. Se provo a console.dir il $ state.current per focalizzarmi sui valori che voglio, fornisce solo la proprietà dello stato genitore (le mie viste attuali sono annidate).

Il mio attuale pensiero è che sono su url / en / content, e dinamicamente posso quindi avere la mia navigazione lang caricare dinamicamente i punti di destinazione appropriati in qualche tipo di attributo dati, selezionarli con una direttiva personalizzata in cui inizierei a "vai a" e imposta il mio valore di lingua preferito per angolare-tradurre.

Il problema chiave al momento è quello di esporre quel nome $ stato - di nuovo, quando si sfoglia semplicemente $ stato l'oggetto corrente fornisce i valori desiderati, ma $ current.state fornisce solo direttamente lo stato genitore.

Se qualcuno ha un suggerimento migliore su come fare questo (in modo angolare - nessun junk cookie personalizzato) sono felice di prendere suggerimenti.

Grazie!

Aggiornare! CAMPIONI DI CODICE:

Riferimento dell'oggetto dei miei stati:

var urlStates = {
        en: {
            home: {
                name: 'home',
                url: '/en',
                templateUrl: 'templates/'+lang+'/home.html',
                abstract: 'true'
            },
            home_highlights: {
                name:'home.highlights',
                url: '',
                templateUrl: 'templates/'+lang+'/home.highlights.html'
            },
            home_social:
            {
                name: 'home.social',
                url: '/social',
                templateUrl: 'templates/'+lang+'/home.social.html'
            },
            home_map:
            {
                name: 'home.map',
                url: '/map',
                templateUrl: 'templates/'+lang+'/home.map.html'
            }

        };

I miei Stati:

$stateProvider
        .state(urlStates.en.home)
        .state(urlStates.en.home_highlights)
        .state(urlStates.en.home_social)
        .state(urlStates.en.home_map);

        $locationProvider.html5Mode(true);

})

controller:

.controller('LandingPage', function($translate, $state){
    this.state = $state;
    this.greeting = "Hello";
});

E infine, l'output che vedo nella dom:

Con this.state = $ state;

{
    "params": {},
    "current": {
        "name": "home.highlights",
        "url": "",
        "templateUrl": "templates/en/home.highlights.html" },
        "transition": null
}

Con this.state = $ state.current

{
    "name": "",
    "url": "^",
    "views": null,
    "abstract": true
}

41
2017-08-18 19:35


origine


risposte:


questo è come lo faccio

Javascript:

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

module.run( ['$rootScope', '$state', '$stateParams',
                      function ($rootScope,   $state,   $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams; 
}
]);

HTML:

<pre id="uiRouterInfo">
      $state = {{$state.current.name}}
      $stateParams = {{$stateParams}}
      $state full url = {{ $state.$current.url.source }}    
</pre>

ESEMPIO

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


74
2017-08-19 05:03



Rispondere alla tua domanda in questo formato è abbastanza impegnativo.

D'altra parte chiedi informazioni sulla navigazione e poi sulla corrente $state comportandosi in modo strano

Per prima cosa direi che è una domanda troppo ampia e per il secondo direi ... beh, stai facendo qualcosa di sbagliato o mancando l'ovvio :)

Prendi il seguente controller:

app.controller('MainCtrl', function($scope, $state) {
  $scope.state = $state;
});

Dove app è configurato come:

app.config(function($stateProvider) {
  $stateProvider
    .state('main', {
        url: '/main',
        templateUrl: 'main.html',
        controller: 'MainCtrl'
    })
    .state('main.thiscontent', {
        url: '/thiscontent',
        templateUrl: 'this.html',
        controller: 'ThisCtrl'
    })
    .state('main.thatcontent', {
        url: '/thatcontent',
        templateUrl: 'that.html'
    });
});

Quindi ha un semplice template HTML

<div>
  {{ state | json }}
</div>

Sarebbe "stampato" ad es. il seguente

{ 
  "params": {}, 
  "current": { 
    "url": "/thatcontent", 
    "templateUrl": "that.html", 
    "name": "main.thatcontent" 
  }, 
  "transition": null
}

Ho messo un piccolo esempio che mostra questo, usando ui.router e pascalprecht.translate per i menu. Spero che lo trovi utile e capisca che cosa stai sbagliando.

Plunker qui http://plnkr.co/edit/XIW4ZE

Screenshot


imgur


8
2017-08-18 21:14



Nel mio attuale progetto la soluzione si presenta così:

Ho creato uno stato di lingua astratto

$stateProvider.state('language', {
    abstract: true,
    url: '/:language',
    template: '<div ui-view class="lang-{{language}}"></div>'
});

Ogni stato nel progetto deve dipendere da questo stato

$stateProvider.state('language.dashboard', {
    url: '/dashboard'
    //....
});

I pulsanti di cambio lingua chiamano una funzione personalizzata:

<a ng-click="footer.setLanguage('de')">de</a>

E la funzione corrispondente appare come questa (all'interno di un controller, ovviamente):

this.setLanguage = function(lang) {
    FooterLog.log('switch to language', lang);
    $state.go($state.current, { language: lang }, {
        location: true,
        reload: true,
        inherit: true
    }).then(function() {
        FooterLog.log('transition successfull');
    });
};

Funziona, ma c'è una soluzione migliore cambiando semplicemente un valore nei parametri di stato da html:

<a ui-sref="{ language: 'de' }">de</a>

Sfortunatamente questo non funziona, vedi https://github.com/angular-ui/ui-router/issues/1031


4
2017-08-22 07:49



Usa Timeout

$timeout(function () { console.log($state.current, 'this is working fine'); }, 100);

Vedi - https://github.com/angular-ui/ui-router/issues/1627


3
2017-10-05 19:08



Mi sono aggrappato $state in giro $timeout e ha funzionato per me.

Per esempio,

(function() {
  'use strict';

  angular
    .module('app')
    .controller('BodyController', BodyController);

  BodyController.$inject = ['$state', '$timeout'];

  /* @ngInject */
  function BodyController($state, $timeout) {
    $timeout(function(){
      console.log($state.current);
    });

  }
})();

1
2017-07-15 16:52



È solo perché il tempo di caricamento angolare richiede di darti lo stato corrente.

Se si tenta di ottenere lo stato corrente usando $timeout funzione quindi ti darà risultato corretto in $state.current.name

$timeout(function(){
    $rootScope.currState = $state.current.name;
})

0
2018-01-08 10:12