我正在尝试实现一种语言切换器,如果用户在“ en”侧的任何给定页面上单击“ de”,它将带他们进入“ de”侧的该页面。如果我使用console.dir $ state参数,它将使用给定$ state的“当前”属性公开我想要的值。如果我尝试用$ state.current来console.dir $ state.current来关注我想要的值,那么它只会给出父状态属性(我的当前视图是嵌套的)。
我当前的想法是,我在url / en / content上,然后可以动态地让我的lang导航将相应的目标点动态加载到某种数据属性中,并使用自定义指令进行选择,以在其中启动一个“转到”并为每个角度转换设置我的preferredLanguage值。
目前的关键问题是公开$ state名称-同样,当仅浏览$ state时,当前对象将提供我想要的值,但是$ current.state直接仅提供父状态。
如果有人对如何执行此操作有更好的建议(以有角度的方式-没有自定义cookie垃圾),我很乐意接受建议。
谢谢!
更新!代码示例:
我的状态的对象引用:
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中看到的输出是:
使用this.state = $ state;
{ "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