Angularjs 利用 $modal 实现 confirm 弹窗

先介绍$modal，$modal只有一个方法：open，该方法的属性有：

• templateUrl：模态窗口的地址
• template：用于显示html标签
• scope：一个作用域为模态的内容使用（事实上，$modal会创建一个当前作用域的子作用域）默认为$rootScope
• controller：为$modal指定的控制器，初始化\$scope，该控制器可用$modalInstance注入
• resolve：定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个
• reslove，如果需要传递一个objec对象，需要使用angular.copy()
• backdrop：控制背景，允许的值：true（默认），false（无背景），
• static - 背景是存在的，但点击模态窗口之外时，模态窗口不关闭
• keyboard：当按下Esc时，模态对话框是否关闭，默认为ture
• windowClass：指定一个class并被添加到模态窗口中

open方法返回一个实例，该实例具有如下属性：

• close(result)：关闭模态窗口并传递一个结果
• dismiss(reason)：撤销模态方法并传递一个原因
• result：一个契约，当模态窗口被关闭或撤销时传递
• opened：一个契约，当模态窗口打开并且加载完内容时传递的变量

另外$modalInstance扩展了两个方法$close(result)、$dismiss(reason)，这些方法很容易关闭窗口并且不需要额外的控制器。

myModelContent.html

<div class="modal-header">
    <h3 class="modal-title">提示</h3>
</div>
<div class="modal-body">
    {{modalContent}}
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">确认</button>
    <button class="btn btn-warning" ng-click="cancel()">退出</button>
</div>

index.html

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
<script src="bower_components/angular/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>

js

'use strict';
let service = angular.module('service', ['ui.bootstrap']);
service.factory('confirmService', function ($modal, $q, $log) {
    return {
        openConfirmWindow: function ($scope, modalContent) {
            let deferred = $q.defer();//生成deferred异步对象
            let modalInstance = $modal.open({
                templateUrl: 'confirm/myModelContent.html',
                controller: 'ModalInstanceCtrl',
                size: 'sm', //尺寸
                resolve: {
                    data : function(){
                        return {modalContent: modalContent};
                    }
                }
            });
            modalInstance.result.then(function () {
                if(!!modalInstance) {
                    modalInstance.dismiss('cancel');
                }
                deferred.resolve();
            }, function () {
                $log.info('Modal dismissed at: ' + new Date())
            });
            return deferred.promise;
            /*
            var deferred = $q.defer();\\生成deferred异步对象
            deferred.resolve(rtns);\\执行到这里时，改变deferred状态为执行成功，
            返回rtns为从后台取到的数据，可以继续执行then,done返回data为报错，可以继续执行fail
            return deferred.promise;\\起到保护作用，不允许函数外部改变函数内的deferred状态
            把项目上的代码删去函数内容放上来，用于展示$q 的用法：
            $q用于ajax异步请求数据的回调控制deferred
            controller把数据请求发给service，
            service把请求给factory('myHttp',['$q',function($q){........}]);
            */
        }
    }
});
service.controller('ModalInstanceCtrl', function ($scope, $modalInstance, data) {
    $scope.modalContent = data.modalContent;
    $scope.ok = function () {
        $modalInstance.close(); // 点击确认后关闭弹窗
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel'); // 点击取消后撤销模态框
    }
});

使用

service.controller('customerCtrl', function ($scope, $modalInstance, data) {
    $scope.delete = function(id) {
      var modalTitle = '提示！';
      var modalContent = '确定删除吗？';
      confirmService.openConfirmWindow(modalTitle,modalContent).then(function() {
        // 点击确认后的操作
      });
    };
});