在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>

或模板本身