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" />

单击Shared时，应加载workarea.shared的视图（选项，工作区和注释），当单击Private时，应加载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 - 基于click控制多个视图

1 个答案: