Отображение текущего имени состояния с помощью маршрутизатора ui

Я пытаюсь реализовать языковой коммутатор, где, если пользователь нажимает "de" на любой странице со стороны "en", он берет их на эту страницу со стороны "de". Если я console.dir параметр $state, он предоставляет значения, которые я хочу, с "текущим" свойством данного состояния $. Если я попытаюсь выполнить console.dir $state.current, чтобы сосредоточиться на значениях, которые я хочу, он дает только свойство родительского состояния (мои текущие представления вложены).

Мое текущее мышление заключается в том, что я на url/en/content, и динамически я могу затем использовать мою навигацию по языку, динамически загружая соответствующие точки назначения в какой-то атрибут данных, выбирая их с помощью настраиваемой директивы, d инициируйте "перейти" и установите значение моего предпочтительного языка для angular -трансляции.

Ключевой вопрос на данный момент заключается в том, что это имя $state - опять же, когда просто просматривается $state, текущий объект дает значения, которые я хочу, но $current.state напрямую дает только родительское состояние.

Если у кого-то есть лучшее предложение о том, как это сделать (в angular способе - без специального мусора cookie), я рад принять предложения.

Спасибо!

Update! КОДЫ ОБРАЗЦОВ:

Ссылка на объекты моих состояний:

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
}

Ответы

Ответ 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

Ответ 2

Ответ на ваш вопрос в этом формате довольно сложный.

С другой стороны, вы спрашиваете о навигации, а затем о текущем $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

 

ScreenCap

imgur

Ответ 3

В моем текущем проекте решение выглядит так:

Я создал абстрактное языковое состояние

$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

Ответ 5

Я обернулся вокруг $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);
    });

  }
})();