Modal

翻译自官网：https://angular-ui.github.io/bootstrap/#/modal

$uibModal只有一个方法open(options),这个方法的参数有：

1) animation: boolean,默认true, 设置为false可以禁用动画

2) appendTo: angular.element,默认body, 将modal追加到固定的元素中

3) backdrop: boolean/string,默认true, 控制backdrop的存在，控制背景，允许的值：true（默认），false（无背景），“static” - 背景是存在的，但点击模态窗口之外时，模态窗口不关闭

4) backdropClass: string, 额外的CSS类添加到modal backdrop模板

5) bindToController: boolean,默认false, 当和controllerAs一起使用，并且设置为true时，将$scope属性绑定到controller,当使用该属性时，可以在controller中定义$onInit方法，将在初始化后激活

6) controller: function/string/array, modal实例控制器，控制器名字要么是个字符串，要么是个内联函数，optionally wrapped in array notation for dependency injection. 

7) controllerAs: string, example:ctr.

8) keyboard: boolean,默认true,指示是否可以通过点击ESC键退出modal

9) openedClass: string,默认modal-open, 当modal打开时，添加到body的类

10) resolve: object,Members that will be resolved and passed to the controller as locals; it is equivalent of the resolve property in the router,定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个reslove属性，如果需要传递一个objec对象，需要使用angular.copy().

11) scope: $scope, 用于modal的内容的父scope的实例，默认$rootScope

12) size: string,example:lg。 modal窗口的可选后缀，值被追加到modal-类后面，比如modal-lg

13) template: string. modal内容的内联模板

14) templateUrl:string 表示modal内容的模板路径，需要template或者templateUrl

15) windowClass: string 添加到modal窗口的额外的CSS类,指定一个class并被添加到模态窗口中

16) windowTemplateUrl: string,默认uib/template/modal/window.html

17) windowTopClass: string 加到顶级modal窗口的CSS类

return:

open方法返回一个modal实例，一个包含以下属性的对象：

1) close(result): function 可以用来关闭一个modal，传递result,关闭模态窗口并传递一个结果

2) dismiss(reason): function 传递reason来解除一个moal,撤销模态方法并传递一个原因

3) result: promise, 当modal被关闭或因为dismiss被拒绝时是resolved

4) opened: promise,下载好内容模板并解析了所有变量，打开modal时是resolved,当模态窗口打开并且加载完内容时传递的变量

5) closed: promise,当模板关闭,动画结束时是resolved,当模态窗口被关闭或撤销时传递

6) rendered: promsie, 当modal重新绘制是是resolved

 

 

举例

modal.view.html  模态框视图
<div class="container">
    <div class="modal-header kb-modal-header mb0">
        批量忽略
       <span class='pull-right'>X</span>
    </div>
    <div class="modal-body color-333 modal-question">
        <i class="kb-icon-35 bpos-x120 bpos-y80"></i>
        确定要忽略所选问题吗？
    </div>
    <div class="modal-footer pt16 pb16 ml20 mr20 pr0">
        <button class="btn btn-cancel" type="button" ng-click="cancel()">
            取消
        </button>
        <button class="btn btn-confirm" type="button" ng-click='ignore()' >确定</button>
    </div>
</div>

 在主页面的controller中调用，主页面controller  mainCtrl

$scope.ignoreQuestion = function(question) {
           var modalInstance = $uibModal.open({    // modal只有一个方法，就是open方法
                templateUrl: "home/modal.view.html",   // templateUrl指定modal视图位置
                scope: $scope,  
                controller: 'ignoreCtrl',  // 初始化模态范围，即该modal的controller
　　　　　　　　　 size:size, // 大小配置不能自定义大小，只能是sm md lg等这些值
                resolve:{  // 定义一个成员，并将它传递给modal指定的控制器，如果想要传递一个obj对象，需要使用angular.copy(),如果直接传递对象的话，在modal中对该对象做的修改都会直接反应在原来页面上
                    question:function(){  // 定义一个函数，要传入的值以return 形式返回
                        return $scope.question;
                    },
　　　　　　　　　　　　answer:function(){
　　　　　　　　　　　　　　return $scope.answer;
　　　　　　　　　　　　}
                }
            });

　　　　　　modalInstance.result.then(function(result){// $modalInstance.close()正常关闭后执行的函数
　　　　　　　　var rr=result;
　　　　　　　　console.log(rr.key); //1
　　　　　　},function(reason){ // $modalInstance.dismiss('cancel')后执行的函数，取消或退出执行的函数
　　　　　　　　console.log(reason); // cancel
　　　　　　})
        };

 

 modal的controller

angular.module('app')
    .controller('ignoreCtrl',['$scope','$uibModalInstance','question','answer',function($scope,$uibModalInstance,question,answer){
        // 要传入的question  answer依赖于$uibModalInstance,所以$uibModalInstance应该先注入
　　　　$scope.question=question;
　　　　$scope.answer=answer;
　　　　$scope.rr={key:1};
　　　　$scope.cancel=function(){
　　　　　　$uibModalInstance.dismiss('cancel');  // 退出或者取消
　　　　};
　　　　$scope.ignore=function(){
　　　　　　$uibModalInstance.close($scope.answer);  // 关闭并返回当前选项
　　　　}
　　}