扩大与打字稿angularjs指令 [英] Extending angularjs directives with Typescript

问题描述

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

我的问题是双重的这里，以上的结构不起作用。 （我从超类的错误消息：无法设置属性'限制'的未定义时，它会尝试 this.restrict =A 在超类的编译JavaScript的分配）。

My questions is twofold here, the structure above doesn't work. (I get an error message from the super class: "Cannot set property 'restrict' of undefined when it tries the this.restrict = "A" assignment in the super class' compiled javascript).

我不明白为什么这个未定义在这种情况下，为什么它不工作。我怀疑这可能是由于我的directiveFactory是如何工作的误解。可能有人解释为什么这不起作用，可能证明他们将如何实现我想要做什么？ （据我所知，大多数人使用的功能为他们的指令，但试图从一个图书馆，该指令是一类，所以我不知道如何工作的，在扩展指令。

I cannot work out why this is undefined in this case, and why it doesn't work. I suspect it may be due to my misunderstanding of how the directiveFactory works. Could someone explain why this doesn't work, and possibly demonstrate how they would achieve what I'm trying to do? (I understand that most people use functions for their directives, but trying to extend a directive from a library where the directive is a class so I am not sure how to work that in.

编辑：作为后续向上为什么这项工作

as a follow up- why does this work?

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

我不喜欢它，因为你失去了$注入语法的好处，但为什么显式调用返回新这里工作？

推荐答案

在结束时，我已经走了这一点，从的这里

In the end, I've gone for this, taken from here

定义一个 $注射功能，像这样：

define an $injection function like so:

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

app.directive（'rptDrawLayer'，RptDrawLayer $注射液（））;

app.directive('rptDrawLayer', RptDrawLayer.$injection());

它并不完美，但它至少生存缩小并让我使用的lib的指示，以保持：）

It's not perfect but it at least survives minification and allows me to keep using the lib's directives :)

这篇关于扩大与打字稿angularjs指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！