Adr*_*mas 5 javascript angularjs typescript angular-directive
我正在尝试使用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);
}
}
}
Run Code Online (Sandbox Code Playgroud)
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),
]);
}
Run Code Online (Sandbox Code Playgroud)
看来我对链接函数使用了错误的语法。这是正确的实现:
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);
}
Run Code Online (Sandbox Code Playgroud)
谁能解释这是为什么吗?:-)
| 归档时间: |
|
| 查看次数: |
772 次 |
| 最近记录: |