Ceddaerrix Ceddaerrix - 4 months ago 35
AngularJS Question

TypeScript angularjs event binding

I have recently started developing with AngularJS + TypeScript and pretty new at it.

Currently, I have a problem on having the controller properties accessed on a scroll event.

The type file looks like:

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);
}


The HTML part looks like:

<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 the
init()
and
filter()
methods when called 'this' is the current controller/scope.
When
lazyScrollHandler()
is called 'this' is not the current controller/scope but the HTMLDocument, which makes all the properties from the 'vm' variable undefined.

What am I missing? What am I doing wrong?

Answer

Try to change method lazyScrollHandler() to a property definition:

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