AngularJS ui-Router Nested Views throwing error: No Such State

Question

我正在尝试设置具有多个 ui 视图的相当复杂的页面设计。我已经将它提取到 plunker (http://plnkr.co/edit/DwridY)。

我有一个 ui 主视图，其中加载了几个可能的模板。这些模板中有几个有自己的多个 ui 视图，例如：

<h1>Workflows</h1>
<div class="well">
    <div ui-view="workflow.list"></div>
 </div>
 <div class="well">
    <div ui-view="workflow.details"></div>
 </div>

angular 配置列出如下状态：

  .state('tasks', {
    url: "/tasks",
    views: {
      "mainView": {
        templateUrl: "tasks.html",
        controller: "TaskController"
      }
    }
  })      
  .state("task.list", {
    url: "/taskList",
    views: {
      "task.list": {templateUrl: "task.list.html"},
    }
  })  
  .state("workflow", {
    url: "/workflows",
    views: {
      "mainView": {
        templateUrl: "workflow.html",
        controller: "WorkflowController"
      }
    }
  })
  .state("workflow.list", {
    url: "/workflowsList",
    views: {
      "workflow.list": {templateUrl: "workflow.list.html"},
      "workflow.details": {templateUrl: "workflow.details.html"}
    }
  });

问题在于它适用于工作流状态及其子视图，但不适用于任务状态。

当我打电话时：

function TaskController($scope, $state) {
   $state.transitionTo("task.list");
}

我被抛出一个错误：

No such state 'task.list'.

谁能看出我错在哪里？

Answer 1

一般来说 - 如果州名称中有 . （点） - UI-Router 预计它的意思是：

在最后一个 点之前 - parent 名称 （parents 如果更多点）
最后一个点之后 - 当前状态名称

所以，我们上面遇到的 "task.list" 是

缺少状态 "task" 或
声明 "tasks.list" （parent 将存在 "tasks" 而不是 "task"）

这是 updated and working plunker，我决定将任务用作 parent:

.state('tasks', {
    url: "/tasks",
    views: {
      "mainView": {
        templateUrl: "tasks.html",
        controller: "TaskController"
      }
    }
})      
//.state("task.list", {
.state("tasks.list", { // here we inherit from "tasks" not "task"
    url: "/taskList",
    views: {
      "task.list": {templateUrl: "task.list.html"},
    }
})

AngularJS ui-Router Nested Views throwing error: No Such State

AngularJS ui-Router Nested Views throwing error: No Such State

state

nested

angularjs

angular-ui-router