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文档。

您要为指令定义控制器并将依赖项注入控制器。之后只需使用此控制器功能。

AngularJs + typescript指令依赖注入

2 个答案: