Защо това е нула във функцията за връзка в рамките на Angular директива?

Опитвам се да напиша динамичен шаблон, използвайки TypeScript и Angular, но по някаква причина ключовата дума „this“ винаги е null, поради което не мога да получа достъп до своя частен член $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);
        }
    }
}

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

person Adrian Luca Thomas    schedule 02.01.2016    source източник
comment
Не виждам никъде във вашия код препратка към ключовата дума this - нещо не разбирам ли погрешно? Как/как се опитвахте да посочите this?   -  person Nick Zuber    schedule 02.01.2016
comment
можете ли да транскомпилирате това в обикновен javascript за нас?   -  person Henry Zou    schedule 02.01.2016
comment
бихте ли могли да публикувате грешката, която получавате?   -  person toskv    schedule 02.01.2016
comment
Извинете, беше доста късно.. Поставих грешен код. Можете да видите, че използвам тази ключова дума в директивата. Моля, вижте по-горе, много благодаря.   -  person Adrian Luca Thomas    schedule 02.01.2016
comment
@HenryZou: Ето обикновения javascript (ред 66): github.com/AdrianLThomas/ROD/blob/   -  person Adrian Luca Thomas    schedule 02.01.2016
comment
възможно е функцията със стрелка, която използвате в app.ts за дефиниране на директивата, да го направи така, че това да не е правилно обвързано в директивата.   -  person toskv    schedule 02.01.2016


Отговори (2)


Изглежда, че използвах грешен синтаксис за функцията за връзка. Това е правилното изпълнение:

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

Може ли някой да обясни защо е така? :-)

person Adrian Luca Thomas    schedule 02.01.2016
comment
Функциите със стрелки на ES6 запазват лексикалния контекст за this: developer.mozilla .org/en-US/docs/Web/JavaScript/Reference/ - person Seamus; 03.01.2016

Трябва да имате:

    .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. Обяснение на проблема е тук: http://www.michaelbromley.co.uk/blog/350/exploring-es6-classes-in-angularjs-1-x#_section-directives Същността на проблема е, че когато angular извиква link функция, контекстът на това не се запазва.

Ако искате да разберете проблема по-задълбочено, просто използвайте angular.js вместо angular.min.js и вижте как изглежда стекът на повикванията.

person Martin Vseticka    schedule 02.01.2016
comment
Благодаря. Това, което казвате, има смисъл - въпреки че изглежда не работи, тъй като функцията за връзка вече не се извиква. Не виждам никакви грешки и в конзолата.. - person Adrian Luca Thomas; 02.01.2016