via 유형 스크립트를 통해 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); 
     } 
    } 

지시어 클래스 : http://embed.plnkr.co/Ov7crFZkkjDPzilX2BmL/

Answer 1

당신이 testFn를 호출하는 방법 : 여기

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의 예입니다 지시어에서 올바른 방법이 아닙니다. 함수를 호출하여 데이터를 전달하려면 먼저

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

을 사용하고 지침에서 함수를 호출하면서 괄호 안의 {message: 'some value'} 같은 JSON/객체 형식으로 전달합니다. 콜백으로 전달 해야하는

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

Demo Plunkr

Answer 2

방법은 (각도가이 범주에 바인딩) 그 문맥에 바인드해야합니다. TypeScript의 경우 화살표 함수로 메소드를 정의하는 데 바람직한 방법은 다음과 같습니다.

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