Typescript angular 指令控制器函数

Question

我在用打字稿编写 angular 指令时遇到问题。我想使用打字稿 classes 编写我的指令。除控制器功能外，一切正常。

class myDirective implements ng.IDirective{

public priority :number = 999;
public require :String[] = ["ngModel","myDirective"];

public controller(){
    var test = 1;
    return {
      reset : function(){
         test = 0;
  }
    }
}

public link($scope: ng.IScope, elm: JQuery, attr: ng.IAttributes, ctrlArray: any){
    var controller;
    controller = ctrlArray[1];
    controller.reset();
}

static factory(): ng.IDirectiveFactory{
    var directive = () => new myDirective();
    return directive;
}
}
export = myDirective;

但是当运行 this in angular 时，当 controller.reset() 在 link 函数中调用时，我得到一个 "undefined is not a function"。当我检查控制器时，我只得到原型对象，没有定义重置函数。

当我这样写我的指令时，它起作用了。

function myDirective(): ng.IDirective{
return {
    priority: 999,
    require: ["ngModel","myDirective"],
    controller: function(){
        var test = 1;
        this.reset = function(){
            test = 0;
        }
    },
    link: function($scope: ng.IScope, elm: JQuery, attr: ng.IAttributes, ctrlArray: any){
        var controller;
        controller = ctrlArray[1];
        controller.reset();
    }
}
}
export = myDirective;

区别在于控制器函数的编写方式。在我使用的打字稿 class 中。

return {
      reset : function(){
         test = 0;
  }
    }

我用的函数方式

this.reset = function(){
            test = 0;
        }

不幸的是，typescript 不允许我在 typescript 中使用第二种方式 class。有什么我遗漏的吗，还是我完全从错误的角度来处理这个问题？

Answer 1

这是我们一直在使用的指令设计：

export class FooDirectiveController {

    static $inject = ['$element', '$scope'];
    constructor(public $element: JQuery, public $scope: FooDirectiveScope) {
        $scope.vm = this;

        // Any Jquery access goes here. Use $element

        // Setup any $watch on $scope that you need
    }
}

export interface FooDirectiveScope extends ng.IScope {
    bar: string;

    // Local design only
    vm: FooDirectiveController;
}

dustApp.directives.directive('foo', function (): ng.IDirective {
    return {
        restrict: 'E',
        scope: {
            // NOTE : see documentation in type information
            bar: '='
        },
        templateUrl: 'fooDirective.html',
        controller: FooDirectiveController
    };
});

这样你的控制器是 强类型的 并且指令定义对象是哑的（并且可能 angular 2 兼容）。

Typescript angular 指令控制器函数

Typescript angular directive controller function

controller

directive

angularjs

typescript