Ceddaerrix Ceddaerrix - 3 months ago 14
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;

private $location: ng.ILocationService,
private $route,
private $q: ng.IQService,
private api: services.contentApi,
private $document
) {

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.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 class="row">
<button ng-click="vm.filter()">Filter</button>
<table class="table table-articles" id="grid" >
<th>Culture Info</th>
<tr ng-repeat="ct in vm.listModel">

In the
methods when called 'this' is the current controller/scope.
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?


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

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