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() {        // 点击确认后的操作      });    };});