Exposing the current state name with ui router

Question

I'm trying to implement a language switcher where if a user clicks on "de" from any given page on an "en" side - it takes them to that page of the "de" side. If I console.dir the $state parameter, it exposes the values I'd want with the "current" property of the given $state. If I try to console.dir the $state.current to focus on the values I want, it only gives the parent state property (my current views are nested).

My current thinking is, I'm on url/en/content, and dynamically I can then have my lang navigation dynamically load the appropriate destination points into some kind of data attribute, pick those up with a custom directive where I'd initiate a "go to" and set my preferedLanguage value per angular-translate.

The key issue at the moment is exposing that $state name - again, when simply browsing $state the current object gives the values I'd want, but $current.state directly only gives the parent state.

If anyone has a better suggestion of how to do this (in a angular way - no custom cookie junk) I'm happy to take suggestions.

Thanks!

Update! CODE SAMPLES:

Object reference of my states:

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

My States:

$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"; }); 

And Lastly, the output I see in the dom:

With this.state = $state;

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

With this.state = $state.current

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

Answer 1

this is how I do it

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> 

EXAMPLE

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

Answer 2

Answering your question in this format is quite challenging.

On the other hand you ask about navigation and then about current $state acting all weird.

For the first I'd say it's too broad question and for the second I'd say... well, you are doing something wrong or missing the obvious :)

 

Take the following controller:

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

Where app is configured as:

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

Then simple HTML template having

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

Would "print out" e.g. the following

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

I put up a small example showing this, using ui.router and pascalprecht.translate for the menus. I hope you find it useful and figure out what is it you are doing wrong.

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

 

Screencap

---