在路由的angularjs控制器复式？ [英] Routing in angularjs for mutliple controllers?

问题描述

我是一个初学者步入angularjs并试图环绕它我的头。

I'm a beginner stepping into angularjs and trying to wrap my head around it.

基本上我试图建立一个看法 - 我已经设置了两个控制器来练习，一个人的HeaderCtrl，里面有一些数据（网站的标题，标题背景等），其他应具备的主要内容页面 - MainCtrl

Basically I'm trying to build a view - I've set up two controllers to practice, one's HeaderCtrl, with some data in it (site title, header background, etc), the other should have the main content of the page - MainCtrl.

在确定的路线，我在做，像这样：

When defining the route, I'm doing like so:

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

这工作完全正常，但我想是指定多个参数这一点，是这样的：

This works perfectly fine, but what I would want is to specify multiple parameters to this, something like this:

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

这不工作，所以我猜它不这样做的方式。什么实际上，我问 - 你可以指定$ routeProvider多个控制器？或者，这将是建立这一观点的正确方法是什么？

This doesn't work so I'm guessing it's not the way to do it. What I'm actually asking - can you specify multiple controllers in $routeProvider ? Or what would be the correct way to build this view ?

推荐答案

我的办法解决这个问题是有两个指令 - 头和主引用该模板的相应

My approach to this problem would be to have two directives - header and main which reference the corresponding templates.

例如：

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

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

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

然后让有一个控制器路线您的index.html

Then have one controller that routes to your index.html

您还可以，如果要单独处理它们封装在单独的头和主控制器的标题和主。

You can also encapsulate the header and main in separate header and main controllers if you want to deal with them separately.

例如

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

或模板本身

这篇关于在路由的angularjs控制器复式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！