我正在尝试建立一个视图-我设置了两个控制器进行练习,一个是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中指定多个控制器吗?还是构建此视图的正确方法是什么?
我对这个问题的解决方法是有两个指令-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>
或模板本身