Angular UI-Router从视图中获取当前状态

时间:2022-03-04 11:23:40

Considering the following states taken from the ui-router documentation:

考虑从ui-router文档中获取的以下状态:

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

And the controller for "partials/state1.html" for state "state1":

状态“state1”的“partials / state1.html”控制器:

.controller('State1Ctrl', function () {

});

Is there any built-in feature to determine from within the controller or within the template, what state the controller/template is associated with?

是否有任何内置功能可以在控制器内或模板内确定控制器/模板与哪种状态相关联?

For example:

例如:

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

And if there is no built-in solution, how would you "decorate" $state or $stateParams, to contain this information?

如果没有内置解决方案,您将如何“装饰”$ state或$ stateParams来包含此信息?

The only solution I've come up with is to use $state.get() and then find the state with the controller or template value. This seems incredibly messy, though.

我想出的唯一解决方案是使用$ state.get()然后使用控制器或模板值查找状态。不过,这看起来非常混乱。

6 个解决方案

#1


9  

Couldn't find this documented anywhere, so I looked in the source code.

无法在任何地方找到此文档,因此我查看了源代码。

There is a data field named $uiView attached to the ui-view element, it contains the view name and the associated state. You can get this state like this:

有一个名为$ uiView的数据字段附加到ui-view元素,它包含视图名称和关联状态。你可以这样得到这样的状态:

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

or even

甚至

elem.inheritedData('$uiView').state

#2


50  

You can access the current state configuratin object like this:

您可以像这样访问当前状态configuratin对象:

$state.current

For further information take a look at the $state documentation.

有关详细信息,请查看$ state文档。

#3


25  

You can do it as follow,

你可以这样做,如下

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

#4


5  

We can see what is defined for current state, using the $state.current, check this example showing:

我们可以看到为当前状态定义的内容,使用$ 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"
}

the controller:

控制器:

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

  $scope.current = $state.current

});

check that here

检查一下

EXTEND: The above example will always return current state - i.e. if there is hierarchy of three states and we access the last state ('state1.list.detail') directly:

EXTEND:上面的示例将始终返回当前状态 - 即,如果存在三个状态的层次结构,并且我们直接访问最后一个状态('state1.list.detail'):

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

Each controller will be provided with the same state: $state("state1.list.detail").

每个控制器将提供相同的状态:$ state(“state1.list.detail”)。

Why? beause this state has enough information what are all the views (hierarchically nested) and their controllers needed. We can observe that all in the

为什么?因为这个状态有足够的信息所有的视图(分层嵌套)及其所需的控制器。我们可以观察到所有的一切

$state.$current // not .current

Quickly discussed here cite:

这里快速讨论引用:

In addition, users can attach custom decorators, which will generate new properties within the state's internal definition. There is currently no clear use-case for this beyond accessing internal states (i.e. $state.$current), however, expect this to become increasingly relevant as we introduce additional meta-programming features.

此外,用户可以附加自定义装饰器,这将在州内部定义中生成新属性。除了访问内部状态(即$ state。$ current)之外,目前还没有明确的用例,但是,随着我们引入额外的元编程功能,预计这将变得越来越重要。

BUT: there is NO way, how to get information from current controller instance, to which $state it belongs! Even any iterations, searching through some $state.get('stateName') will be unreliable, because simply there is no kept relation that way. One controller Class could be used for many views as different Instances. And also, from my experience, I do not remember any case, when I needed to know such information... wish now it is a bit more clear

但是:没有办法,如何从当前控制器实例获取信息,它所属的$ state!即使是任何迭代,搜索一些$ state.get('stateName')都是不可靠的,因为这样就没有保持关系。一个控制器类可以作为不同的实例用于许多视图。而且,根据我的经验,我不记得任何情况,当我需要知道这些信息时...现在希望它更清楚一点

#5


3  

This is useful if you are looking for Current state name, $state.current.name

如果您要查找当前状态名称$ state.current.name,这将非常有用

#6


0  

Not sure it is the same version, but on 0.3.1 you can use this to get the current state:

不确定它是否是相同版本,但在0.3.1上你可以使用它来获取当前状态:

$state.$current.name

And to perform a check:

并执行检查:

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

Documentation: https://ui-router.github.io/ng1/docs/0.3.1/index.html#/api/ui.router.state.$state

文档:https://ui-router.github.io/ng1/docs/0.3.1/index.html#/api/ui.router.state.$state

#1


9  

Couldn't find this documented anywhere, so I looked in the source code.

无法在任何地方找到此文档,因此我查看了源代码。

There is a data field named $uiView attached to the ui-view element, it contains the view name and the associated state. You can get this state like this:

有一个名为$ uiView的数据字段附加到ui-view元素,它包含视图名称和关联状态。你可以这样得到这样的状态:

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

or even

甚至

elem.inheritedData('$uiView').state

#2


50  

You can access the current state configuratin object like this:

您可以像这样访问当前状态configuratin对象:

$state.current

For further information take a look at the $state documentation.

有关详细信息,请查看$ state文档。

#3


25  

You can do it as follow,

你可以这样做,如下

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

#4


5  

We can see what is defined for current state, using the $state.current, check this example showing:

我们可以看到为当前状态定义的内容,使用$ 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"
}

the controller:

控制器:

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

  $scope.current = $state.current

});

check that here

检查一下

EXTEND: The above example will always return current state - i.e. if there is hierarchy of three states and we access the last state ('state1.list.detail') directly:

EXTEND:上面的示例将始终返回当前状态 - 即,如果存在三个状态的层次结构,并且我们直接访问最后一个状态('state1.list.detail'):

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

Each controller will be provided with the same state: $state("state1.list.detail").

每个控制器将提供相同的状态:$ state(“state1.list.detail”)。

Why? beause this state has enough information what are all the views (hierarchically nested) and their controllers needed. We can observe that all in the

为什么?因为这个状态有足够的信息所有的视图(分层嵌套)及其所需的控制器。我们可以观察到所有的一切

$state.$current // not .current

Quickly discussed here cite:

这里快速讨论引用:

In addition, users can attach custom decorators, which will generate new properties within the state's internal definition. There is currently no clear use-case for this beyond accessing internal states (i.e. $state.$current), however, expect this to become increasingly relevant as we introduce additional meta-programming features.

此外,用户可以附加自定义装饰器,这将在州内部定义中生成新属性。除了访问内部状态(即$ state。$ current)之外,目前还没有明确的用例,但是,随着我们引入额外的元编程功能,预计这将变得越来越重要。

BUT: there is NO way, how to get information from current controller instance, to which $state it belongs! Even any iterations, searching through some $state.get('stateName') will be unreliable, because simply there is no kept relation that way. One controller Class could be used for many views as different Instances. And also, from my experience, I do not remember any case, when I needed to know such information... wish now it is a bit more clear

但是:没有办法,如何从当前控制器实例获取信息,它所属的$ state!即使是任何迭代,搜索一些$ state.get('stateName')都是不可靠的,因为这样就没有保持关系。一个控制器类可以作为不同的实例用于许多视图。而且,根据我的经验,我不记得任何情况,当我需要知道这些信息时...现在希望它更清楚一点

#5


3  

This is useful if you are looking for Current state name, $state.current.name

如果您要查找当前状态名称$ state.current.name,这将非常有用

#6


0  

Not sure it is the same version, but on 0.3.1 you can use this to get the current state:

不确定它是否是相同版本,但在0.3.1上你可以使用它来获取当前状态:

$state.$current.name

And to perform a check:

并执行检查:

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

Documentation: https://ui-router.github.io/ng1/docs/0.3.1/index.html#/api/ui.router.state.$state

文档:https://ui-router.github.io/ng1/docs/0.3.1/index.html#/api/ui.router.state.$state