angularjs - 无法在 Angular TypeScript 中的指令内访问自定义工厂
我已经注入了 storageService,但我尝试在 link 函数中使用 this.storageService 访问它时,它显示未定义。
有人能帮我吗?
module App.Directive {
import Services = Core.Services;
import Shared = Core.Shared;
export class UserNav implements ng.IDirective {
restrict = 'A';
require: any = "^?ngModel";
scope = true;
templateUrl: any = "template/user-nav.html";
link: ng.IDirectiveLinkFn = function(scope, element, attributes, ngModel: any) {
var a = this.storageService.getItem("userInfo", false);
console.log("getting > " + a);
}
constructor(public routerService: Services.RouterService,
public storageService: Services.StorageService) {
}
static factory(): any {
var directive = (routerService: Services.RouterService,
storageService: Services.StorageService) => {
return new UserNav(routerService, storageService);
}
directive['$inject'] = ['routerService', 'storageService'];
return directive;
}
}
}
答案#1
所以问题是链接函数更改:
module App.Directive {
import Services = Core.Services;
import Shared = Core.Shared;
export class UserNav implements ng.IDirective {
restrict = 'A';
require: any = "^?ngModel";
scope = true;
templateUrl: any = "template/user-nav.html";
link: ng.IDirectiveLinkFn = function(scope, element, attributes, ngModel: any) {
var a = this.storageService.getItem("userInfo", false);
console.log("getting > " + a);
}
constructor(public routerService: Services.RouterService,
public storageService: Services.StorageService) {
}
static factory(): any {
var directive = (routerService: Services.RouterService,
storageService: Services.StorageService) => {
return new UserNav(routerService, storageService);
}
directive['$inject'] = ['routerService', 'storageService'];
return directive;
}
}
}
收件人:
module App.Directive {
import Services = Core.Services;
import Shared = Core.Shared;
export class UserNav implements ng.IDirective {
restrict = 'A';
require: any = "^?ngModel";
scope = true;
templateUrl: any = "template/user-nav.html";
link(scope, element, attributes, ngModel: any) {
var a = this.storageService.getItem("userInfo", false);
console.log("getting > " + a);
}
constructor(public routerService: Services.RouterService,
public storageService: Services.StorageService) {
}
static factory(): any {
var directive = (routerService: Services.RouterService,
storageService: Services.StorageService) => {
return new UserNav(routerService, storageService);
}
directive['$inject'] = ['routerService', 'storageService'];
return directive;
}
}
}
更新:上述答案不可行。因为 link 函数是作为回调使用的,而 this 是全局对象。你必须在你的模块内部将 services 设置为一个变量,这样你才能通过作用域访问它。参见我的 fiddle
