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

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

我目前的想法是，我在url/en/content上，然后动态地让我的lang navigation动态地将适当的目的地点加载到某种数据属性中，用一个自定义指令拾取这些点，在这里我启动一个“go to”并设置每个角度翻译的首选语言值

目前的关键问题是公开$state名称——同样，当简单地浏览$state时，当前对象会给出我想要的值，但是$current.state直接只给出父状态

如果有人对如何做到这一点有更好的建议（从角度看——没有定制的饼干垃圾），我很乐意接受建议

谢谢

更新！代码示例：

我国的对象参照：

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";
});

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

最后，我在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
}

---

用这种方式回答你的问题是相当有挑战性的

另一方面，您询问导航，然后询问当前

$state

的行为是否怪异

---

第一个我会说这是一个太宽泛的问题，第二个我会说。。。好吧，你做错了什么，或者错过了显而易见的：）

以以下控制器为例：

.controller('LandingPage', function($translate, $state){
    this.state = $state;
    this.greeting = "Hello";
});

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>

我举了一个小例子来说明这一点，使用菜单的

ui.router

和

pascalprecht.translate

。我希望你觉得它有用，并找出你做错了什么

这里是普朗克

纱帽

---

我就是这样做的

JAVASCRIPT:

var module = angular.module('yourModuleName', ['ui.router']);

module.run( ['$rootScope', '$state', '$stateParams',
                      function ($rootScope,   $state,   $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams; 
}
]);

HTML:

$state={{$state.current.name}
$stateParams={{$stateParams}}
$state full url={{$state.$current.url.source}

范例

---

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

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

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

语言开关按钮调用自定义函数：

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

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

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

---

我把
$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);
    });

  }
})();

使用超时

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

请参阅-
这只是因为加载时间的角度需要为您提供当前状态

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

$timeout(function(){
    $rootScope.currState = $state.current.name;
})

有些事我不清楚。您需要访问
$state.$current.name
，但只有在
控制台中调试时才能看到它。如果是这样，您可以跟踪$rootScope中的$state，并为每个子状态分配一个控制器：
控制器：函数（$rootScope，$scope）{$rootScope.state=$scope.$state；}
感谢您的回答-问题在于$state（在控制台中调试时）将“current”属性显示为一个对象，其中包含我所在嵌套视图的正确属性。但是，当我尝试t console log$state.current.name时（从上一个控制台日志中显示正确的值），我只得到父级$state的名称。请看一看专门为使用多种语言的站点设计的
ng translate
：“您做错了什么，或者忽略了明显的错误”-从我的问题状态中得出的非常明智的推论。：）我在这里想办法解决这个问题。我正在用一些代码示例更新我的答案。问题是，当我将$state对象传递到前端时——我看到我的理想值位于$state.current.name——如果我尝试访问它，比如说，使用$state.value.name将特定值发送到前端，我得到的是父状态的名称，而不是嵌套状态。但是-说得够多了，请再次参阅上面的部分代码。：）为什么
$rootScope.$state=$state$rootScope.$stateParams=$stateParams虽然？@ChanandlerBong可以使它在任何范围内全局可用。通过在需要的地方注入它，它已经全局可用了。无需使用$rootScope。@Angelin，如果您需要在任何需要的地方显式注入它，那么它不是“已经全局可用”XD。这只在我将超时设置为500毫秒左右时起作用，在200毫秒以下，控制台日志与原始问题类似。对我来说，这似乎是一个模糊的解决方案，即使你可以忽略延迟<代码>$timeout（函数（）{console.log（$state.current）；}）现在可以工作了

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

$timeout(function(){
    $rootScope.currState = $state.current.name;
})