使用angular-ui-bootstrap彈出

Question

我在角色和打字稿中非常天真。我試圖在點擊圖片時創建一個彈出窗口。我找到了一個SO鏈接，它使用IMODALSERVICE來回答這個問題。

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

但是出於某種原因ng.ui.bootstrap.IModalService類型在項目的認可。我做錯了什麼，或者SO帖子有一些錯誤。我在我的項目中添加了所有的角度依賴關係。

Answer 1

確保你已經安裝角度-UI-bootstrap.d.ts https://www.nuget.org/packages/angular-ui-bootstrap.TypeScript.DefinitelyTyped/

，如果您使用的Visual Studio通常打包得到安裝在腳本/分型/

Answer 2

爲了您的編程環境（ IDE如Visual Studio）能夠識別需要添加打字稿定義的類型。

拿到角引導-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帶有一個函數來顯示一個確認對話框，該對話框接受OK按鈕和可選的CANCEL按鈕的標題，bodyText和回調函數。例如：

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

注意我是如何注入一個包裝模式功能和唯一的服務我必須做的是提供一個模式的標題和正文，以及在單擊確定（和可選的取消）時執行的動作。