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

如果您想单独处理它们，也可以将标题和主文件封装在单独的标题和主控制器中。

e.g。

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

或使用模板本身

Answer 2

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

<强>的index.html

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

<强> app.js

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

<强> dashboard.html

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

...或者，如果您真的想要发挥创意，可以在AngularUI人员https://github.com/angular-ui/ui-router中添加ui-router。这样您就可以拥有多个“视图”并将其映射到您的路线。

Answer 3

你应该使用有角度的ui-router：https://github.com/angular-ui/ui-router，你可以为每个＆＃34;元素指定一个控制器和模板＆＃34;你的网页：

＆＃13;

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" }
      }
    })
});

＆＃13;

Answer 4

我认为你不能指定多个控制器。我认为您所寻找的内容类似于指向您的标题和信息中心的'index.html'模板：

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

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

Answer 5

试试这个应该有效

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'
   });
});

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

5 个答案: