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