Not able to access custom factory inside a directive in angular typescript

Question

i have injected storageService but i tried to access in the link function using this.storageService its giving undefined.

Can any one help me on this ?

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

There is a way how directive could be created with an example and few links — Radim Köhler
– Radim Köhler, Commented Dec 17, 2015 at 13:10

Raulucco · Accepted Answer · 2015-12-17 13:13:26Z

0

~~So the problem is that the link function Change:~~

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

To:

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

UPDATE: The above answer won't work. Because the link function is used as a callback and this is the global object. You'd have to set the services as a variable inside your module, then you'd have access to it through scope. see my fiddle

edited Dec 17, 2015 at 13:13

answered Dec 17, 2015 at 12:45

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kiran Gopal Over a year ago

Its not working. Its show the following error TypeError: Cannot read property 'getItem' of undefined

Raulucco Over a year ago

@KiranGopal That's right, I updated the answer and added a link to a fiddle with my proposal

Collectives™ on Stack Overflow

Not able to access custom factory inside a directive in angular typescript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related