在多个控制器的angularjs中路由？

Question

我正在尝试构建一个视图 - 我已经设置了两个控制器来练习,一个是HeaderCtrl,里面有一些数据(网站标题,标题背景等),另一个应该有页面的主要内容 - MainCtrl.

在定义路线时,我这样做:

mainApp.config(function ($routeProvider) {
$routeProvider
   .when('/',
   {
       controller: 'MainCtrl',
       templateUrl: 'modules/dashboard.html'
   })
})

这非常好用,但我想要的是为此指定多个参数,如下所示:

mainApp.config(function ($routeProvider) {
$routeProvider
   .when('/',
   {
       controller: 'HeaderCtrl',
       templateUrl: 'modules/header.html'
   },
   {
       controller: 'MainCtrl',
       templateUrl: 'modules/dashboard.html'
   })
})

这不起作用所以我猜它不是这样做的方法.我实际上在问什么 - 你能在$ routeProvider中指定多个控制器吗？或者构建此视图的正确方法是什么？

Answer 1

我解决这个问题的方法是有两个指令 - header和main引用相应的模板.

例如:

app.directive('header', function () {
  return {
    restrict: 'A',
    replace: true,
    templateUrl:'templates/header.html'
  }
})

然后你可以有一个包含指令的页面 - index.html.

<div header></div>
<div main></div>

然后有一个路由到index.html的控制器

如果要单独处理它们,还可以将标题和主文件封装在单独的标题和主控制器中.

例如

<div ng-controller="HeaderCtrl">
    <div header></div>
</div>
<div ng-controller="MainCtrl">
    <div main></div>
</div>

或者使用模板本身