在打字稿中编写复杂的 AngularJS 指令答案

【问题标题】：Writing complex AngularJS directive in typescript在打字稿中编写复杂的 AngularJS 指令
【发布时间】：2015-12-07 23:37:02
【问题描述】：

我找到了以下从复选框中选择对象的指令：
https://vitalets.github.io/checklist-model/

我的问题是我们正在使用打字稿，我完全不知道如何在打字稿中编写给定的指令。

我知道基本样式如下

module myModule {
    'use strict';
    export function checklistModel(): ng.IDirective {
        return {...};
   };
};

我的问题是我需要注入 $parse 和 $compile 服务。我试图将指令中的代码放在链接中，但我不知道如何让指令工作。

谁能给我一个关于如何注入服务以及给定代码的哪一部分进入链接和/或编译的提示？

【问题讨论】：

试试看这个：Writing an Angular directive with a TypeScript class

标签： javascript angularjs typescript angular-directive

【解决方案1】：

TypeScript 没有关于依赖注入的具体问题。只需将要注入的依赖项定义为checklistModel 的参数即可。如果您想确保在缩小 javascript 文件后可以解决依赖关系，您可以通过 $inject 属性另外定义依赖关系（这也适用于普通 js）：

module myModule {
'use strict';

    checklistModel.$inject = ['$parse', '$compile'];

    export function checklistModel($parse, $compile): ng.IDirective {
        return {
             link: function() { ... }
        };
   };

   angular.module('myModule').directive('checklistModel', checklistModel);
};

其他一切都是正常的棱角分明的东西。（除此之外，IDirective 类型会告诉你返回值应该是什么样子）

我希望这会有所帮助。

【讨论】：