使用 angular-ui-bootstrap 进行弹出窗口

为了使您的编程环境(类似于Visual Studio的IDE(能够识别类型，您需要添加打字稿定义。

获取angular-bootstrap-uu的最佳方式是使用TSD工具

然后，使用项目中的命令行，您可以运行以下命令： 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，其中包含一个函数来显示一个确认对话框，该对话框接受标题、正文文本和"确定"按钮的回调函数，并可选择用于"取消"按钮。例如：

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

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

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

如果您使用的是Visual Studio，通常软件包可以安装在脚本/类型/