angular 全局confirm确认框

全局确认框是在弹出模态框的基础上修改的。

配置

模板

angular.module("custom-template", [])
.run(["$templateCache", function($templateCache) {
  $templateCache.put("template/modal/confirmModelTemplate.html",
    "<div class="m-c">
"+
    "  <div class="modal-header">
"+
    "    <h4 class="modal-title">{{title}}</h4>
"+
    "  </div>
"+
    "  <div class="modal-body">{{content}}</div>
"+
    "  <div class="modal-footer" style="text-align: center;">
"+
    "    <button type="button" class="btn btn-primary" ng-click="ok()">确定</button>
"+
    "    <button type="button" class="btn btn-warning" ng-click="cancel()">取消</button>
"+
    "  </div>
"+
    "</div>
"+
    "");
}]);

然后在系统中引用定义的模板module：

var app = angular.module("myApp", ["custom-template"]);

调用方法

在自定义的Common factory中定义打开确认框的方法。

angular.module("myApp").factory("Common", ["$http", "$q", "$cookieStore", "$location","$modal",
  function ($http, $q, $cookieStore, $location,$modal) {
    return {
      openConfirmWindow: function(modalTitle,modalContent,modalInstance) {
        var deferred = $q.defer();
        /*
        * modalInstance是在弹窗的基础上再弹出confirm确认框时从第一个弹窗中传进的$modalInstance,
        * 若是直接在页面上弹出confirm确认框，则不能传$modalInstance,否则会报错
        */
        var confirmModal = $modal.open({
          backdrop: "static",
          templateUrl : "template/modal/confirmModelTemplate.html",  // 指向确认框模板
          controller : "ConfirmCtrl",// 初始化模态控制器
          windowClass: "confirmModal",// 自定义modal上级div的class
          size : "sm", //大小配置
          resolve : {
            data : function(){
              return {modalTitle: modalTitle,modalContent: modalContent};//surgeonSug: $scope.surgeonSug,
            }
          }
        });
        // 处理modal关闭后返回的数据
        confirmModal.result.then(function() {
          if(!!modalInstance) {
            modalInstance.dismiss("cancel");
          }
          deferred.resolve();
        },function(){
        });
        return deferred.promise;
      }
    }
  }]);

自定义CSS

.confirmModal .modal-sm {
  width: 400px;
}
.confirmModal .modal-content {
  margin-top: 40%;
}
.confirmModal .modal-header {
  padding: 10px 15px;
}
.confirmModal .modal-body {
  padding: 10px 15px;
  border-top: 1px solid #e5e5e5;
}

使用

在页面上使用的具体方法如下：

$scope.delete = function(id) {
  var modalTitle = "提示！";
  var modalContent = "确定删除吗？";
  Common.openConfirmWindow(modalTitle,modalContent).then(function() {
    $http.delete(url+id)
      .success(function() {
        $scope.load($scope.currSelSurgeon);
        $rootScope.lxAlert["success"]("删除成功！");
      }).error(function() {
        $rootScope.lxAlert["danger"]("删除失败！");
      });
  });
};

在弹出的模态框中使用的具体方法：

$scope.cancel = function(){
  var modalTitle = "确定关闭吗？";
  var modalContent = "填写的信息未保存，请确认是否关闭？";
  Common.openConfirmWindow(modalTitle,modalContent,$modalInstance);
};

第一种使用一定不能传入第三个参数modalInstance，否则会报错。第二种在弹出模态框的基础上再弹出确认框必须要传入$modalInstance，用于关闭模态框。到这里整个全局确认框的使用就完成了。
如有不当的地方，请予指正！