使用 angular-ui-bootstrap 弹出

Question

我在角度和打字稿方面非常天真。我正在尝试在单击图像时创建一个弹出窗口。我找到了一个 SO 链接，它使用 IMODALSERVICE 回答了这个问题。

How to use angular-ui-bootstrap (modals) in typescript?

但是由于某种原因，项目中无法识别 ng.ui.bootstrap.IModalService 类型。我做错了什么还是SO帖子有一些错误。我确实在我的项目中添加了所有角度依赖项。

Answer 1

为了让您的编程环境（IDE，如 Visual Studio）能够识别类型，您需要添加 typescript 定义。

获取 angular-bootstrap-ui 的最佳方法是使用 TSD tool

然后在您的项目中使用命令行，您可以运行以下命令： tsd install angular-ui-bootstrap --resolve --save

本质上，这会将文件angular-ui-bootstrap.d.ts“安装”到您的打字文件夹中。如果您的开发环境没有检测到它，只需添加/// <reference path="../../../typings/angular-ui-bootstrap/angular-ui-bootstrap.d.ts" /> 在你的打字稿文件的顶部。请注意，路径必须根据您的文件夹结构匹配（这只是一个示例）。

之后我个人喜欢将angular-ui-bootstrap 模态包装在服务中，因此我将创建一个模板confirmation-modal.html，如下所示：

<div>
    <div class="modal-header">
        <h3 class="modal-title">{{ modal.title }}</h3>
    </div>
    <div class="modal-body">
        {{ modal.bodyText }}
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="modal.ok()">OK</button>
        <button class="btn btn-default" type="button" ng-click="modal.cancel()">Cancel</button>
    </div>
</div>

这就是模态框的视图。这是一个带有确定和取消按钮、标题和正文的基本确认对话框。不过你可以理解。

然后，我将创建一个服务modal.service.ts，其中包含一个函数来显示一个确认对话框，该对话框接受标题、bodyText 和 OK 按钮的回调函数以及可选的 CANCEL 按钮。例如：

/// <reference path="../../../typings/angular-ui-bootstrap/angular-ui-bootstrap.d.ts" />
module app.services {
    "use strict";

    interface IModalParams {
        title: string;
        bodyText: string;
        onOk(): void;
        onCancel(): void;
    }

    interface IModalConfirmationInstance {
        title: string;
        bodyText: string;
        ok(): void;
        cancel(): void;
    }

    export interface IModalService {
        showConfirmDialog(title: string, bodyText: string, onOk: () => void, onCancel?: () => void): void;
    }

    class ModalInstanceController implements IModalConfirmationInstance {

        public static $inject = [
            "$uibModalInstance",
            "modalParams"
        ];

        constructor(
            private $uibModalInstance: angular.ui.bootstrap.IModalServiceInstance,
            private modalParams: IModalParams) {
        }

        public title: string = this.modalParams.title;

        public bodyText: string = this.modalParams.bodyText;

        public ok(): void {
            this.modalParams.onOk();
            this.$uibModalInstance.close();
        }

        public cancel(): void {
            if (this.modalParams.onCancel) {
                this.modalParams.onCancel();
            }
            this.$uibModalInstance.dismiss();
        }
    }

    class ModalService implements IModalService {
        constructor(
            private $uibModal: angular.ui.bootstrap.IModalService) {
        }

        public showConfirmDialog(title: string, bodyText: string, onOk: () => void, onCancel?: () => void): void {
            console.log("show modal");

            let modalParams: IModalParams = {
                title: title,
                bodyText: bodyText,
                onOk: onOk,
                onCancel: onCancel 
            };

            let modalInstance = this.$uibModal.open({
                animation: true,
                templateUrl: "/app/confirmation-modal.html",
                controller: ModalInstanceController,
                controllerAs: "modal",
                size: null, // default size
                resolve: {
                    modalParams: () => modalParams
                }
            });
        }
    }

    factory.$inject = [
        "$uibModal"
    ];

    function factory(
        $uibModal: angular.ui.bootstrap.IModalService): IModalService {
        return new ModalService($uibModal);
    }

    angular
        .module("app.services")
        .factory("app.services.ModalService", factory);
}

请注意，除了服务之外，在同一个文件中，我还创建了一个控制器来处理模态实例，并且resolve 属性正在将一个对象传递给该控制器，其中包含所有必要的参数。 另请注意，我不喜欢使用$scope，我更喜欢使用controller as 方法。这就是为什么我将控制器属性设置为 controllerAs 定义为 "modal" 以便在模板模式视图中我可以使用单词 modal（或您选择的任何内容）来引用控制器。

现在我的所有功能都包含在一个服务中，因此我可以从任何注入服务的地方显示我的确认对话框模式。例如，假设我在某处有一个附加到控制器的视图..

<div ng-controller="app.foo.MyController as myCtrl">
  <!-- some things and below a button to delete something with confirmation (or whatever) -->
  <button ng-click="myCtrl.delete()">
     <span class="fa fa-trash-o" aria-hidden="true"></span>
  </button>
</div>

然后在那个MyController 中，我可以拥有例如单击删除按钮时触发的功能：

module app.foo {
    "use strict";

    interface IMyControllerScope {
        delete(): void;
    }

    class MyController  implements IMyControllerScope {
        public static $inject = ["app.services.ModalService"];

        constructor(private modalService: app.services.IModalService) {
        }

        public delete(): void {
            this.modalService.showConfirmDialog("Delete Things", "Are you sure?",
                () => {
                    console.log("The button OK has been click. Do things");
                    // some actions to execute when the button OK has been pressed
                });
        }
    }

    angular
        .module("app.foo")
        .controller("app.foo.MyController ", MyController );
}

请注意我是如何注入包含模态功能的服务的，我唯一要做的就是为模态提供标题和正文，以及单击“确定”（以及可选的“取消”）时要执行的操作。

Answer 2

确保您已安装 angular-ui-bootstrap.d.ts https://www.nuget.org/packages/angular-ui-bootstrap.TypeScript.DefinitelyTyped/

如果您使用的是 Visual Studio，通常在 Scripts/typings/ 中安装包