AngularJS: dynamically assign controller from ng-repeat

javascript dynamic controller angularjs assign
jacob picture jacob · Dec 19, 2012 · Viewed 21.4k times · Source

I'm trying to dynamically assign a controller for included template like so:

<section ng-repeat="panel in panels">
    <div ng-include="'path/to/file.html'" ng-controller="{{panel}}"></div>
</section>

But Angular complains that {{panel}} is undefined.

I'm guessing that {{panel}} isn't defined yet (because I can echo out {{panel}} inside the template).

I've seen plenty of examples of people setting ng-controller equal to a variable like so: ng-controller="template.ctrlr". But, without creating a duplicate concurrant loop, I can't figure out how to have the value of {{panel}} available when ng-controller needs it.

P.S. I also tried setting ng-controller="{{panel}}" in my template (thinking it must have resolved by then), but no dice.

Answer

SET picture SET · Dec 19, 2012

Your problem is that ng-controller should point to controller itself, not just string with controller's name.

So you might want to define $scope.sidepanels as array with pointers to controllers, something like this, maybe:

$scope.sidepanels = [Alerts, Subscriptions];

Here is the working example on js fiddle http://jsfiddle.net/ADukg/1559/

However, i find very weird all this situation when you might want to set up controllers in ngRepeat.

Related questions

What is the difference between call and apply?

What is the difference between using call and apply to invoke a function? var func = function() { alert('hello!'); }; func.apply(); vs func.call(); Are there performance differences between the two aforementioned methods? When is it best to use call …

Read More
Declare an empty two-dimensional array in Javascript?

I want to create a two dimensional array in Javascript where I'm going to store coordinates (x,y). I don't know yet how many pairs of coordinates I will have because they will be dynamically generated by user input. Example …

Read More
create unique id with javascript

I have a form where a user can add multiple select boxes for multiple cities. The problem is that each newly generated select box needs to have a unique id. Can this be done is JavaScript? UPDATE: here is the …

Read More