AngularJS 和 Typescript：如何将类/类型分配为指令的控制器？

Posted 2023-03-13

【中文标题】AngularJS 和 Typescript：如何将类/类型分配为指令的控制器？

【英文标题】：AngularJS & Typescript: How to assign a class/type as a directive's controller?

【发布时间】：2014-04-22 01:43:57

【问题描述】：

AngularJS 指令使用以下方式指定控制器：

  controller: function ($scope)

到目前为止，我还没有找到一种方法可以创建 TypeScript 类并将其分配给指令的控制器属性。

我想做的事情是这样的

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;

更好的是，如果可以使用工厂函数来创建和返回控制器的新实例，这将是很好的，类似于指令本身的实例化方式。

在我的指令模板中，我还想直接绑定到控制器，而不必将类的属性分配给 $scope。

另一种表述方式可能是说，我希望能够以类似于使用模板中可用的myController as ContollerType 语法分配控制器的方式将控制器分配给指令。

【参考方案1】：

我相信你可以在你的指令中做这样的事情：

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

那么 Angular 应该用它的构造函数来实例化你的类，你可以在模板中用myCtrl引用它

【讨论】：

哇，这隐藏在文档中。如果你 google: "controllerAs" site:angularjs.org 你只会得到 $route 和 $compile 文档。然而，它在许多其他地方都有讨论，特别是在 *** 上。

是的，我在上面查找了文档，但只找到了一小段并没有真正解释它。必须搜索 *** 以获取它的示例。

【参考方案2】：

简单地做你在没有指令的情况下会做的事情，即：

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;

要了解有关此模式的更多信息，请参阅：http://www.youtube.com/watch?v=WdtVn_8K17E&hd=1

【讨论】：

我忘记了以这种方式将控制器添加到范围的旧方法。我没有开始使用 AngularJS，直到他们已经有了用于控制器分配的 as 关键字。顺便说一句，很棒的视频 basarat。我得回去看看自从我上次看之后你有没有新的。没有它们，我永远不会使用 typescript/angular。您应该联系 Pluralsight 来整理完整的课程。 controllerAs 选项是更简洁（或至少更具声明性）的方式，因此我将其标记为答案。