javascript - 使用 Angular UI 路由器 $stateProvider 在状态上声明主 Controller

Question

我刚刚开始使用 UI 路由器，主要是因为能够声明嵌套状态和命名 View 。

以下是我如何配置两者组合的简化示例:

$stateProvider.state("page", {
  abstract: true,
  templateUrl: "page.html"
})
.state("page.stream", {
  url: "/stream",
  controller: "StreamCtrl",
  views: {
    content: {
      templateUrl: "stream-content.html"
    },
    header: {
      templateUrl: "stream-header.html"
    }
  }
})
.state("page.notifications", {
  url: "/notifications",
  controller: "NotifsCtrl",
  views: {
    content: {
      templateUrl: "notifs-content.html"
    },
    header: {
      templateUrl: "notifs-header.html"
    }
  }
})

我已将 page View 声明为抽象，因为它的唯一目的是保存另外两个 View ，即变量 header 和 content，旁边的导航是跨页面静态的。

<!-- page.html -->
<nav>...</nav>
<div ui-view="header"></div>
<div ui-view="content"></div>

模板中的路由和插入按预期工作，导航到 /stream 或 /notifications 时导航保持静态，并且标题和内容 View 发生变化。但是，在 page.stream 和 page.notifications 上声明的 Controller 不会启动。

我的第一个直觉是，在状态配置的 View 对象旁边声明一个 Controller 将导致在整个页面上设置 Controller ，以便标题和内容将共享 Controller 的$scope。

在 page 状态上声明 Controller 可以实现此目的，但使用 controllerProvider 无法让我访问足够的信息来决定使用哪个 Controller :

$stateProvider.state("page", {
  abstract: true,
  templateUrl: "page.html",
  controllerProvider: function ($stateParams) {
    // How do I know which state I am in, notifications or stream?
    return ???
  }
})

在声明 View 名称时，我尝试使用不同的符号(绝对/相对)，并且我在以下方面取得了一些成功:

$stateProvider.state("page.stream", {
  url: "/stream",
  views: {
    // I understand that this targets the parent page which holds both header and content
    "@": {
      controller: "StreamController"
    },
    page: {...}
    header: {...}
  }
})

这确实在整个页面上设置了 StreamController，但会导致两个模板都丢失，就好像 page.html 从未加载过一样。

我应该在每个页面子状态上的哪里设置 Controller ，以便子状态中的每个 View 共享 Controller 的 $scope？

Answer 1

我也无法初始化 Controller 。您可以拥有stream.html和notifs.html以及ng-include模板。我可以看到，如果页面中混有常见和不常见的部分，会很烦人

 .state("page", {
   abstract: true,  
   controller: 'PageCtrl'     
   templateUrl: 'page.html',    
  })
.state("page.stream", {
  url: "/stream",
  controller: 'StreamCtrl',
  templateUrl: 'stream.html'  
})
.state("page.notifications", {
  url: "/notifications",
  controller: 'NotifsCtrl',
  templateUrl: 'notifs.html'
  })


<!-- page.html -->
<nav>...</nav>
<div ui-view></div>

<!-- stream.html-->
<span>stream-header</span>
<div ng-include='"commonthings.html"'></div>
<span>stream-content.html</span>

<!-- notifs.html-->
<span>notifs-header</span>
<div ng-include='"commonthings.html"'></div>
<span>notifs-content.html</span>

每个 Controller 都正确初始化