Trying to implement a yes/no modal dialog service using bootstrap modal has been a challenge for me. I am struggling with how to inject text data (title and message) into the modal controller.
Here is the code snippet for 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;
}
}
}
And here is the code for the service handling 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;
}
}
}
However, I encountered an issue where YesNoDialogConfig is undefined in the modal's constructor. I attempted a different approach by creating a YesNoDialogConfig class, populating it with data, and then calling it like this:
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;
}
Unfortunately, this approach did not work either. Any suggestions or insights on how to solve this issue would be greatly appreciated. Thank you!