翻译自官网:
$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 模态框视图批量忽略 X确定要忽略所选问题吗?
在主页面的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); // 关闭并返回当前选项 } }