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

Question

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

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

以及状态“state1”的“partials/state1.html”的控制器：

.controller('State1Ctrl', function () {

});

是否有任何内置功能可以从控制器内或模板内确定控制器/模板与什么状态关联？

例如：

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

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

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

Answer 1

找不到任何地方的文件，所以我看了源代码。

有一个名为$ uiview的数据字段，附加到ui视图元素，它包含视图名称和关联状态。您可以如此获得此状态：

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

.

甚至是

elem.inheritedData('$uiView').state

.

Answer 2

您可以访问如下所示的当前状态configuratin对象：

$state.current

.

对于更多信息，请查看 $ state文档。

Answer 3

您可以按照以下操作，

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

.

Answer 4

我们可以看到 什么 定义为 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. 。而且，根据我的经验，我不记得有任何情况，当我需要知道这些信息......希望现在更清楚一点

Answer 5

如果您正在查找当前状态名称，$ State.Current.name

，则非常有用

Answer 6

不确定它是相同的版本，但在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.router.state 。$ state

Answer 7

从您的代码中的“”框中“控制器，显示状态：

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

.

Answer 8

如果要检查当前状态

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

如果要检查当前状态名称

的名称

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