angularjs - Angular with Typescript and undefined injected service in directive -

i'm trying access services directive seem undefined no matter do. mydirective.factory() says undefined when initializing directive. undefined (not surprisingly) in constructor.

i've tried similiar these instructions no avail:
http://blog.aaronholmes.net/writing-angularjs-directives-as-typescript-classes/
http://sirarsalih.com/2014/08/04/proper-dependency-injection-in-your-angularjs-typescript-apps/
define angularjs directive using typescript , $inject mechanism

here's app.ts:

angular.module("footest", [])     .service("myservice", foo.myservice)     .directive("mydirective", foo.mydirective.factory()); 

mydirective.ts:

module foo { 'use strict';  export class mydirective implements ng.idirective {      private myservice: any;      //static $inject = ['myservice'];      constructor(service: myservice) {         this.myservice = service;     }      restrict = "e";     replace = true;     template = "<div ng-click='fooclick()'>foo: {{foo}}</div>";     scope = {         foo: "="     };      link = (scope, element, attrs) => {         scope.fooclick = function () {             this.myservice.foo();             scope.foo = this.myservice.getbar();         }     };      static factory() {         console.log("factory");         var directive = (myservice: foo.myservice) => new mydirective(myservice);         directive['$inject'] = ['myservice'];         return directive;     } } } 

and myservice.ts:

module foo {     'use strict';      export class myservice {      foo() {         console.log("bar");     }      getbar() {         return "bar";     } } }  

---

edit:

the foo example above works fine of answer below when use similiar way inject services in real application, functions oddly. may working fine while if add console.log() somewhere (or else irrelevant functionality) (or some) of services undefined of sudden. weird behaviour , frustrating.

i have several directives in app , directives within directives. seems services aren't loaded or , i've tried change set of app.

i tried copy behaviour foo example , seems made happen using directive within first one. services undefined randomly.

in mydirective.ts template now:

template = "<div><div ng-click='fooclick()'>foo: {{foo}}</div><br/><another-directive test='bar'></another-directive></div>"; 

and anotherdirective.ts:

module foo { 'use strict';  export class anotherdirective implements ng.idirective {      private myservice: any;      constructor(public service: myservice) {         this.myservice = service;     }      restrict = "e";     replace = true;     template = "<div ng-click='barclick()'>bar: {{test}}</div>";     scope = {         test: "="     };      link = (scope, element, attrs) => {         scope.barclick = () => {             //console.log(this.myservice);             scope.test = this.myservice.getfoo();         }     };      static factory(): ng.idirectivefactory {         var directive = (myservice: foo.myservice) => new anotherdirective(myservice);         directive.$inject = ['myservice'];         return directive;     }  } }   

if uncomment/comment console.logs in either directive, services undefined. or if else irrelevant functionality. hell?

if use console.log(this) within link function shows "anotherdirective { myservice: object..." when works. when fails shows "scope {$id: 3, $$childtail: null, $$childhead:..."

in _references.ts include in app.ts order myservice, anotherdirective, mydirective, app.

change factory method following. need inject service in directive's prototype.

  static factory() {         console.log("factory");         var directive = (myservice: foo.myservice) => new mydirective(myservice);         directive.$inject = ['myservice'];         return directive;     } 

checkout http://plnkr.co/edit/dnu3n2bbzxcpdmmvznba?p=preview

typescript

module foo { 'use strict';  export class mydirective implements ng.idirective {      private myservice: any;      //static $inject = ['myservice'];      constructor(service: myservice) {         this.myservice = service;     }      restrict = "e";     replace = true;     template = "<div ng-click='fooclick()'>foo: {{foo}}</div>";     scope = {         foo: "="     };      link = (scope, element, attrs) => {         scope.fooclick =  () => {             this.myservice.foo();             scope.foo = this.myservice.getbar();         }     };      static factory() {         console.log("factory");         var directive = (myservice: foo.myservice) => new mydirective(myservice);         directive.$inject = ['myservice'];         return directive;     } } }  module foo {     'use strict';      export class myservice {      foo() {         console.log("bar");     }      getbar() {         return "bar";     } } }  angular.module("footest", []).     directive("mydirective", foo.mydirective.factory()).     service("myservice", foo.myservice);