为什么＆QUOT;这＆Q​​UOT;空，在角度指令中的链接功能？ [英] Why is "this" null, in the link function within an Angular Directive?

问题描述

我想写使用打字稿和角度动态模板，但由于某些原因，这个关键词始终为空，所以我无法访问我的私有成员$编译。有任何想法吗？非常感谢！ ： - ）

指令：

 命名空间ROD.Features.Player {
    使用严格的;    出口类VideoDirective实现ng.IDirective {
        公共限制：字符串=E;
        公共取代：布尔= TRUE;
        公开范围= {
            内容：=
        };        构造函数（私人$编译：ng.ICompileService）{
        }        公共链接（元素：JQuery的，范围：ng.IScope）：任何{
            常量youtubeTemplate =＆所述p为H.;的Youtube＆下; / P＆gt;中;
            常量vimeoTemplate =＆所述p为H.; Vimeo的＆下; / P＆gt;中;            VAR linkFn = $这个编译（youtubeTemplate）。
            const的内容：任何= linkFn（范围）;
            element.append（内容）;
        }
    }
}
 

App.ts：

 命名空间ROD {
    使用严格的;
    angular.module（rodApp，[]）
        。服务（设置，[（）=＆gt;新建Settings.DevelopmentSettings（）]）
        。服务（RedditService，[
            $ HTTP，设置，
            （$ HTTP：ng.IHttpService，设置：Settings.ISettings）=＆GT;新Services.Reddit.RedditService（$ HTTP，settings.sourceUrl）
        ]）
        .directive（videoItem，[$编译，
            （$编译：ng.ICompileService）=＆GT;新Features.Player.VideoDirective（$编译）]）
        .controller（的PlayerController，[
            $范围，RedditService
            （$范围：任何，redditService：Services.Reddit.IRedditService）=＆GT;新Features.Player.PlayerController（$范围，redditService）
        ]）;
}
 

解决方案

看来，我用的链接功能的错误的语法。这是正确的实现：

 公共链接=（元素：JQuery的，范围：ng.IScope）：任何= GT; {
            常量youtubeTemplate =＆所述p为H.;的Youtube＆下; / P＆gt;中;
            常量vimeoTemplate =＆所述p为H.; Vimeo的＆下; / P＆gt;中;            VAR linkFn = $这个编译（youtubeTemplate）。
            const的内容：任何= linkFn（范围）;
            element.append（内容）;
        }
 

谁能解释这是为什么？ ： - ）

I'm trying to write a dynamic template using TypeScript and Angular, however for some reason the 'this' keyword is always null, thus I cannot access my private member $compile. Any ideas? Many Thanks! :-)

Directive:

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);
        }
    }
}

App.ts:

namespace ROD {
    "use strict";
    angular.module("rodApp", [])
        .service("Settings", [() => new Settings.DevelopmentSettings()])
        .service("RedditService", [
            "$http", "Settings",
            ($http: ng.IHttpService, settings: Settings.ISettings) => new Services.Reddit.RedditService($http, settings.sourceUrl),
        ])
        .directive("videoItem", ["$compile",
            ($compile: ng.ICompileService) => new Features.Player.VideoDirective($compile)])
        .controller("PlayerController", [
            "$scope", "RedditService",
            ($scope: any, redditService: Services.Reddit.IRedditService) => new Features.Player.PlayerController($scope, redditService),
        ]);
}

解决方案

It appears that I was using the wrong syntax for the link function. This is the correct implementation:

        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);
        }

Can anyone explain why this is? :-)

这篇关于为什么＆QUOT;这＆Q​​UOT;空，在角度指令中的链接功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！