AngularJs + typescript 指令依赖注入

Question

我尝试在我的应用程序中实现一个新指令。指令代码：

module Myapp.NV.Directives {

export interface placeHolderScope extends ng.IScope {
    txt: string;
}

/**
* PlaceHolder
*
*  @class
*  @classdesc This directive is use to simulate placeholder HTML5 attributes
*/
export class PlaceHolder implements IDirective {
    static $inject = ['$log','$timeout'];
    constructor($log: ng.ILogService, $timeout: ng.ITimeoutService) {
        var txt;
        var directive: any = {
            restrict: "A",
            scope: { txt: "@ngPlaceholder" },
            link: function (scope: placeHolderScope, elem: ng.IAugmentedJQuery, attrs: ng.IAttributes, $log: ng.ILogService, $timeout: ng.ITimeoutService) {
                console.log($log);
                console.log($timeout);
            }
        }
        return directive;
    }
}
}

 Myapp.NV.registerDirective('PlaceHolder', ['$log', '$timeout']);

我的问题是日志和超时总是未定义...

static $inject = ['$log','$timeout'];

不会工作...

registerDirective函数代码：

export function registerDirective(className: string, services = []) {
    var directive = className[0].toLowerCase() + className.slice(1);
    services.push(() => new Myapp.NV.Directives[className]());
    angular.module('Myapp.NV.Directives').directive(directive, services);
}

谢谢你的帮助:)

Answer 1

正如 boindill 在原始答案中指出的那样，依赖项是通过 TypeScript 构造函数注入的，而不是通过链接函数。

这是我的解决方案，myDirective 依赖于 myService：

export class MyDirective implements ng.IDirective {
    static $inject = ["myService"];

    constructor(private myService: IMyService) {
    }

    restrict = "A";

    scope = {};

    link = (scope: IMyScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes) => {
        // directive implementation
        // Access myService through 'this.myService'.
    };
}

通过以下方式在 Angular 中注册指令。这里 ng.IDirectiveFactory 被实现为匿名函数：

angular.module("app", []).directive("myDirective", (myService: IMyService) => {
    return new MyDirective(myService);
});

这里 Angular 依赖注入有效，因为它可以识别构造函数参数名称 (myService)。

为了确保在生成的 JavaScript 被缩小时依赖注入仍然能够识别依赖项，静态 $inject 属性在字符串数组中提供了它们的名称。与普通 JavaScript 一样，确保构造函数参数和 $inject 数组成员的顺序相同。

Answer 2

您不能在指令的link 函数中注入依赖项。链接函数有一个固定的签名function link(scope, element, attrs) { ... } 这取自官方的 angularjs 文档。

你要为你的指令定义一个控制器并将依赖注入到控制器中。之后只需使用此控制器功能。