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

Richard Collette

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AngularJS - Directive not recognizing controller

来自分类Dev

angularjs中Controller和Directive之间的通信

来自分类Dev

AngularJS将更改的值从Controller传递到Directive Controller

来自分类Dev

AngularJS将更改的值从Controller传递到Directive Controller

来自分类Dev

AngularJS - Injecting Factory into Directive's link function

来自分类Dev

How to separate Controller file in angularjs

来自分类Dev

AngularJS overwrites isolated directive scope

来自分类Dev

AngularJS Directive for downloading excel file

来自分类Dev

How to catch exceptions in controller's actions properly?

来自分类Dev

数组语法:private classType [] identifier = new classType [] {};

来自分类Dev

模板中的AngularJS“ Controller as”

来自分类Dev

AngularJS controller return value

来自分类Dev

AngularJS controller and service creation

来自分类Dev

if statement in ng-repeat directive in AngularJS

来自分类Dev

Change the templateUrl of directive based on screen resolution AngularJS

来自分类Dev

AngularJS ngRepeat directive does not have compile option

来自分类Dev

AngularJS TypeScript迁移

来自分类Dev

AngularJS Typescript指令

来自分类Dev

AngularJS Typescript路由

来自分类Dev

TypeScript中的AngularJS值

来自分类Dev

Angularjs和Typescript服务

来自分类Dev

承诺与angularJS和Typescript

来自分类Dev

AngularJS Typescript指令

来自分类Dev

AngularJS Typescript路由

来自分类Dev

带angularjs的TypeScript类

来自分类Dev

TypeScript中的AngularJS值

来自分类Dev

AngularJS:“ Controller as”语法和指令

来自分类Dev

AngularJS'controller as'和form。$ valid

来自分类Dev

在Controller AngularJS中创建函数