Как разделить вид на несколько контроллеров в angularjs?

У меня есть одна страница с последующей структурой:

==============================================
| 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:

Все 3 HTML имеют одинаковую область (ae под одним контроллером с именем 'CntsCtrl').

Я хочу разделить область на 3 контроллера.

Моя проблема в том, что я добавлю ng-controller для каждого HTML (config, map, chart), контроллеры на самом деле будут CntsCtrl элементами CntsCtrl. Иерархия области будет:

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

Но я хочу:

rootScope
 -> ConfigCtrl 
 -> MapCtrl 
 -> ChartCtrl

Как я могу это достичь?

Благодаря,

2 ответа

Просто опустите controller: 'CntsCtrl' из конфигурации вашего маршрута.

Директива ng-view, которая используется в паре с $ routeProvider, не требует от источника маршрута иметь контроллер.


Я согласен с 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>

licensed under cc by-sa 3.0 with attribution.