bug 随记 —— data-dismiss=“modal“

data-dismiss=“modal” 用于button上 是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。

• 问题：

angularJS bootstrap 多层modal，二级modal 显示时，一级modal消失了（且二级modal有一级modal的button触发）。期望两个modal都应展示，只不过二级modal展示在一级modal上层。

• bug示例：

• code片段

  <div class="modal-footer">
       <button type="button" class="btn btn-danger"  ng-click="delete()" data-dismiss="modal">Unpublish</button>
       <button type="button" class="btn btn-primary" ng-click="closeModal()" data-dismiss="modal"> Close </button>
  </div>

$scope.delete= function() {

        ModalService.showModal({
            templateUrl: "xxxx.html",
            controller: "AlertCtrl",
            inputs: {
                params: {
                    title: "delete",
                    message: "Are you sure you want to delete?",
                    confirm: "confirm",
                    cancel: "Cancel"
                }
            }
        }).then(function(modal) {
            
            console.log(modal)
            modal.element.modal();
            modal.close.then(function(result) {
            })
       });
    };

• 期望效果：

• 解决方案：

去掉button上的 data-dismiss="modal"属性。data-dismiss="modal"作用是关闭模态窗。

<button type="button" class="btn btn-danger"  ng-click="unpublishInterop()">Unpublish</button>