如何在angular.js中優雅的使用ui.bootstrap的modal組件

ui.bootstrap的modal組件能夠很方便地實現頁面controller與模態框controller之間通訊，特別是彈出的模態框中有比較複雜的表格信息須要用戶填寫，下面切入主題：

註冊全局模態框實例的controller

angular.module('myApp.Controllers', [
        'ui.bootstrap'
])
.controller('appModalInstanceCtrl', function ($scope,$uibModalInstance,modalDatas) {
      var $ctrl = this;
      $scope.modalDatas = modalDatas; //雙向綁定，方便在確認中回傳可能修改的字段
     
      // $ctrl.insta
      $ctrl.ok = function (val) {
        $scope.modalDatas.result = val;
        $uibModalInstance.close(
          $scope.modalDatas  //在模態框View中修改的值傳遞回去，view中能夠直接添加屬性
        );
      };
      
      $ctrl.cancel = function () {
        $uibModalInstance.dismiss('cancel');
      };
    })

新建模板文件src/templates/modalViews/confirm.html

<div class="modal-header">
    <h3 class="modal-title">標題</h3>
</div>

<div class="modal-body">
    <p class="content">
      <label class="label">確認信息：</label>
      <input type="text"  ng-model="modalDatas.msg">
    </p>
    <p class="content">
      <label class="label">備註信息：</label>
      <input type="text"  ng-model="modalDatas.content">
    </p>
    
</div>

<div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">肯定</button>
    <button class="btn btn-default" type="button" ng-click="$ctrl.cancel()">取消</button>
</div>

頁面觸發代碼：

<button type='button' class='btn btn-primary' ng-click="openModal('md', 'confirm')">打開'confirm' modal</button>

在管理頁面出發代碼的controller中註冊openModal函數

使用ui.bootstrap提供的服務$uibModal來建立模態框，只須要簡單的配置模態框視圖和控制器。$uibModal提供惟一的方法open(options)配置。

options參數：
animation (Type: boolean, Default: true) 模態框打開/關閉動畫控制
appendTo (Type: angular.element, Default: body) 指定將模態框代碼插入位置，默認插入到body
backdrop (Type: boolean|string, Default: true) 遮罩層顯示控制
backdropClass (Type: string) 給遮罩層添加額外class
bindToController (Type: boolean, Default: false) - 當使用 controllerAs（好比設置爲$ctrl） 而且此屬性設置爲true時,能夠把$scope綁定到controller.主意$scope是可以管理模態框的scope,也就是說，若是模態框默認插入到body，那麼會將管理body標籤的控制器綁定到$ctrl,因此最好結合appendTo一塊兒使用。
component (Type: string, Example: myComponent) 將模態框當作組件方式使用
controller (Type: function|string|array, Example: MyModalController) 指定模態框控制器
controllerAs (Type: string, Example: ctrl) 控制器別名
resolve (Type: Object) - 給模態框傳遞數據;
templateUrl (Type: string) 指定模態框視圖層模板
size (Type: string, Example: lg) 指定模態框大小

還有不少屬性，能夠到官網查詢，好比控制多層模態框等等。

$scope.openModel = function (size, type) {
      //type即view文件名，在同一個頁面有多個不一樣業務的模態框的狀況下很方便
      var tplUrl = './src/templates/modalViews/' + type + '.html';
      $scope.modalDatas = {
          msg: 'Hello World!'
      };

      var modalInstance = $uibModal.open({
        animation: true,
        ariaLabelledBy: 'modal-title',
        ariaDescribedBy: 'modal-body',
        templateUrl: tplUrl,
        controller: 'appModalInstanceCtrl',
        controllerAs: '$ctrl',
        size: size,
        resolve: {
          modalDatas: function () {
            return $scope.modalDatas;
          }
        }
      });
      modalInstance.result.then(function (datas) {
        // 點擊確認按鈕執行的代碼
        //能夠從datas中獲取msg和content字段
        //進一步操做：發起http請求等       
      }, function () {
        // 點擊取消按鈕執行的代碼
        console.info('Modal dismissed at: ' + new Date());
      });
    };