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

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

$state.current

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

Answer 2

你可以这样做,如下

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

Answer 3

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

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

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

甚至

elem.inheritedData('$uiView').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

});

检查一下

EXTEND:上面的示例将始终返回当前状态 - 即,如果存在三个状态的层次结构,并且我们'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.而且,根据我的经验,我不记得任何情况,当我需要知道这些信息时...现在希望它更清楚一点