Javascript 为什么是；这"；null，在角度指令内的链接函数中？

我试图使用TypeScript和Angular编写一个动态模板，但是由于某些原因，“this”关键字总是空的，因此我无法访问我的私有成员$compile。有什么想法吗？非常感谢！：-）

指令：

namespace ROD.Features.Player {
    "use strict";

    export class VideoDirective implements ng.IDirective {
        public restrict: string = "E";
        public replace: boolean = true;
        public scope = {
            content: "="
        };

        constructor(private $compile: ng.ICompileService) {
        }

        public link(element: JQuery, scope: ng.IScope): any {
            const youtubeTemplate = "<p>Youtube</p>";
            const vimeoTemplate = "<p>Vimeo</p>";

            var linkFn = this.$compile(youtubeTemplate);
            const content: any = linkFn(scope);
            element.append(content);
        }
    }
}

您需要：

    .directive("videoItem", ["$compile",
    function ($compile) { return () => new ROD.Features.Player.VideoDirective($compile); }])

而不是

    .directive("videoItem", ["$compile",
    function ($compile) { return new ROD.Features.Player.VideoDirective($compile); }])

在你的

app.js

中。对此问题的解释如下：问题的要点是，当angular调用

link

函数时，不会保留此函数的上下文

---

如果您想更深入地理解这个问题，只需使用

angular.js

而不是

angular.min.js

，然后看看调用堆栈是什么样子。

似乎我对链接函数使用了错误的语法。这是正确的实现：

        public link = (element: JQuery, scope: ng.IScope): any => {
            const youtubeTemplate = "<p>Youtube</p>";
            const vimeoTemplate = "<p>Vimeo</p>";

            var linkFn = this.$compile(youtubeTemplate);
            const content: any = linkFn(scope);
            element.append(content);
        }

public link=（元素：JQuery，作用域：ng.IScope）：any=>{
const youtubeTemplate=“Youtube
”；
常量vimeoTemplate=“Vimeo
”；
var linkFn=this.$compile（youtubeTemplate）；
const content:any=linkFn（范围）；
元素。追加（内容）；
}

---

有人能解释为什么会这样吗？：-）

我在你的代码中没有看到对

这个

关键字的引用-我是不是误解了什么？您是如何/正在尝试引用此的？您能为我们将其转换为纯javascript吗？您能发布您收到的错误吗？抱歉，已经很晚了。。我粘贴了错误的代码。您可以看到我在指令中使用this关键字。请看上面，非常感谢。@HenryZou:这是简单的javascript（第66行）：谢谢。你的话很有道理——尽管它似乎不起作用，因为链接函数不再被调用。在控制台中也看不到任何错误。.ES6箭头函数保留

此

的词法上下文：

        public link = (element: JQuery, scope: ng.IScope): any => {
            const youtubeTemplate = "<p>Youtube</p>";
            const vimeoTemplate = "<p>Vimeo</p>";

            var linkFn = this.$compile(youtubeTemplate);
            const content: any = linkFn(scope);
            element.append(content);
        }