javascript - varför "this" är undefined i typescript-modul med http-promise

detta är mitt första försök med Typescript och Angular och jag har fastnat på ett problem.

Jag har en modulkontroller definierad på följande sätt (.ts-fil):

module app.controllers {
    "use strict"

    import services = app.services;

    export class calendarController {

        calBlock: any;
        deptId: number;
        calSvc: app.services.calendarService;

        static $inject = ["$scope", "calendarService"];

        constructor(isolateScope: directives.calendarScope, calSvc: services.calendarService) {

            this.deptId = isolateScope.deptId;
            this.calSvc = calSvc;

            calSvc.getMonthBlock(12, 2015, 1, this.deptId)
            .then(
                function (response) {
                    //promise fullfilled (regardless of outcome)                
                    this.calBlock = response.data;
                 },
                 function (error) {
                //handle errors
                    alert(error);
                 }   
             );
        }
    }
}

Här är tjänsten som denna controller är beroende av:

module app.services {
    "use strict"
    export class calendarService {

        private _http: ng.IHttpService;

        static $inject = ["$http"];

        constructor(http: ng.IHttpService) {
            this._http = http;            
        }

        getMonthBlock = function (month:number, year:number, calId:number, deptId:number) {

            //initialise service url
            var sURL = _sf.getServiceRoot('KrisisShifts') + "CalendarService/GetMonthCal/" + calId + "/" + deptId + "/" + month + "/" + year;
            //create config object for get function
            var config = {
                URL: sURL,
                method: "GET",
                dataType: 'json',
                headers: {
                    'ModuleId': _sf.getModuleId(),
                    'TabId': _sf.getTabId(),
                    'RequestVerificationToken': _sf.getAntiForgeryValue()
                }
            }
            //return the promise of the http.get function
            return this._http.get(sURL, config);

        }
    }
}

Problemet uppstår på följande rad i controllermodulen:

this.calBlock = response.data;

Problemet är att DETTA är odefinierat, så därför är också calBlock odefinierat och jsConsole kastar ett fel:

TypeError: Kan inte sätta egenskapen 'calBlock' på undefined vid shift-calendar-controller.js?cdv=28:14

Jag är relativt ny på JavaScript, Angular och TypeScript, så jag har problem med att lista ut varför "this" är odefinierat. Jag tror att det beror på att det är inneslutet i en funktion.

Jag behöver ett sätt att tilldela response.data (en JSON-array från ett $http-anrop) till calBlock-egenskapen i TypeScript-klassen för min kontroller. Kan någon hjälpa mig att förstå varför this är odefinierat inom response-funktionen och hur jag kan komma åt det?

Tack

REDIGERA: LÖSNING BASERAD PÅ tymeJV:s svar

här är det omskrivna calBlock-anropet:

            calSvc.getMonthBlock(12, 2015, 1, this.deptId)
            .then((response) => {
                    //promise fullfilled (regardless of outcome)                
                    this.calBlock = response.data;
                },
            (error) => {
                    //handle errors
                    alert(error);
                }   
            );

Svar #1

Eftersom kontexten för this går förlorad i callbacken. Använd pilfunktioner i TypeScript för att bevara kontexten!

calSvc.getMonthBlock(12, 2015, 1, this.deptId).then((response) => {

})

Relaterade artiklar