Inject object into bootstrap modal

Question

Im trying to create a generic yes/no modal dialog service with bootstrap modal. But I'm having a hard time injecting the text data (title and message) into the modal controller.

This is the yes no modal controller:

module Dialogs
{
export class YesNoDialog
{
    static $inject = ['$scope', 'YesNoDialogConfig'];

    Title: string;
    Message: string;

    constructor($scope, YesNoDialogConfig)
    {
        $scope.vm = this;            

        this.Title = YesNoDialogConfig.Title;
        this.Message = YesNoDialogConfig.Message;
    }        
}
}

this is the service for the yes no dialog:

module DialogServices
{
export class YesNoDialogService
{
    $inject = ['$modal'];

    ModalService: ng.ui.bootstrap.IModalService;

    constructor($modal)
    {
        this.ModalService = $modal;
    }

    ShowModal(Title: string, Message: string) : ng.IPromise<any>
    {
        return this.ModalService.open(
            {
                templateUrl: 'App/Views/Dialogs/YesNoDialog.html',
                controller: Dialogs.YesNoDialog,
                resolve: {
                    YesNoDialogConfig:
                    {
                        Title: Title,
                        Message: Message
                    }
                }

            }).result;
    }
}
}

But that didnt work, YesNoDialogConfig is undefined in the constructor of the modal. I have tried other things, I tried creating a YesNoDialogConfig class, populating it and then calling it through:

    ShowModal(Title: string, Message: string) : ng.IPromise<any>
    {
        this.ModalConfig = new Models.YesNoDialogConfig(Title, Message);

        return this.ModalService.open(
            {
                templateUrl: 'App/Views/Dialogs/YesNoDialog.html',
                controller: Dialogs.YesNoDialog,
                resolve: {
                    YesNoDialogConfig: function ()
                    {
                        { return this.ModalConfig }
                    }

            }).result;
    }

But that did work either. Any Suggestions? Thanks!

Answer 1

Okay so turns out, my lack of knowledge did me in there. What I had done was attemped to inject a concrete yes no config class into the modal controller:

export class YesNoDialog
{
    static $inject = ['$scope', 'YesNoDialogConfig'];

    Title: string;
    Message: string;        

    constructor($scope, YesNoDialogConfig: Dialogs.YesNoDialogConfig)
    {
        $scope.vm = this;            

        this.Title = YesNoDialogConfig.Title;
        this.Message = YesNoDialogConfig.Message;
    }
}

The actual yes no config class:

export class YesNoDialogConfig
{
    Title: string;
    Message: string;

    constructor(Title: string, Message: string)
    {
        this.Title = Title;
        this.Message = Message;
    }
}

And of course, this does not work, so what I did was, instead created a yes no config interface and injected that, then in the method calling the modal dialog, just resolved a new instance of the concrete class:

The modified controller:

export class YesNoDialog
{
    static $inject = ['$scope', 'YesNoDialogConfig'];

    Title: string;
    Message: string;        

    constructor($scope, YesNoDialogConfig: Dialogs.IYesNoDialogConfig)
    {
        $scope.vm = this;           

        this.Title = YesNoDialogConfig.Title;
        this.Message = YesNoDialogConfig.Message;
    }
}

The new interface:

export interface IYesNoDialogConfig
{
    Title: string;
    Message: string;
}

export class YesNoDialogConfig implements IYesNoDialogConfig
{
    Title: string;
    Message: string;

    constructor(Title: string, Message: string)
    {
        this.Title = Title;
        this.Message = Message;
    }
}

And the call from the service:

return this.ModalService.open(
            {
                templateUrl: 'App/Views/Dialogs/YesNoDialog.html',
                controller: Dialogs.YesNoDialog,
                resolve: {
                    YesNoDialogConfig: function ()
                    {
                        return new Dialogs.YesNoDialogConfig(Title, Message);
                    }
                }

            }).result;

And it works :)