dipendenza iniezioni non sono definite in funzioni di regolazione durante l'utilizzo di Angular1 + ES6, con il regolatore come classe

Question

Sto usando classe ES6 per definire il mio controller quindi questa è la sintassi,

export class SearchBarController { 
    constructor($log) { 
     'ngInject'; 

     $log.debug("Hello"); 
    } 

    textTyped($log){ 

     $log.debug("change fired."); 
    } 
} 

vista:

<input type="text" data-ng-model="vm.txt" data-ng-change="vm.textTyped()"/> 

Quindi "Hello" dall'interno del costruttore viene registrato correttamente. Ma, "change fired" all'interno della funzione typedText() non viene attivato perché apparentemente non è definito come faccio a rendere la funzione di classe textTyped() per accedere al servizio $ log?

Nota: Se assegno $ accedo ad una proprietà di classe nel costruttore come,

this.logger = $log; 

E poi fare,

this.logger.debug("Change fired."); 

questo funziona. Ma non sono sicuro se sia l'approccio giusto.

Aggiornamento: Inoltre, questo approccio espone questo riferimento al servizio $ log alla vista associata a questo controller. È dannoso?

C'è una soluzione migliore?

Answer 1

Nel caso in cui qualcuno è interessato ho trovato una soluzione più elegante al problema utilizzando ES6 oggetto destrutturazione:

class ABCController { 
    constructor($log, $http){ 
     let vm = this; 
     vm.DI =() => ({$log, $http}); 
    } 

    classFn(){ 
     let vm = this; 
     let {$log, $http} = vm.DI(); 
     //Now use $log and $http straightway 

     $log.debug("Testing"); 
     $http({...}).then(); 
    } 

    classFn2(){ 
     let vm = this; 
     //you can also destructure only the required dependencies in this way 
     let {$http} = vm.DI(); 
    } 
} 
ABCController.$inject = ['$log', '$http']; 

In questo modo non c'è bisogno di scrivere brutto/codice confuso come vm.DI.log, ecc. Inoltre, in questo modo i DI sono meno esposti nella vista.

Answer 2

this.logger = $log; 

Come hai sottolineato, è la strada. Poiché si tratta di un oggetto, non esiste un ambito globale.

Answer 3

class SearchBarController { 
    constructor($scope, $log) { 
     this.log = $log; 

     // Scope method 
     $scope.vm = this; 
    } 

    textTyped(){ 
     this.log.debug("change fired."); 
    } 
} 

SearchBarController.$inject = ['$scope', '$log']; 

Prova come questo