Exposer l'état actuel nom de l'interface utilisateur du routeur

Je suis en train de mettre en œuvre une langue switcher où, si un utilisateur clique sur "de" à partir d'une page donnée sur un "en" côté il les prend à la page du "de" de côté. Si j'ai de la console.dir le $paramètre d'état, il expose les valeurs que je veux avec le "courant" de la propriété de la donnée $état. Si j'essaie de la console.dir $de l'état.courant de se concentrer sur les valeurs que je veux, il ne donne que le parent propriété de l'etat (mes points de vue actuels sont imbriquées).

Actuel de ma réflexion, je suis sur l'url/fr/contenu, et dynamique, je peux avoir mon lang navigation de charge dynamique de la destination appropriée points en une sorte d'attribut de données, choisir ceux avec un custom directive où j'avais lancer un "aller à" et de configurer ma preferedLanguage valeur par angular-translate.

L'essentiel de la question à l'heure actuelle est d'exposer que $nom de l'état - encore une fois, quand tout simplement naviguer sur $état de l'objet en cours donne les valeurs que je veux, mais $courant.etat donne à l'état parent.

Si quelqu'un a une meilleure suggestion de la façon de le faire (dans un angulaire moyen - aucun témoin indésirable) je suis heureux de répondre à vos suggestions.

Merci!

Mise à jour! DES EXEMPLES DE CODE:

Référence de l'objet de mes états:

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'
            }

        };

Mes États:

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

        $locationProvider.html5Mode(true);

})

Contrôleur:

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

Et Enfin, la sortie je vois dans les dom:

Avec cette.etat = $état;

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

Avec cette.etat = $état.actuel

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

Quelque chose n'est pas clair pour moi. Vous avez besoin d'accéder à $state.$current.name, mais ne peut la voir lorsque vous déboguez dans console?
Si oui, vous pouvez garder une trace de l' $état de l' $rootScope, et assigner un contrôleur pour chaque enfant de l'état: controller: function($rootScope, $scope) { $rootScope.state = $scope.$state; }
Merci pour les réponses, le problème est que $état (lors de débogage dans la console) montre que le "courant" de la propriété comme un objet contenant les propriétés adéquates pour l'affichage imbriqué je suis sur. Cependant, lorsque j'essaie t journal de la console $état.actuel.nom de la console précédente journal a montré la valeur correcte - je seulement obtenir le nom du parent $état.
Jetez un oeil à ng-translate qui est faite spécialement pour les sites en plusieurs langues: github.com/angular-translate/angular-translate

InformationsquelleAutor motleydev | 2014-08-18

78

c'est comment je le fais

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>
```
EXEMPLE

http://plnkr.co/edit/LGMZnj?p=preview
- Pourquoi les $rootScope.$state = $state; $rootScope.$stateParams = $stateParams; si?
- Pour la rendre disponible dans le monde entier à n'importe quel champ.
- Il est déjà disponible dans le monde entier par injection en cas de besoin. Pas besoin d'utiliser $rootScope pour elle.
- Si vous devez explicitement injecter partout où vous en avez besoin, n'est donc pas "déjà disponible dans le monde entier" XD.
InformationsquelleAutor rnrneverdies
9

De répondre à votre question dans ce format est assez difficile.

D'autre part, vous demander à propos de la navigation, puis sur l'actualité de l' $state de qualité de tout bizarre.

Pour la première, je dirais que c'est trop vaste question et pour la deuxième, je dirais... eh bien, vous faites quelque chose de mal ou manquant à l'évidence 🙂

Prendre le contrôleur suivant:
```
app.controller('MainCtrl', function($scope, $state) {
  $scope.state = $state;
});
```
Où app est configuré comme:
```
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'
    });
});
```
Alors simple modèle HTML ayant
```
<div>
  {{ state | json }}
</div>
```
Serait "imprimer" par exemple, à la suite de
```
{ 
  "params": {}, 
  "current": { 
    "url": "/thatcontent", 
    "templateUrl": "that.html", 
    "name": "main.thatcontent" 
  }, 
  "transition": null
}
```
J'ai mis un petit exemple montrant ce, à l'aide de ui.router et pascalprecht.translate pour les menus. J'espère que vous le trouverez utile et découvrir qu'est-ce que vous faites mal.

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

Screencap
- "vous faites quelque chose de mal ou manquant à l'évidence" - une très sage déduction à partir de l'état de ma question. 🙂 Je vais essayer de trouver cela ici. Je mets à jour ma réponse avec des exemples de code. Le problème est que Lorsque je passe l' $état de l'objet à la fin de devant - je vois que mon idéal de vie à $état.actuel.nom - si j'essaie d'accéder à qui, par exemple, envoyer la valeur spécifique à l'extrémité avant avec $état.de la valeur.nom-je obtenir le nom de la mère de l'etat de ne pas le sous-état. Mais assez parler, voir ci-dessus à nouveau pour un peu de code. 🙂
InformationsquelleAutor Mikko Viitala

Dans mon projet actuel, la solution ressemble à ceci:

J'ai créé un Langage abstrait de l'État

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

Chaque état dans le projet qui dépendent de cet état

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

La langue boutons de commutation des appels d'une fonction personnalisée:

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

Et la fonction correspondante ressemble à ceci (à l'intérieur d'un contrôleur de cours):

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');
    });
};

Cela fonctionne, mais il y a une meilleure solution de la modification d'une valeur dans l'état params de html:

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

Malheureusement cela ne fonctionne pas, voir https://github.com/angular-ui/ui-router/issues/1031

InformationsquelleAutor paul

3

Utiliser Délai D'Attente
```
$timeout(function () { console.log($state.current, 'this is working fine'); }, 100);
```
Voir - https://github.com/angular-ui/ui-router/issues/1627
- Vous pouvez omettre le retard... $timeout(function() { console.log($state.current); });
InformationsquelleAutor AVI

J'ai enroulé autour $state autour de $timeout et il a travaillé pour moi.

Par exemple,

(function() {
  'use strict';

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

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

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

  }
})();

Cela n'a travaillé que pour moi, lorsque j'ai mis mon délai de 500 ms, en vertu de 200ms journaux de la console quelque chose d'autre, comme dans la question d'origine. Cela semble une solution approximative à moi, même si il fonctionne

InformationsquelleAutor poke19962008

0

Ses juste à cause du temps de chargement angulaire faut pour vous donner l'état actuel.

Si vous essayez d'obtenir de l'état actuel en utilisant $timeout fonction puis il vous donnera un résultat correct dans $state.current.name
```
$timeout(function(){
    $rootScope.currState = $state.current.name;
})
```
InformationsquelleAutor Gaurav Aggarwal

Vous devez vous connecter pour publier un commentaire.