如何将我的指令链接到 typescript 类中的 html？答案

【问题标题】：How can I link my directive to html from the typescript class?如何将我的指令链接到 typescript 类中的 html？
【发布时间】：2016-01-20 10:38:33
【问题描述】：

我正在研究一个角度指令 POC。这里我有一个 HTML 页面和一个控制器类。我的打字稿类中有返回指令的方法。此外，我在 HTML 页面中有此指令的占位符。我怎样才能将这两者联系起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="scripts/angular.js"></script>    
    <script data-main="main" src="scripts/require.js" type="text/javascript"></script>

</head>
<body  ng-controller="TypeScriptController as TSCtrl">
    <helloworld> </helloworld>
</body>
</html>

/////控制器类

export class TypeScriptController {

name: string;
place: string;
output: string;
text: string;
helloworld: ng.IDirective;
protected ngModule: ng.IModule = null;

constructor() {
    this.name = "Obama";
    this.place = "America";
    this.text = "welcome";
    this.helloworld = this.getCustomDirective();
    //how can link this helloworld directive to the html
}

getCustomDirective(): ng.IDirective {
    return {
        restrict: 'E',
        replace: true,
        controller: [TypeScriptController],
        controllerAs: "TSCtrl",
        //templateUrl: "first.html"
        template: '<h1>{{TSCtrl.place}}</h1>'
    };
}
}

angular.element(document).ready(() => {
    var main: TypeScriptController = new TypeScriptController();
});

如何将 helloworld 指令链接到 html。我没有“ng-app”名称来做类似的事情..

angular.module('myApp').directive('myDirective', myDirective);

我想从类内部而不是外部注册指令。我想在类内部创建模块或类似的东西，然后用它来注册指令。

【问题讨论】：

标签： angularjs-directive typescript angular-directive

【解决方案1】：

如何链接这两者。

如果不创建angular.module 就不行。控制器是从window 查找的，但指令不是。此外，如果您没有ng-app（或引导程序），那么 Angular 将不会对 html 的该部分进行 directive tag -> directive 转换。

【讨论】：

谢谢 basarat.. 我可以在没有“ng-app”的情况下创建一个 angular.module。否则我如何使用引导程序来实现这一点？.. 我的最终目标是在 html 中使用可插入组件。我想在 html 中创建占位符，并从我的 typescript 类中向这些占位符注入指令或类似组件。不是来自课外......提前谢谢你......