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