Question

我尝试使用多个ui-views设置相当复杂的页面设计。我已将其提取到一个plunker（http://plnkr.co/edit/DwridY）。

我有一个主要的ui-view，其中加载了几个可能的模板。其中一些模板有多个自己的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");
}

我被抛出错误：

没有这样的状态＆＃39; task.list＆＃39;。

谁能看到我出错的地方？

Answer 1

一般情况下 - 如果状态名称中有. （点） - UI-Router希望它意味着：

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

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

缺少州"task"或
声明"tasks.list" （父级将存在＆＃34;任务＆＃34;而不是＆＃34;任务＆＃34;）

这是updated and working plunker，我决定将任务用作父级：

.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嵌套视图抛出错误：没有这样的状态

1 个答案: