Question

export class MyDirective extends MyLib.directives.OtherDirective implements ng.IDirective {
  public require: string[] = ["^someReq"];
  public controller: string = "MyCtrl";
  public scope = {
    position: "@"
  };

  public static $inject: string[] = [
    '$http',
    '$q'
  ];
  constructor(
    private $http: ng.IHttpService,
    private $q: ng.IQService
  ) {
    console.log(this);  // undefined ??
    super($http: $http, $q: $q) // fails
  }

}

app.directive('myDirective', function (): ng.IDirective {
  return MyDirective
});

我的问题在这里是双重的，上面的结构不起作用。（当我在超类'编译的javascript中尝试"Cannot set property 'restrict' of undefined赋值时，我收到来自超类的错误消息：this.restrict = "A"。

我无法理解为什么在这种情况下this未定义，以及为什么它不起作用。我怀疑这可能是由于我对directiveFactory如何工作的误解。有人可以解释为什么这不起作用，并可能证明他们将如何实现我想要做的事情？（我知道大多数人都使用函数作为他们的指令，但是试图从指令是类的库扩展指令，所以我不知道如何使用它。

编辑：作为后续行动 - 为什么这样做？

app.directive('myDirective', ["$http",  "$q", (
    $http: ng.IQService,
    $q: ng.IQService,
  ) => {
    return new MyDirective({$http: $http, $q: $q});
  }
]);

我不喜欢它，因为你失去了$ inject语法的好处，但为什么显式调用return new在这里工作？

Answer 1

Angular Directives + Angular工厂不会使用new运算符调用。因此，您不能为它们使用类。你需要使用一个功能。这是我使用的：

///ts:ref=globals

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

    // Local design only
    vm: FooDirectiveController;
}

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
    }
}

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

Answer 2

最后，我从here

取走了这个

定义一个$injection函数，如下所示：

public static $injection(): any[] {
  return [
    '$http',
    '$q',
    ($http, $q) => new MyDirective($http, $q)
  ]
}

app.directive（＆＃39; rptDrawLayer＆＃39;，RptDrawLayer。$ injection（））;

它并不完美，但它至少可以在缩小时存活，并且允许我继续使用lib的指令：）

使用Typescript扩展angularjs指令

2 个答案: