对弹出窗口使用angular-ui-bootstrap

Question

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

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

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

Answer 1

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

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

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

本质上，这将在您的typings文件夹中“安装”文件angular-ui-bootstrap.d.ts。如果您的开发环境没有检测到，只需在typescript文件的顶部添加/// <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>

这就是模式的视图。这是一个基本的确认对话框，有OK和Cancel按钮，有标题和正文。不过，你可以理解其中的意思。

然后，我将创建一个带有显示确认对话框的函数的服务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中，我可以有一个函数，当单击delete按钮时触发：

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

注意我是如何注入封装了模式功能的服务的，我唯一需要做的就是为模式提供一个标题和主体，以及在单击OK (和可选的Cancel)时要执行的操作。

Answer 2

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

如果您使用的是visual studio，通常会将安装包打包到Scripts/typings/中