CODEWITHSUNDEEP
angularjstypescript
Walter
Walter

Reputation: 724

Scope is null after constructor

Pretty new at typescript and angular. I'm trying to get a modal dialog to close through the close() method. However, when I call the close method the scope is null for some reason.

This is the controller for the dialog:

module Controllers
{
export interface IDetailsScope extends ng.ui.bootstrap.IModalServiceInstance
{
    Title: string;        

    CloseModal();
}

export class DetailsController
{
    static $inject = ['$scope'];  

    Scope: IDetailsScope;  

    constructor($scope: IDetailsScope)
    {                           
        this.Scope = $scope;

        this.Scope.Title = "Hello World";  
        this.Scope.CloseModal = this.CloseModal;          
    }

    CloseModal()
    {            
        this.Scope.close();
    }
}
}

The title property comes through to the modal dialog and the CloseModal method is called, but the scope is undefined so this call fails:

this.Scope.close();

This is how the modal is being shown:

this.ModalInstance = this.ModalService.open(
            {
                templateUrl: 'App/Views/Details/Details.html',
                controller: Controllers.DetailsController,
            });

Thanks

Upvotes: 0

Views: 497

Answers (1)

basarat
basarat

Reputation: 276085

Given your code, ensure you are calling 

CloseModal()

From your HTML. Since that is want you exposed on the scope.

Also try using a lambda to capture the context of 'this' when passing functions around in the controller definition. i.e.

CloseModal = ()=> {

Finally I recommend not modifying the scope and using your class as the VM as documented here : http://www.youtube.com/watch?v=WdtVn_8K17E&hd=1 which has additional advantages when it comes to scope inheritance.

Upvotes: 2

Related Questions