且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

为什么"这&Q​​UOT;空,在角度指令中的链接功能?

更新时间:2023-02-17 13:02:48

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

 公共链接=(元素:JQuery的,范围:ng.IScope):任何= GT; {
            常量***Template =&所述p为H.;的***&下; / P>中;
            常量vimeoTemplate =&所述p为H.; Vimeo的&下; / P>中;            VAR linkFn = $这个编译(***Template)。
            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 ***Template = "<p>***</p>";
            const vimeoTemplate = "<p>Vimeo</p>";

            var linkFn = this.$compile(***Template);
            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 ***Template = "<p>***</p>";
            const vimeoTemplate = "<p>Vimeo</p>";

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

Can anyone explain why this is? :-)