Question

我试图用bootstrap模式创建一个通用的yes / no模态对话框服务。但是我很难将文本数据（标题和消息）注入模态控制器。

这是是没有模态控制器：

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;
    }        
}
}

这是yes no对话框的服务：

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;
    }
}
}

但是没有用，YesNoDialogConfig在模态的构造函数中是未定义的。我尝试了其他的东西，我尝试创建一个YesNoDialogConfig类，填充它然后通过它调用它：

    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;
    }

但这确实有效。有什么建议？谢谢！

Answer 1

好的，事实证明，我缺乏知识使我在那里。我所做的是尝试在模态控制器中注入一个具体的yes no config类：

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;
    }
}

实际是yes no config class：

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

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

当然，这不起作用，所以我所做的是，而是创建一个yes no config接口并注入它，然后在调用模式对话框的方法中，刚解析了具体类的新实例：

修改后的控制器：

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;
    }
}

新界面：

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;
    }
}

来自服务的电话：

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

            }).result;

它有效:)

将对象注入bootstrap模式

1 个答案: