TypeScript angularjs event binding

Question

Ich habe vor kurzem angefangen mit AngularJS + TypeScript zu entwickeln und ziemlich neu dabei.

Derzeit habe ich ein Problem beim Zugriff auf die Controller-Eigenschaften bei einem Bildlaufereignis.

Die Typ-Datei wie folgt aussieht:

module controller { 

    'use strict'; 

    export class MyController { 
     public static $inject = ['$location', '$route', '$q', '$document']; 
     public listModel: object[]; 
     public filterModel: model.FilterModel; 
     public pageLoading: boolean = false; 
     public pageIndex: number = 0; 

     constructor(
      private $location: ng.ILocationService, 
      private $route, 
      private $q: ng.IQService, 
      private api: services.contentApi, 
      private $document 
     ) { 
      $document.scroll(this.lazyScrollHandler); 
     } 

    init() { 

     var vm = this; 
     vm.api.filterContentItems(null, 0).then(l => { 
       vm.listModel = l; 
      }); 
    } 

     private lazyScrollHandler() { 
      var vm = this; 
      if (vm.pageLoading == true) 
       return false; 

      var wintop = window.pageYOffset; 
      var scrollHeight = window.document.body.scrollHeight; 
      var offsetHeight = window.document.body.offsetHeight; 
      var triggered = (wintop/(scrollHeight - offsetHeight)) * 100; 

      if (triggered >= 80) { 
       vm.api.filterContentItems(vm.filterMode, 0).then(l => { 
        l.forEach((i, idx) => { 
          vm.listModel.push(i); 
         }); 
        vm.pageLoading = false; 
       }); 
      } 
     } 
     filter() { 
      var vm = this; 
      vm.api.filterContentItems(vm.filterMode, 0).then(l => { 
       vm.listModel = l; 
      }); 
     } 
    } 
var controllerId = 'contentItems'; 
(<any>angular.module('app')).lazy.controller(controllerId, MyController); 
} 

Die HTML-Teil wie folgt aussieht:

<div class="panel" data-ng-controller="contentItems as vm" ng-init="vm.init()" ><div class="articles-list"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="form-group"> 
        <div class="col-md-3"> 
         <label>Culture Info:</label> 
         <input ng-model="vm.filterModel.cultureInfo"></input> 
        </div> 
       </div>   
      </div> 
     </div> 
    </div> 
    <div> 
     <div class="row"> 
      <button ng-click="vm.filter()">Filter</button> 
     </div> 
    </div> 
    <table class="table table-articles" id="grid" > 
     <thead> 
      <tr> 
       <th>Title</th> 
       <th>Culture Info</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="ct in vm.listModel"> 
       <td>{{ct.title}}</td> 
       <td>{{ct.cultureInfo}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

In den init() und filter() Methoden beim Aufruf 'this' ist der Stromregler/scope. Wenn lazyScrollHandler() aufgerufen wird, ist dies nicht der aktuelle Controller/Scope, sondern das HTMLDocument, das alle Eigenschaften der Variable 'vm' undefiniert macht.

Was fehlt mir? Was mache ich falsch?

Answer 1

Try Methode lazyScrollHandler() auf eine Eigenschaft Definition zu ändern:

//private lazyScrollHandler() { 
private lazyScrollHandler =() => { 
... 
}