Angular JS - 根据点击控制多个视图

Question

还有我的router.js

$stateProvider.state("workarea", {
  url: "/",
  templateUrl: "/templates/workarea.html",
  requireLogin: true
}).state("workarea.shared", {
  url: "/workarea",
  controller: "workareaSharedCtrl",
  requireLogin: true,
  views: {
    "options": {
      templateUrl: "/views/options.html"
    },
    "workspace": {
      templateUrl: "/views/workspace.html"
    }
  }
}).state("workarea.user", {
  url: "/:username",
  controller: "workareaUserCtrl",
  requireLogin: true,
  views: {
    "options": {
      templateUrl: "/views/options.html"
    },
    "workspace": {
      templateUrl: "/views/workspace.html"
    },
    "comments": {
      templateUrl: "/views/comments.html"
    }
  }
})

这是/templates/workarea.html

<a ui-sref="workarea.shared">Shared</a>
<a ui-sref="workarea.user">Private</a>
<div ui-view="options" />
<div ui-view="workspace" />

单击共享时，应加载 workarea.shared 的视图（选项、工作区和注释），单击私有时，应加载 workarea.user 的视图（选项、工作区）。

我在这里错过了什么？

Answer 1

有a working version

有两个问题。首先，<div>不能自闭，所以这是对父模板的修正

<div>      
  <a ui-sref="workarea.shared">Shared</a>
  <a ui-sref="workarea.user">Private</a>
  <!--
  <div ui-view="options" />
  <div ui-view="workspace" />
  -->
  <div ui-view="options" ></div>
  <div ui-view="workspace" ></div>
</div>

此外，控制器属于视图（如果有更多定义，甚至属于每个视图）不声明：

...
.state("workarea.shared", {
      url: "/workarea",
      // NOT here - controller belongs to view
      //controller: "workareaSharedCtrl",
      requireLogin: true,
      views: {
        "options": {
          templateUrl: "views/options.html",
          controller: "workareaSharedCtrl",   // here should be definition 
        },
        ...

检查一下here

Angular JS - 根据点击控制多个视图

Angular JS - Control multiple views based on click

angularjs

angular-ui

angular-ui-router