【问题标题】:Not able to access custom factory inside a directive in angular typescript无法在角度打字稿的指令中访问自定义工厂
【发布时间】:2016-03-23 20:32:26
【问题描述】:

我已经注入了 storageService 但我尝试使用 this.storageService 在链接函数中访问它给 undefined。

谁能帮我解决这个问题?

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

【问题讨论】:

标签: angularjs typescript


【解决方案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;
    }
  }
}

更新:上面的答案不起作用。因为链接函数用作回调,this 是全局对象。您必须将服务设置为模块内的变量,然后您可以通过范围访问它。 see my fiddle

【讨论】:

  • 它不工作。它显示以下错误 TypeError: Cannot read property 'getItem' of undefined
  • @KiranGopal 没错,我更新了答案并添加了一个链接到我的提案的小提琴
猜你喜欢
  • 2016-07-24
  • 1970-01-01
  • 2015-09-05
  • 1970-01-01
  • 1970-01-01
  • 2013-12-28
  • 2015-07-19
  • 2021-07-19
  • 1970-01-01
相关资源
最近更新 更多