AngularJS UI-маршрутизатор получает текущее состояние из представления

StackOverflow https://stackoverflow.com//questions/25040304

  •  21-12-2019
  •  | 
  •  

Вопрос

Учитывая следующие состояния, взятые из документации ui-router:

.state('state1', {
  url: '/state1',
  templateUrl: 'partials/state1.html'
  controller: 'State1Ctrl'
})
.state('state1.list', {
  url: '/list',
  templateUrl: 'partials/state1.list.html',
})

И контроллер для "partials/state1.html" для государства "state1":

.controller('State1Ctrl', function () {

});

Существует ли какая-либо встроенная функция для определения изнутри контроллера или внутри шаблона, с каким состоянием связан контроллер / шаблон?

Например:

.controller('State1Ctrl', function ($state) {
  console.log($state.this); // state1
});

И если нет встроенного решения, как бы вы "украсили" $state или $stateParams, чтобы содержать эту информацию?

Единственное решение, которое я придумал, - это использовать $state.get(), а затем найти состояние с помощью значения контроллера или шаблона.Однако это кажется невероятно запутанным.

Это было полезно?

Решение

не смог найти это документально в любом месте, поэтому я посмотрел в исходный код.

Существует поле данных, названное $ UIView, прикрепленное к элементу UI-вида, он содержит имя просмотра и связанное состояние.Вы можете получить это состояние, как это:

elem.closest('[ui-view]').data('$uiView').state
.

или даже

elem.inheritedData('$uiView').state
.

Другие советы

Вы можете получить доступ к текущему состоянию Configureatin Object:

$state.current
.

Для получения дополнительной информации посмотрите на $ Государственная документация .

Вы можете сделать это, как следует,

$state.current.name //Return the name of current state
.

Мы можем видеть что определяется для current государство, использующее $state.current, проверьте это пример показывающий:

state1
{
  "url": "/state1",
  "template": "<div>state1 <pre>{{current | json }}</pre><div ui-view=\"\"></div> </div>",
  "controller": "State1Ctrl",
  "name": "state1"
}
list
{
  "url": "/list",
  "template": "<div>list <pre>{{current | json }}</pre></div>",
  "controller": "State1Ctrl",
  "name": "state1.list"
}

контроллер:

.controller('State1Ctrl', function($scope, $state) {

  $scope.current = $state.current

});

проверьте это здесь

РАСШИРЯТЬ:Приведенный выше пример всегда будет возвращать текущее состояние , т. е.если существует иерархия из трех состояний и мы получаем доступ к последнему состоянию ('state1.list.detail') непосредственно:

<a ui-sref="state1.list.detail({detailId:1})">....

Каждому контроллеру будет предоставлено одинаковое состояние:$state("state1.list.detail").

Почему?поскольку в этом состоянии достаточно информации о том, какие все представления (иерархически вложенные) и их контроллеры необходимы.Мы можем наблюдать, что все в

$state.$current // not .current

Быстро обсуждается здесь процитировать:

Кроме того, пользователи могут прикреплять пользовательские декораторы, которые будут генерировать новые свойства во внутреннем определении состояния.В настоящее время для этого нет четкого варианта использования, кроме доступа к внутренним состояниям (т. е. $state.$current), однако ожидайте, что это будет становиться все более актуальным по мере того, как мы будем внедрять дополнительные функции метапрограммирования.

НО:нет НИКАКОГО способа, как получить информацию из текущего контроллер instance, к которому $state это принадлежит!Даже любые итерации, поиск по некоторым $state.get('stateName') будет ненадежным, потому что просто нет сохраняемой связи таким образом.Один контроллер Class может быть использован для многих видов как отличающийся Instances.А также, по своему опыту, я не помню ни одного случая, когда мне нужно было знать такую информацию...хотелось бы, чтобы теперь это стало немного более понятным

Это полезно, если вы ищете текущее имя состояния, $ State.Courent.name

Не уверены, что это та же версия, но на 0,3.1 вы можете использовать это, чтобы получить текущее состояние:

$state.$current.name
.

и для выполнения проверки:

$state.is('contact.details.item');
.

Документация: https:// ui-Router.github.io/ng1/docs/0.3.1/index.html#/api/ui.rooter.state . $ State

Работа « контроллер из вашего кода, который показывает состояние:

.controller('State1Ctrl', function ($state) {
    console.log("Current State: ", $state.current.name);
});
.

Если вы хотите проверить текущее состояние

console.log("state", $state.current)

Если вы хотите проверить имя текущего имени состояния

console.log("statename", $state.current.name)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top