TypeScript angularjs event binding

Question

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 1

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

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