揭露与UI路由器的当前状态的名字 [英] Exposing the current state name with ui router

问题描述

我想实现一个语言切换器，如果用户点击德，其中从任何给定页面上的EN的一面 - 它需要他们的德的一面页面。如果我console.dir在$状态参数，它暴露了我会用给定的$状态的当前的属性需要的值。如果我尝试console.dir的$ state.current把重点放在我想要的价值，它不仅赋予了父国家财产（我目前的看法是嵌套的）。

我现在的想法是，我对URL / EN /内容，并动态然后我可以有我的郎导航相应的目标点动态地加载到某种类型的数据属性，挑选那些与自定义指令，我' ð启动去，并设置按我的preferedLanguage值角转换。

目前的关键问题是暴露了$州名 - 再次，当只是浏览$状态当前对象给我想要的值，但$ current.state直接只给父状态

如果任何人有如何做到这一点更好的建议（在一个角度的方式 - 没有自定义的cookie垃圾），我很高兴把建议

。

谢谢！

更新！ code示例：

我的状态对象引用：

  VAR urlStates = {
        恩：{
            家庭：{
                名称：'家'，
                网址：'/ EN，
                templateUrl：'模板/+郎咸平+'/ home.html做为'，
                摘要：真
            }，
            home_highlights：{
                名称：'home.highlights'，
                网址：''，
                templateUrl：'模板/+郎咸平+'/ home.highlights.html
            }，
            home_social：
            {
                名称：'home.social'，
                网址：'/社会，
                templateUrl：'模板/+郎咸平+'/ home.social.html
            }，
            home_map：
            {
                名称：'home.map'，
                网址：'/图，
                templateUrl：'模板/+郎咸平+'/ 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（真）;}）
 

控制器：

  .controller（'的LandingPage'，函数（$翻译，$州）{
    this.state = $状态;
    this.greeting =你好;
}）;
 

和最后，输出I在DOM中看到：

使用this.state = $状态;

  {
    PARAMS：{}，
    当前：{
        名：home.highlights
        URL：，
        templateUrl：模板/ EN / home.highlights.html}，
        转型：空
}
 

使用this.state = $ state.current

  {
    名称： ，
    URL：^，
    意见：空，
    抽象：真
}
 

解决方案

这是我要做的事。

JavaScript的：

  VAR模块= angular.module（'yourModuleName'，['ui.router']）;module.run（['$ rootScope'，'$州'，'$ stateParams'，
                      功能（$ rootScope，$状态，$ stateParams）{
    $ rootScope $状态= $状态。
    $ rootScope $ stateParams = $ stateParams。
}
]）;
 

HTML

 ＆LT; pre ID =uiRouterInfo＆GT;
      $状态= {{$ state.current.name}}
      $ stateParams = {{$ stateParams}}
      $状态完整URL = {{$状态。$ current.url.source}}
＆LT; / pre＆GT;
 

例如：

http://plnkr.co/edit/LGMZnj?p=$p$pview

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屋！