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
Comments
Post a Comment