angular 全局confirm确认框

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

配置

模板

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

然后在系统中引用定义的模板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，用于关闭模态框。到这里整个全局确认框的使用就完成了。
如有不当的地方，请予指正！