使用angular-ui-bootstrap弹出

Question

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

如何在打字稿中使用angular-ui-bootstrap（模态）？

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

Answer 1

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

获取angular-bootstrap-ui的最好方法是使用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 ，该函数具有一个显示确认对话框的功能，该对话框接受标题，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方法。 这就是为什么我将controller属性设置为controllerAs定义为"modal"因此在模板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 /