博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Modal
阅读量:5297 次
发布时间:2019-06-14

本文共 3582 字,大约阅读时间需要 11 分钟。

翻译自官网:

$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  模态框视图 

 在主页面的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); // 关闭并返回当前选项     }   }

 

转载于:https://www.cnblogs.com/YangqinCao/p/5670666.html

你可能感兴趣的文章
面试题2
查看>>
selenium+java iframe定位
查看>>
P2P综述
查看>>
第五章 如何使用Burp Target
查看>>
Sprint阶段测试评分总结
查看>>
sqlite3经常使用命令&语法
查看>>
linux下编译openjdk8
查看>>
【python】--迭代器生成器装饰器
查看>>
Pow(x, n)
查看>>
安卓当中的线程和每秒刷一次
查看>>
MySQL Proxy
查看>>
随机颜色值
查看>>
每日一库:Modernizr.js,es5-shim.js,es5-safe.js
查看>>
目录相关的操作
查看>>
C++----练习--引用头文件
查看>>
ajax连接服务器框架
查看>>
wpf样式绑定 行为绑定 事件关联 路由事件实例
查看>>
利用maven管理项目之POM文件配置
查看>>
FUSE-用户空间文件系统
查看>>
 VS2012 C#调用C++ dll
查看>>