How to set dynamically a controller in HTML from JS with the controller name?

Question

I have a view like follow :

<html ng-app="app" ng-controller="mainController">[...]
<body ng-controller="currentController">[...]

I'd like to be able to set the body controller from a variable ($scope.currentController) of an upper controller (mainController). The controller mainController looks like follow :

angular.module("app").controller("mainController", function($scope) {
    $scope.currentController = "indexController"; // 'indexController' being the name of the controller I want to apply to the view
});

This doesn't work obviously, how can I set a controller dynamically from JS to the view ?

EDIT : (to @mrhobo answer)

I tried this, giving the fact that I have one file per controller :

angular.module("app").controller("mainController", function($scope, indexController) {
    $scope.currentController = indexController;
});

I got this error : Doc Angular error

Is it acceptable to move the mainController to the html tag instead to achieve a parent-child relationship? — tasseKATT
– tasseKATT, Commented Dec 7, 2014 at 15:13
mainController is here to manage the controller used by the website. It can be indexController for the home page or appController for the application page. This two controllers do not manage the same things. I've tried to put them both on mainController, it works fine, but I have errors on my console because I have references to elements that doesn't exist in each one of them. That's why I'd prefer that mainController choose the one to apply depending on the page used. But in the code shown, I just show the basic idea of what I'd like to do : set a controller from JS using its name. — Elfayer
– Elfayer, Commented Dec 7, 2014 at 15:25
I already have an ng-view inside the body. (see the answer, I have replied to you) I know I could use ng-include/ng-if/ng-show/ng-hide/ng-switch,... but I'd like to avoid to have to copy the whole body twice... — Elfayer
– Elfayer, Commented Dec 7, 2014 at 15:37
It's solvable if it's acceptable to move the mainController to the html tag so that the controller on body is a child controller to mainController. Let me know if this is acceptable or not. — tasseKATT
– tasseKATT, Commented Dec 7, 2014 at 15:38

Lodewijk Bogaards · Accepted Answer · 2014-12-07 15:49:25Z

1

Simply point to the controller's constructor function.

$scope.currentController = indexController;

Example: http://jsfiddle.net/2thj6zdk/

answered Dec 7, 2014 at 15:49

Lodewijk Bogaards

20k3 gold badges30 silver badges54 bronze badges

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

3 Comments

Elfayer Over a year ago

Looks like it is working ! =) But how can I get the constructor function of Ctrl1 in Main controller if I have different files for each controller ? I get : docs.angularjs.org/error/$injector/…

Lodewijk Bogaards Over a year ago

Just make sure the constructor is globally scoped like in the example.

Elfayer Over a year ago

How do I do that properly? I have one file per controller. (I edited my quastion)

Collectives™ on Stack Overflow

How to set dynamically a controller in HTML from JS with the controller name?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related