javascript - Exposing the current state name with ui router -


i'm trying implement language switcher if user clicks on "de" given page on "en" side - takes them page of "de" side. if console.dir $state parameter, exposes values i'd want "current" property of given $state. if try console.dir $state.current focus on values want, gives parent state property (my current views nested).

my current thinking is, i'm on url/en/content, , dynamically can have lang navigation dynamically load appropriate destination points kind of data attribute, pick custom directive i'd initiate "go to" , set preferedlanguage value per angular-translate.

the key issue @ moment exposing $state name - again, when browsing $state current object gives values i'd want, $current.state directly gives parent state.

if has better suggestion of how (in angular way - no custom cookie junk) i'm happy take suggestions.

thanks!

update! code samples:

object reference of 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, output see in 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 } 

this how 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


Comments