From an AngularJS controller, how do I resolve another controller function defined in the module (dynamic ng-controller)?

Question

Self explanatory fiddle: http://jsfiddle.net/5FG2n/6/

I need to dynamically choose the controller to use at runtime based on its name as a string. The string will be read from a config object.

In the code below I currently have InnerCtrlAsLocalVariable assigned to $scope.dynamicCtrl. How instead do I assign InnerCtrlFromModule to the property?

View:

<div ng-app='app' ng-controller='OuterCtrl'>
    <div ng-controller='dynamicCtrl'>
        {{message}}
    </div>
</div>

JS:

var InnerCtrlAsLocalVariable = ['$scope',
    function($scope) {
        $scope.message = 'from controller as local variable - do not want'
    }
];

angular.module('app', []) 

    .controller('OuterCtrl', ['$scope', 

        function($scope) {
            // Instead of doing this...
            $scope.dynamicCtrl = InnerCtrlAsLocalVariable;

            // ...I want to do something like this:
            // $scope.dynamicCtrl = resolveCtrl('InnerCtrlFromModule');                                               
        }
    ])

    .controller('InnerCtrlFromModule', ['$scope',
        function($scope) {
            $scope.message = 'from controller defined in module - want';
        }
    ]);

Why do need a controller to be assigned to variable? You share data through service. — Fizer Khan, Jan 18 '14 at 13:01
Even though i really do not understand the purpose, You can choose dynamic template(inner-local-template.html, inner-module-template.html') instead of choosing dynamic controller. — Fizer Khan, Jan 18 '14 at 13:14
This is not for sharing data, this is so I can dynamically choose the controller at runtime. — Mike Chamberlain, Jan 18 '14 at 13:15
I am already choosing the template dynamically using by binding the src property on ng-include. But the same template might use different controllers in different circumstances. Therefore, I need to avoid hard coding the controller name into the template. — Mike Chamberlain, Jan 18 '14 at 13:16
I could not find a way to inject or resolve a controller dynamically. — Fizer Khan, Jan 18 '14 at 13:41
I think another solution could be writing a custom directive like `ng-dynamic-controller`, inside that directive, we can use ngTransclude and compile the template. I'll try to create a demo — Khanh TO, Jan 18 '14 at 14:15

score 8 · Accepted Answer · edited May 23 '17 at 12:23

8

You could try writing custom directive:

.directive("ngDynamicController",function($compile){
        return {
            terminal: true, 
            priority: 1000,
            link:function(scope,element,attr){
                var controllerProperty = scope[attr.ngDynamicController];
                element.attr('ng-controller', controllerProperty);
                element.removeAttr("ng-dynamic-controller"); 
                $compile(element)(scope);
            }
        }
    })

If you need more information why we have to add terminal: true and priority: 1000. Check out my answer to this question: Add directives from directive in AngularJS

DEMO

You could try injecting it as a value:

angular.module('app', [])
        .value('InnerCtrl',InnerCtrlAsLocalVariable)
        .controller('OuterCtrl', ['$scope','InnerCtrl', 
        function($scope, InnerCtrl) { //inject the value into the function
            $scope.dynamicCtrl = InnerCtrl;                                          
        }
    ])

DEMO

Or use $injector to resolve dynamically:

var InnerCtrlAsLocalVariable = ['$scope',
            function($scope) {
                $scope.message = 'from controller defined in module - want';
            }
        ]

    angular.module('app', [])
        .value('InnerCtrl',InnerCtrlAsLocalVariable)
        .controller('OuterCtrl', ['$scope','$injector', 
            function($scope, $injector) { //inject the $injector service.

                // resolve the value dynamically
                $scope.dynamicCtrl = $injector.get('InnerCtrl');

            }
        ])

        .controller('InnerCtrlFromModule', InnerCtrlAsLocalVariable)

DEMO

You can use $controller service to create the controller instance dynamically, from that instance we can retrieve the constructor function using constructor property

 angular.module('app', [])
        .controller('OuterCtrl', ['$scope','$controller', 
            function(scope, $controller) {

                scope.dynamicCtrl = $controller('InnerCtrlFromModule',{$scope:scope.$new()}).constructor;

            }
        ])

        .controller('InnerCtrlFromModule',['$scope', function($scope) {
                $scope.message = 'from controller defined in module - want';
            }])

DEMO

edited May 23 '17 at 12:23

Community

1
1

answered Jan 18 '14 at 13:05

Khanh TO

48,509
13
99
115

This is a cut down version of my code. I want to dynamically choose the controller at runtime based on its name as a string. The controller name will be read from configuration. There could be, say, ten different controllers. I don't want to have to inject all of them. Further, if the controller is not defined using the controller() method, then how do unit test it using the $controller service while still using the minification-proof syntax? – Mike Chamberlain Jan 18 '14 at 13:13
I think, $injector only works with provide, not on controller. Your example works since you expose controller as value(kind of provide). – Fizer Khan Jan 18 '14 at 13:39
1

@Mike Chamberlain: I figure it out, check my last demo – Khanh TO Jan 18 '14 at 13:51
@Fizer Khan: I figured it out, see my last demo – Khanh TO Jan 18 '14 at 13:52
Thanks, the last example is almost what I want. The problem now is that we must hard code the dependencies passed to the $controller service, but each controller may have different dependencies. It seems like we need to use a combination of $controller to resolve the string to the controller function, then $injector, to inject its dependencies, but I can't quite see how. – Mike Chamberlain Jan 18 '14 at 14:15
Surely Angular must be doing something similar to this when it instantiates a controller from the ng-controller directive? I read the source code here https://github.com/angular/angular.js/blob/master/src/ng/controller.js but my knowledge of Angular internals is not good enough to figure out how it does it. – Mike Chamberlain Jan 18 '14 at 14:16
@Mike Chamberlain: yes, I was aware of the dependencies problem. I think a better way is creating a custom directive – Khanh TO Jan 18 '14 at 14:17
1

@Mike Chamberlain: check my last demo with a custom directive. – Khanh TO Jan 18 '14 at 14:25
@KhanhTO, the directive is genius, thank you very much! – Mike Chamberlain Jan 18 '14 at 14:41
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/45540/discussion-between-mike-chamberlain-and-khanh-to) – Mike Chamberlain Jan 18 '14 at 15:20

score 0 · Answer 2 · answered Jan 18 '14 at 14:07

You don't need to dynamically choose the controller. Use a single controller and use DI to provide different functionality to that controller.

angular.module('app', [])
    .service('ControllerService', function() {
        this.get = function(controllerName) {
            // ... do your logic for returning the controller functionality here
            if (controllerName == "fooController") {
                return {
                    foo: function() { return "foo" }
                }
            }
            else {
                return {
                    foo: function() { return "bar" }
                }
            }
        });
    })
    .controller('SingleController', ['$scope', 'ControllerService',
        function($scope, ControllerService) {
            $scope.functionality = ControllerService.get('fooController');
        });

You bind to the functionality object on your controller:

<div ng-controller="SingleController">
   <p>{{functionality.foo()}}</p>
</div>

From an AngularJS controller, how do I resolve another controller function defined in the module (dynamic ng-controller)?

2 Answers2

Linked