51

我正在尝试实现一个语言切换器，如果用户从“en”端的任何给定页面单击“de”，它会将他们带到“de”端的那个页面。如果我 console.dir 使用 $state 参数，它会使用给定 $state 的“当前”属性公开我想要的值。如果我尝试 console.dir $state.current 来关注我想要的值，它只会给出父状态属性（我当前的视图是嵌套的）。

我目前的想法是，我在 url/en/content 上，然后我可以动态地让我的 lang 导航将适当的目标点动态加载到某种数据属性中，使用自定义指令来选择那些我会启动的“转到”并为每个角度翻译设置我的首选语言值。

目前的关键问题是暴露 $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
}
4

6 回答 6

82

我就是这样做的

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

于 2014-08-19T05:03:38.280 回答
9

以这种格式回答您的问题非常具有挑战性。

另一方面，您询问导航，然后询问当前的$state行为都很奇怪。

首先我会说这个问题太宽泛了，而第二个我会说......好吧，你做错了什么或错过了明显的:)

 

采取以下控制器：

app.controller('MainCtrl', function($scope, $state) {
  $scope.state = $state;
});

其中app配置为：

app.config(function($stateProvider) {
  $stateProvider
    .state('main', {
        url: '/main',
        templateUrl: 'main.html',
        controller: 'MainCtrl'
    })
    .state('main.thiscontent', {
        url: '/thiscontent',
        templateUrl: 'this.html',
        controller: 'ThisCtrl'
    })
    .state('main.thatcontent', {
        url: '/thatcontent',
        templateUrl: 'that.html'
    });
});

然后是简单的 HTML 模板

<div>
  {{ state | json }}
</div>

将“打印”例如以下内容

{ 
  "params": {}, 
  "current": { 
    "url": "/thatcontent", 
    "templateUrl": "that.html", 
    "name": "main.thatcontent" 
  }, 
  "transition": null
}

我举了一个小例子来展示这个，使用ui.router和pascalprecht.translate菜单。我希望你发现它很有用，并找出你做错了什么。

Plunker 在这里http://plnkr.co/edit/XIW4ZE

 

屏幕截图

图片

于 2014-08-18T21:14:30.070 回答
5

在我当前的项目中，解决方案如下所示：

我创建了一个抽象的语言状态

$stateProvider.state('language', {
    abstract: true,
    url: '/:language',
    template: '<div ui-view class="lang-{{language}}"></div>'
});

项目中的每个状态都必须依赖于这个状态

$stateProvider.state('language.dashboard', {
    url: '/dashboard'
    //....
});

语言切换按钮调用自定义函数：

<a ng-click="footer.setLanguage('de')">de</a>

相应的函数如下所示（当然是在控制器内部）：

this.setLanguage = function(lang) {
    FooterLog.log('switch to language', lang);
    $state.go($state.current, { language: lang }, {
        location: true,
        reload: true,
        inherit: true
    }).then(function() {
        FooterLog.log('transition successfull');
    });
};

这可行，但是有一个更好的解决方案，只需从 html 更改状态参数中的值：

<a ui-sref="{ language: 'de' }">de</a>

不幸的是，这不起作用，请参阅https://github.com/angular-ui/ui-router/issues/1031

于 2014-08-22T07:49:35.983 回答
3

使用超时

$timeout(function () { console.log($state.current, 'this is working fine'); }, 100);

见 - https://github.com/angular-ui/ui-router/issues/1627

于 2016-10-05T19:08:19.810 回答
1

我绕了$state一圈$timeout，它对我有用。

例如，

(function() {
  'use strict';

  angular
    .module('app')
    .controller('BodyController', BodyController);

  BodyController.$inject = ['$state', '$timeout'];

  /* @ngInject */
  function BodyController($state, $timeout) {
    $timeout(function(){
      console.log($state.current);
    });

  }
})();
于 2016-07-15T16:52:48.080 回答
0

只是因为加载时间角度需要给你当前状态。

如果您尝试使用$timeout函数获取当前状态，那么它将为您提供正确的结果$state.current.name

$timeout(function(){
    $rootScope.currState = $state.current.name;
})
于 2018-01-08T10:12:34.610 回答