How to split view into several controllers in angularjs?

Question

I have one view page with followed structure:

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

The $routeProvider for this page looks like:

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>

All 3 HTMLs have the same scope (a.e. under one controller named 'CntsCtrl').

I want to split scope to 3 controllers.

My problem is if I'll add ng-controller for each HTML (config, map, chart) , the controllers actually will be children of CntsCtrl. And scope hierarchy will be:

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

But I want:

rootScope
          -> ConfigCtrl  
          -> MapCtrl  
          -> ChartCtrl

How can I achieve that?

Thanks,

Stewie · Accepted Answer · 2014-01-26 21:46:40Z

2

Simply omit controller: 'CntsCtrl' part from your route config.

ng-view directive, which is used in pair with $routeProvider, does not require ^source a route to have a controller.

edited Jan 26, 2014 at 21:46

answered Jan 26, 2014 at 21:36

Stewie

60.4k20 gold badges149 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fedaykin · Accepted Answer · 2014-01-26 23:18:28Z

1

I agree with Stewie, remove the controller part from the route, leaving just:

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

And then, in your subsequent htmls you put the controller on each one:

config.html

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

map.html

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

chart.html

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

answered Jan 26, 2014 at 23:18

Fedaykin

4,5723 gold badges25 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to split view into several controllers in angularjs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related