via typescriptとしてAngularjsコントローラが指令からコントローラ関数を呼び出す

Question

指令からコントローラ関数を呼び出そうとしていて、 "this"コンテキストの問題が発生します。 logSerivceは、関数が指令経由で呼び出されるとアクセスできません。

ここでは、コントローラクラス：

class MainController implements IMainScope { 

     static $inject = ["LogService"]; 

     constructor(private logService:ILogService) { } 

     sayHello(message:string) { 
      console.log("MainController sayHello", message); 
      // Cannot read property 'logService' of undefined if gets call from directive 
      this.logService.log(message); 
     } 
    } 

ここでディレクティブクラス：

class TestDirective implements ng.IDirective { 
     public restrict = "E"; 
     public templateUrl = "test-directive.html"; 
     public replace = true; 
     public scope:any = { 
      testFn: "&" 
     }; 

     constructor() { } 

     public link:ng.IDirectiveLinkFn = (scope:TestDirectiveScope, element:ng.IAugmentedJQuery, attrs:ng.IAttributes):void => { 
      scope.hello =() => { 
       console.log("TestDirective", scope.firstName); 
       scope.testFn()(scope.firstName); 
      }; 
     } 

     static factory():ng.IDirectiveFactory { 
      let directive:ng.IDirectiveFactory =() => new TestDirective(); 
      return directive; 
     } 
    } 

ここでは私の問題をカバーして、簡単なplunkerの例である：あなたがtestFnを呼び出しているhttp://embed.plnkr.co/Ov7crFZkkjDPzilX2BmL/

Answer 1

方法指示から正しい方法ではありません。関数を呼び出してデータを渡すには、最初

ng-click="vm.sayHello(message)" 

を使用する必要がありますそして、ディレクティブから関数を呼び出しながら、括弧内の{message: 'some value'}のようなJSON /オブジェクト形式でそれを渡します。コールバックとして渡すことになっている

scope.testFn({message: scope.firstName}); 

Demo Plunkr

Answer 2

方法（このカテゴリにアンギュラ結合秋）そのコンテキストにバインドする必要があります。 TypeScriptの場合、矢印関数としてメソッドを定義するこれを行うための好ましい方法は次のとおりです。

sayHello = (message:string) => { ... }