Event handling function not working with `this` keyword

Question

Why can't I get data from this keyword in event handler and how can it be fixed?

twittyApp.factory('Unshown', function () {
function Unshown() {
    this.allIsLoaded = false;
    this.loading = false;
    this.firstTime = true;
    this.scrollMarker = 100;
    this.loadedUnshownPages = 0;
    this.timeLineHiader = $cookies.get("lastReadedTweetId");
}
window.onscroll = function () {
     //why here this.scrollMarker is undefined?
};
return Unshown;
});

'var scroled ....... if (this.scrollMarker > scrolled && !this.loading && !this.allIsLoaded) { this.loading = true;}' — Andrew, Mar 06 '16 at 17:27

RIYAJ KHAN · Accepted Answer · 2016-03-06T18:08:06.177

1

Do this changes

twittyApp.factory('Unshown', function() {

    var fact = {};

    function Unshown() {
        this.allIsLoaded = false;
        this.loading = false;
        this.firstTime = true;
        this.scrollMarker = 100;
        this.loadedUnshownPages = 0;
        this.timeLineHiader = $cookies.get("lastReadedTweetId");
    }

    var objUnShown = new Unshown();
    window.onscroll = function() {
        objUnShown.scrollMarker // aceess scrollmarker
    };

fact.Unshown =objUnShown;


    return fact.Unshown;
});

First you need to create an object of UnShown class then you can access their property.

EDIT 2 : if you want to create object whenever you want, you can do it in this way.

twittyApp.factory('Unshown', function() {

        var fact = {};

        function Unshown() {
             ..
        }

        window.onscroll = function() {
            objUnShown.scrollMarker // aceess scrollmarker
        };

    fact.Unshown =Unshown;


        return fact;
    });

 /// in controller do this.

 var objUnshown = new Unshown.Unshown()

edited Mar 06 '16 at 18:08

answered Mar 06 '16 at 17:28

RIYAJ KHAN

15,032
5
31
53

that's not true, you do not have to create an UnShown object, you just have to keep track of the "this" variable. thats all – Patrick Kelleter Mar 06 '16 at 17:31
Please paste the error – RIYAJ KHAN Mar 06 '16 at 17:42
@riyaj-khan your solution works, this coment was for solution with this, but I got another unexpetced result Unshown() in not constructor, in other controller, but it isn't problem. Thank you and good luck! – Andrew Mar 06 '16 at 17:48
Oo, now this handler works on every page, it isn't good, it crushed in login page and after that not work on main page. – Andrew Mar 06 '16 at 17:59
What's the point of this `fact` object? – Bergi Mar 06 '16 at 19:55

score 0 · Answer 2 · answered Mar 06 '16 at 19:51

By using the this keyword inside the Unshown functions, you are setting properties of that function object. To access those properties outside the function, use the property accessor on the function object reference.

twittyApp.factory('Unshown', function () {
function Unshown() {
    this.allIsLoaded = false;
    this.loading = false;
    this.firstTime = true;
    this.scrollMarker = 100;
    this.loadedUnshownPages = 0;
    this.timeLineHiader = $cookies.get("lastReadedTweetId");
}
window.onscroll = function () {
     //this.scrollMarker is undefined
     //
     //Use property accessor
     console.log(Unshown.scrollMarker);
};
return Unshown;
});

Using `window.onscroll` in AngularJS

Using window.onscroll is the Older way to register event listeners.

In AngularJS, event listeners are added using Angular's jqLite.

var windowElem = angular.element($window);

windowElem.on('scroll', function scrollListener (event) {
    console.log(event);
};

Be sure to add $window to the list of injectables for the factory function.

Event handling function not working with `this` keyword

2 Answers2

Using window.onscroll in AngularJS

Using `window.onscroll` in AngularJS