Dynamic controller with "controller as" syntax

Question

If I want to assign dynamic controller, I can do the following:

<div ng-controller="MainController">
  <div ng-controller="dynamicController"></div>
</div>

function MainController($scope){
  $scope.dynamicController = MyCtrl;
  $scope.instanceName = "ctrl"; // we'll use this later
}

function MyCtrl(){}

What can I do to make this work with the new "controller as" syntax?

This works fine: <div ng-controller="dynamicController as ctrl"></div>

But how to make ctrl dynamic too? Let's say I want it to have a name that $scope.instanceName holds.

Fiddle: http://jsfiddle.net/ftza67or/2/

There is an idea to make a custom directive that will create and compile html string, but it's an ugly way, let's pretend it does not exist.

Quick search on Google gave me toddmotto.com/digging-into-angulars-controller-as-syntax, and thinkster.io/egghead/experimental-controller-as-syntax — elclanrs
– elclanrs, Commented Dec 27, 2014 at 21:49
@elclanrs i know how to use "controller as" syntax. My question is how to use it with dynamic controller reference. — Anri
– Anri, Commented Dec 27, 2014 at 21:52
Ah, I misread. Maybe you can check the $controller service. Using the name of the function seems like trouble, I'd try to use the name of the registered controller. — elclanrs
– elclanrs, Commented Dec 27, 2014 at 22:14

Explosion Pills · Accepted Answer · 2014-12-27 21:56:24Z

1

This should work pretty much the same, but just remember that when you use controller as you can bind properties to this inside the controller to have them accessed by the scope/view.

function MainController ($scope) {
  $scope.dynamicController = MyCtrl;
  }

function MyCtrl($scope) {
  this.foo = "baz";
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="MainController">
  <div ng-controller="dynamicController as ctrl">
    {{ctrl.foo}}
  </div>
</div>

answered Dec 27, 2014 at 21:56

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

10 Comments

Anri Over a year ago

I just noticed that jsfiddle that i was using for testing was forked from one with old angular version. This works, yes.

Anri Over a year ago

BUT ) How to make controller instance name dynamic too? (the "as ctrl" part)

New Dev Over a year ago

@Anri, why do you need the alias to be dynamic? It makes little sense. What are you trying to achieve?

Anri Over a year ago

@NewDev I have many "cards" in one page, and each card has it's own controller and cards are created in ng-repeater. So in card templates i want to reference correct controller. I guess I could use the same name for all, they are not nested YET, but still curious how to achieve that.

Explosion Pills Over a year ago

@Anri The alias with controller as is like a variable -- you can't have dynamic variable names; that wouldn't make sense

|

Anri · Accepted Answer · 2014-12-27 22:52:13Z

So I've looked into angular sources and found this. https://github.com/angular/angular.js/blob/bf6a79c3484f474c300b5442ae73483030ef5782/src/ng/controller.js

 if (isString(expression)) {
    match = expression.match(CNTRL_REG),
    constructor = match[1],
    identifier = identifier || match[3];
    expression = controllers.hasOwnProperty(constructor)
        ? controllers[constructor]
        : getter(locals.$scope, constructor, true) ||
            (globals ? getter($window, constructor, true) : undefined);
  .... and so on

Basically, ng-controller directive currently accepts strings or expressions, if it is an expression, it has to be a controller function reference. If it is a string, well, it will take identifier name as it was passed and I don't see any way to make it evaluate a variable with dynamic expression name.

Collectives™ on Stack Overflow

Dynamic controller with "controller as" syntax

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related