CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
ValeriiVasin
ValeriiVasin

Reputation: 8726

How to dynamically inject controller in AngularJS

How to set ng-controller as an expression from the $scope?

According to the documentation:

ngController – {expression} – Name of a globally accessible constructor function or an expression that on the current scope evaluates to a constructor function.

But how to evaluate scope expression as a controller for controllers that have been registered with module .controller?

For example:

Layout: 

<div ng-controller="myExpr"></div>

JavaScript (define controller): 

app.controller('myCtrl', ['$scope', '$timeout', function () { ... }];

JavaScript (parent scope): 

$scope.myExpr = ...;

What should be in myExpr to use myCtrl as a controller via expression?

I've tried $controller('myCtrl')... not working...

P.S. If controller has been defined via globally accessible function.. it's possible to provide it as myExpr. But what to do if it has been defined so?

Upvotes: 2

Views: 3364

Answers (1)

Erik Honn
Erik Honn

Reputation: 7576

The expressions that ng-controller accept are a bit wierd. So you can do this by writing your controller slightly differently (but read below as for why you probably don't want to).

function myCtrl($scope) {
  $scope.value = 'Stuff';
}

This is a controller and will work like normal for this case. Like in this example: http://jsbin.com/ubevel/2/edit

So why not do it?
First of all this is not a good way to define things from a testing perspective. Secondly, this allows you to set the controller dynamically on load but it won't allow you to change things after that. If you change the value of myExpr after the page has loaded the controller will not change.

So what to do?
I would highly suggest looking at using a service instead. Swap out your actions by supplying your outer controller with a service that you then change in the same manner you are now trying to change the inner controller. So something like: http://jsbin.com/ubevel/5/edit

This service can be swapped out on the fly, changing it will change the actions that are available in the scope.

You could also use an include, but this would result in duplicate html. I personalty am fine with this since I am against reusing html for two different types objects (sooner or later you want to change one but not the other and it becomes a mess). But a lot of people would object to that.



An extra note: There are probably nicer ways to do it with controllers, I probably haven't looked at all angles, but I just don't think controllers are the right tool for this case.

Upvotes: 1

Related Questions