scope undefined

Topics: General
May 14, 2014 at 9:03 PM
Hi, I have this angular controller

module Ordini.Controllers {
export interface IOrdiniScope extends ng.IScope {
    ProvinciaNascitaVisibile: boolean;
    ProvinciaNascitaSelezionata: string;
    StatoEsteroNascitaVisibile: boolean;
    ComuneNascitaVisibile: boolean;

    CambiaProvinciaNascita: Function;
}

export class OrdiniController
{
    private scope: IOrdiniScope;

    constructor($scope: Controllers.IOrdiniScope) {
        this.scope = $scope;
...
        this.scope.CambiaProvinciaNascita = this.CambiaProvinciaNascita;
    }

    private CambiaProvinciaNascita()
    {
        this.scope.ProvinciaNascitaVisibile = false;
        ....
    }
 }
}

and this razor view
                    @Html.DropDownList("ProvinciaNascita", ViewBag.ProvincieNascita as SelectList, new
           {
               style = "BORDER-BOTTOM: #DDDDDD 1px solid; BORDER-LEFT: #DDDDDD 1px solid; WIDTH: 60%; BORDER-TOP: #DDDDDD 1px solid; BORDER-RIGHT: #DDDDDD 1px solid",
               @class = "required", ng_show="ProvinciaNascitaVisibile", ng_model="ProvinciaNascitaSelezionata", ng_change="CambiaProvinciaNascita()"
           })
The constructor is called correctly, and the scope is set correctly in the member variable, but when I select an Item in the combobox the function is called correctly but the scope is undefined.
Am I missing something?

thanks,
Luca
May 16, 2014 at 7:21 PM
CambiaProvinciaNascita is called with a wrong context (this). You can fix it like this:
export class OrdiniController {
    private scope: IOrdiniScope;

    constructor($scope: IOrdiniScope) {
        this.scope = $scope;
        this.scope.CambiaProvinciaNascita = this.CambiaProvinciaNascita;
    }

    private CambiaProvinciaNascita = () => {
        this.scope.ProvinciaNascitaVisibile = false;
    }
 }
Note how I've changed the defenition of the CambiaProvinciaNascita method. Here is a link to playground for you to take a look at the generated JS code.
May 16, 2014 at 7:24 PM
By the way, it's a violation of established JS naming conventions to name methods with an initial capital letter.