Контроллер Angularjs как через typescript вызывает функцию контроллера из директивы

Question

Я пытаюсь вызвать функцию контроллера из директивы, и я столкнулся с проблемой «этого» контекста. 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 который покрывает мою проблему: http://embed.plnkr.co/Ov7crFZkkjDPzilX2BmL/

Answer 1

, как вы звоните testFn из директивы неверен. Для передачи данных с вызовом функции вы должны сначала использовать

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

И при вызове функции из директивы передать его в формате JSON/объект как {message: 'some value'} в круглых скобках.

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

Demo Plunkr

Answer 2

методы, которые должны быть переданы в качестве обратных вызовов (Угловая связывание попадают в эту категорию) должны быть связаны с их контекстом. Для TypeScript предпочтительный способ сделать это, определяя метод как функцию стрелки:

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