一尘不染

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

angularjs

我正在尝试实现一种语言切换器,如果用户在“ 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
}

阅读 266

收藏
2020-07-04

共1个答案

一尘不染

这就是我的方法

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

2020-07-04