用ui路由器公开当前状态名称

我试图实现一个语言切换器,如果用户从“en”端的任何给定页面点击“de”,它将把它们带到“de”端的那个页面。 如果我console.dir $状态参数,它暴露了我想要的值与给定的$状态的“当前”属性。 如果我尝试console.dir $ state.current专注于我想要的值,它只会给父状态属性(我当前视图嵌套)。

我目前的想法是,我在URL / EN /内容,dynamic我可以让我的郎导航dynamic地加载到适当的目的地点的某种数据属性,挑选那些自定义指令,我会发起一个“去”并设置我的首选angular度翻译的语言价值。

现在的关键问题是暴露$状态名称 – 再次,当浏览$状态当前对象给出我想要的值,但$ current.state直接只给父状态。

如果任何人有一个更好的build议,如何做到这一点(有针对性的 – 没有定制cookies垃圾),我很乐意采取build议。

谢谢!

更新! 代码样本:

我的状态的对象引用:

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

我的国家:

 $stateProvider .state(urlStates.en.home) .state(urlStates.en.home_highlights) .state(urlStates.en.home_social) .state(urlStates.en.home_map); $locationProvider.html5Mode(true); }) 

控制器:

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

最后,我在dom中看到的结果是:

有了这个状态= $状态;

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

使用this.state = $ state.current

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

这是我如何做到的

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> 

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

以这种格式回答你的问题是相当具有挑战性的。

另一方面,你问导航,然后关于目前的$state行事都怪异。

对于第一个我会说这是太宽泛的问题,第二我会说…呃,你做错了什么或错过显而易见的:)

拿下面的控制器:

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

哪里的app被configuration为:

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

那么简单的HTML模板就有了

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

会“打印出”如下

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

我举了一个小例子,使用ui.routerpascalprecht.translate显示菜单。 我希望你觉得它有用,并弄清楚你做错了什么。

Plunker在这里http://plnkr.co/edit/XIW4ZE

撷取画面


imgur

在我目前的项目中,解决scheme如下所示:

我创build了一个抽象的语言状态

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

项目中的每个州都必须依赖这个状态

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

语言切换button调用一个自定义函数:

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

而相应的function就像这样(当然是在一个控制器里面):

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

这工作,但有一个更好的解决scheme,只是改变从HTML的状态参数值:

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

不幸的是,这不起作用,请参阅https://github.com/angular-ui/ui-router/issues/1031

使用超时

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

请参阅 – https://github.com/angular-ui/ui-router/issues/1627

我围绕$timeout包装$state ,它为我工作。

例如,

 (function() { 'use strict'; angular .module('app') .controller('BodyController', BodyController); BodyController.$inject = ['$state', '$timeout']; /* @ngInject */ function BodyController($state, $timeout) { $timeout(function(){ console.log($state.current); }); } })();