Question

我有一个视图页面，其结构如下：

==============================================
| Config   |       Map        |       Charts |
===============================================
|          |                  |              | 
|          |                  |              |

此页面的$routeProvider如下所示：

var app = angular.module('cntsApp', ['ngRoute', 'ui.bootstrap','LocalStorageModule']); 

app.config(['$routeProvider', function($routeProvider) {
                $routeProvider.when('/mapboard/',
                  {templateUrl: 'app/partials/cnts.html', 
                    controller: 'CntsCtrl'});                
        }]);

cnts.html：

<div ng-include=" '/app/partials/config.html' "></div>

<div ng-include=" '/app/partials/map.html' "></div>

<div ng-include=" '/app/partials/chart.html' "></div>

所有3个HTML都具有相同的范围（例如，在一个名为'CntsCtrl'的控制器下。）

我想将范围拆分为3个控制器。

我的问题是，如果我为每个HTML（配置，地图，图表）添加ng-controller，控制器实际上将是CntsCtrl的子项。范围层次结构将是：

rootScope 
          -> CntsCtrl
                      -> ConfigCtrl  
                      -> MapCtrl  
                      -> ChartCtrl

但我想：

rootScope
          -> ConfigCtrl  
          -> MapCtrl  
          -> ChartCtrl

我怎样才能做到这一点？

谢谢，

Answer 1

只需在路由配置中省略controller: 'CntsCtrl'部分即可。

ng-view指令，与$ routeProvider配对使用，does not require ^source是一个拥有控制器的路由。

Answer 2

我同意Stewie的意见，从路线中删除控制器部分，只留下：

app.config(['$routeProvider', function($routeProvider) {
                $routeProvider.when('/mapboard/',
                  {templateUrl: 'app/partials/cnts.html'});                
}]);

然后，在随后的htmls中，你将控制器放在每一个上：

config.html

<div ng-controller="ConfigCtrl">
    <!-- Stuff -->
</div>

map.html

<div ng-controller="MapCtrl">
    <!-- Stuff -->
</div>

chart.html

<div ng-controller="ChartCtrl">
    <!-- Stuff -->
</div>

如何将视图拆分为angularjs中的几个控制器？

2 个答案: