AngularJS & Typescript: How to assign a class/type as a directive's controller?

Question

AngularJS directives specify a controller using:

{
  controller: function ($scope){}
}

As of yet, I have not found a way where I can create a TypeScript class and assign it to a directive's controller property.

What I would like to do is something like

interface IDirectiveController{
    myProperty:string;
}

class DirectiveController implements IDirectiveController{
   static $injector = [$scope];
   constructor ($scope:ng.IScope){
       this.myProperty = 'default';
   }

   public myProperty:string;
}


var directive:ng.IDirective =
{
   controller:DirectiveController;
}
return directive;

Better yet, it would be nice if a factory function could be used that would let me create and return a new instance of the controller, similar to how the directive itself is instantiated.

In my directive template I would also like to bind directly to the controller rather than having to assign the properties of the class to $scope.

Another way of stating this might be to say, I would like to be able to assign controllers to directives in a manner similar to assigning a controller using the myController as ContollerType syntax that is available in a template.

rob · Accepted Answer · 2014-03-17 16:15:49Z

3

I believe you could do something like this in your directive:

...
controller: DirectiveController,
controllerAs: 'myCtrl'
...

Then angular should instantiate your class with its constructor and you can refer to it in the template with myCtrl

edited Mar 17, 2014 at 16:15

answered Mar 16, 2014 at 23:42

rob

18.7k13 gold badges73 silver badges95 bronze badges

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

2 Comments

Richard Collette Over a year ago

Wow, that is buried in the documentation. If you google: "controllerAs" site:angularjs.org you only get $route and $compile documentation. It is however discussed in many other places, particularly on StackOverflow.

rob Over a year ago

Yep I looked for doc on it and only found a tiny paragraph that didn't really explain it. Had to search StackOverflow to get an example of it.

basarat · Accepted Answer · 2014-03-17 01:27:51Z

2

Simply do what you would do in the absence of a directive i.e. :

class DirectiveController{
   static $inject = ['$scope']; // fixed a few typos here
   constructor ($scope){
       $scope.vm = this;        // this is the pattern I recommend for all controllers
       this.myProperty = 'default';
   }

   public myProperty:string;
}

To learn more about this pattern see : http://www.youtube.com/watch?v=WdtVn_8K17E&hd=1

answered Mar 17, 2014 at 1:27

basarat

278k60 gold badges475 silver badges528 bronze badges

1 Comment

Richard Collette Over a year ago

I forgot about the the old method of adding the controller to the scope this way. I didn't start using AngularJS until they already had the as keyword for controller assignment. Great videos by the way basarat. I'll have to go back and see if you have any new ones since I last looked. I would never have gotten as far with typescript/angular without them. You should approach Pluralsight to put together a fully produced course. The controllerAs option is the cleaner (or at least more declarative) way of doing this so I am marking that one as the answer.

Collectives™ on Stack Overflow

AngularJS & Typescript: How to assign a class/type as a directive's controller?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related