使用 ui 路由器公开当前状态名称 [英] Exposing the current state name with ui router
问题描述
我正在尝试实现一个语言切换器,如果用户从en"端的任何给定页面点击de" - 它会将他们带到de"端的那个页面.如果我将 $state 参数设置为 console.dir,它会使用给定 $state 的当前"属性公开我想要的值.如果我尝试将 $state.current 的 console.dir 放在我想要的值上,它只会给出父状态属性(我当前的视图是嵌套的).
我目前的想法是,我在 url/en/content 上,然后我可以动态地让我的 lang 导航将适当的目标点动态加载到某种数据属性中,并使用自定义指令在我的位置选择它们d 启动转到"并为每个角度翻译设置我的首选语言值.
目前的关键问题是暴露 $state 名称 - 同样,当简单地浏览 $state 时,当前对象给出我想要的值,但 $current.state 直接只给出父状态.
如果有人对如何执行此操作有更好的建议(以有角度的方式 - 没有自定义 cookie 垃圾),我很乐意接受建议.
谢谢!
更新!代码示例:
我的状态的对象引用:
var urlStates = {zh: {家: {name: '家',网址: '/en',templateUrl: 'templates/'+lang+'/home.html',摘要:'真实'},home_highlights:{name:'home.highlights',网址:'',templateUrl: 'templates/'+lang+'/home.highlights.html'},家庭_社会:{name: 'home.social',网址:'/社会',templateUrl: 'templates/'+lang+'/home.social.html'},家_地图:{name: 'home.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 = "你好";});
最后,我在 dom 中看到的输出:
with this.state = $state;
<代码>{参数":{},当前的": {"name": "home.highlights","网址": "","templateUrl": "templates/en/home.highlights.html" },过渡":空}
使用 this.state = $state.current
<代码>{姓名": "","url": "^",意见":空,抽象":真实}
我就是这样做的
JAVASCRIPT:
var module = angular.module('yourModuleName', ['ui.router']);module.run( ['$rootScope', '$state', '$stateParams',函数($rootScope,$state,$stateParams){$rootScope.$state = $state;$rootScope.$stateParams = $stateParams;}]);
HTML:
$state = {{$state.current.name}}$stateParams = {{$stateParams}}$state 完整网址 = {{ $state.$current.url.source }}
例子
http://plnkr.co/edit/LGMZnj?p=preview
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
}
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
这篇关于使用 ui 路由器公开当前状态名称的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!