12

我正在尝试构建一个视图 - 我已经设置了两个控制器来练习，一个是 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 中指定多个控制器吗？或者构建这个视图的正确方法是什么？

4

5 回答 5

16

我解决这个问题的方法是使用两个指令 - 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

如果你想单独处理它们，你也可以将 header 和 main 封装在单独的 header 和 main 控制器中。

例如

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

或使用模板本身

于 2013-06-28T01:03:45.363 回答
2

您可能想要做的是将您的HeaderCtrl外部放置ng-view然后MainCtrl映射到您的索引路线（即'/'）。如果您需要将多个控制器映射到您的索引路由，您可以在已映射到该路由的模板中分配它们。这就是它的样子：

索引.html

<html>
<body ng-app='yourApp'>
    <div id="header" ng-controller="HeaderCtrl"></div>
    <div ng-view></div>
</body>
</html>

应用程序.js

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

仪表板.html

<div ng-controller="SomeCtrl"></div>
<div ng-controller="SomeOtherCtrl"></div>

...或者，如果您真的想发挥创意，您​​可以ui-router从 AngularUI 人员中加入https://github.com/angular-ui/ui-router这将允许您拥有多个“视图”并将它们映射到您的路线。

于 2013-06-27T23:48:29.243 回答
2

您应该使用 Angular 的 ui-router：https ://github.com/angular-ui/ui-router ，您可以为页面的每个“元素”指定控制器和模板：

myApp.config(function($stateProvider) {
  $stateProvider
    .state('index', {
      url: "",
      views: {
        "viewA": { template: "index.viewA" },
        "viewB": { template: "index.viewB" }
      }
    })
    .state('route1', {
      url: "/route1",
      views: {
        "viewA": { template: "route1.viewA" },
        "viewB": { template: "route1.viewB" }
      }
    })
    .state('route2', {
      url: "/route2",
      views: {
        "viewA": { template: "route2.viewA" },
        "viewB": { template: "route2.viewB" }
      }
    })
});

于 2015-08-28T18:33:15.347 回答
0

我认为您不能指定多个控制器。我认为您正在寻找的是类似于“index.html”模板的东西，它指的是您的标题和仪表板：

<div id='header' ng:controller='HeaderCtrl' />
<div id='main' ng:controller='MainCtrl' />

要实际填写正确的模板，我会使用指令。我认为这是 Angular 最强大的部分之一。您可以创建一个可以在所有页面上重复使用的标题指令。

于 2013-06-27T23:15:19.660 回答
-1

试试这个它应该工作

mainApp.config(function ($routeProvider) {
$routeProvider
   .when('/',
   {
       controller: 'HeaderCtrl',
       templateUrl: 'modules/header.html'
   }).when('',  //route here in the empty quotes
   {
       controller: 'MainCtrl',
       templateUrl: 'modules/dashboard.html'
   });
});
于 2013-09-20T10:56:21.340 回答