标签： angularjs
2015-11-04 09:50 8664人阅读 评论(1) 收藏 举报
 分类：
Angularjs（3） 

$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)，这些方法很容易关闭窗口并且不需要额外的控制器

  1. <!DOCTYPE html>
  2. <html ng-app="ModalDemo">
  3. <head>
  4. <title></title>
  5. <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6. <script src="lib/angular/angular.min.js"></script>
  7. <script src="lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.7.0.min.js"></script>
  8. <script src="lib/angular/i18n/angular-locale_zh-cn.js"></script>
  9. </head>
  10. <body>
  11. <div ng-controller="ModalDemoCtrl">
  12. <script type="text/ng-template" id="myModalContent.html" />
  13. <div class="modal-header">
  14. <h3>I'm a modal!</h3>
  15. </div>
  16. <div class="modal-body">
  17. <ul>
  18. <li ng-repeat="item in items"><a
  19. ng-click="selected.item = item">{{ item }}</a></li>
  20. </ul>
  21. Selected: <b>{{ selected.item }}</b>
  22. </div>
  23. <div class="modal-footer">
  24. <button class="btn btn-primary" ng-click="ok()">OK</button>
  25. <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
  26. </div>
  27. </script>
  28. <button class="btn" ng-click="open()">Open me!</button>
  29. </div>
  30. <script>
  31. var ModalDemo = angular.module('ModalDemo', [ 'ui.bootstrap' ]);
  32. var ModalDemoCtrl = function($scope, $modal, $log) {
  33. $scope.items = [ 'item1', 'item2', 'item3' ];
  34. $scope.open = function() {
  35. var modalInstance = $modal.open({
  36. templateUrl : 'myModalContent.html',
  37. controller : ModalInstanceCtrl,
  38. resolve : {
  39. items : function() {
  40. return $scope.items;
  41. }
  42. }
  43. });
  44. modalInstance.opened.then(function() {// 模态窗口打开之后执行的函数
  45. console.log('modal is opened');
  46. });
  47. modalInstance.result.then(function(result) {
  48. console.log(result);
  49. }, function(reason) {
  50. console.log(reason);// 点击空白区域，总会输出backdrop
  51. // click，点击取消，则会暑促cancel
  52. $log.info('Modal dismissed at: ' + new Date());
  53. });
  54. };
  55. };
  56. var ModalInstanceCtrl = function($scope, $modalInstance, items) {
  57. $scope.items = items;
  58. $scope.selected = {
  59. item : $scope.items[0]
  60. };
  61. $scope.ok = function() {
  62. $modalInstance.close($scope.selected);
  63. };
  64. $scope.cancel = function() {
  65. $modalInstance.dismiss('cancel');
  66. };
  67. };
  68. </script>
  69. </body>
  70. </html>

angularjs 弹出框 $modal的更多相关文章

  1. angularjs 弹出框 $modal 参数（转）

    angularjs 弹出框 $modal   $modal只有一个方法:open,该方法的属性有: templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用 ...

  2. 留存- angularjs 弹出框 $modal

    $modal只有一个方法:open,该方法的属性有: templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用域为模态的内容使用(事实上,$modal会创建 ...

  3. jquery dialog-优雅的弹出框

    前面一章已经对datepicker的使用,做了简单的说明.这一章主要对dialog如何使用做个说明.         jquery ui-dialog在web开发中运用还是比较多的.最常见的例子就是登 ...

  4. element-ul 处理 组件内的弹出框close问题

    <el-dialog custom-class="rental-pop" :close-on-click-modal="false" :append-to ...

  5. bootstrap的编辑标记 angularjs input 弹出框

    .html <div> {{instance.description}} <span class="glyphicon glyphicon-pencil btn-link& ...

  6. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  7. [Bootstrap]modal弹出框

    写在前面 在实际开发中,为了友好,更需要一种美观的弹出框,js原生的alert,很难满足需求.这里推荐一个bootstrap的弹出框. 一个例子 先看效果吧 代码: <!DOCTYPE html ...

  8. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  9. Bootstrap弹出框(modal)垂直居中

    最近在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话 ...

随机推荐

  1. docker4dotnet #1 – 前世今生 & 世界你好

    作为一名.NET Developer,这几年看着docker的流行实在是有些眼馋.可惜的是,Docker是基于Linux环境的,眼瞧着那些 java, python, node.js, go 甚至连p ...

  2. 项目游戏开发日记 No.0x00000

    14软二杨近星(2014551622) ---恢复内容开始--- 2016-03-17 从开始迈进软件工程专业, 已经快两年了, 记得当初选择软件的理由是, 我要学去做东西, 我享受开发过程. 两年来 ...

  3. babel-loader-presets

    babel-loader的presets的设置有一定的顺序.es2015必须出现在stage-0前面,我记得这是因为es2015是ES6的标准,state-0等是对ES7一些提案的支持, state- ...

  4. 一步步开发自己的博客 .NET版（9、从model first替换成code first 问题记录）

    为什么要改用code first 用过code first的基本上都不会再想用回model first或是db first(谁用谁知道).不要问我为什么不一开始就直接使用code first,因为那个 ...

  5. 微信硬件H5面板开发(一) ---- 调用openApi

    微信硬件平台是微信推出连接物与人,物与物的IOT解决方案.也就是说可以通过微信控制各种智能设备.比如一些蓝牙设备.空调.电视等等. 我本身不懂硬件(虽然是电子信息专业),硬件是北航的两个研究生在弄,小 ...

  6. Windbg Extension NetExt 使用指南 【3】 ---- 挖掘你想要的数据 Managed Heap

    摘要 : NetExt中有两个比较常用的命令可以用来分析heap上面的对象. 一个是!wheap, 另外一个是!windex. !wheap 这个命令可以用于打印出heap structure信息. ...

  7. 2000条你应知的WPF小姿势 基础篇<63-68 Triggers和WPF类逻辑结构>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师.最为出色的是他维护了两个博客:2,000ThingsYou Should Know About C# 和 2,00 ...

  8. ABP框架 - 值对象

    文档目录 本节内容: 简介 值对象基类 最佳实践 简介 “一个表示领域的一个描述性方面的没有概念上的身份对象,称为值对象.“(Eric Evans). 与一个有身份(Id)实体相反,一个值对象没有身份 ...

  9. Redis学习手册(目录)

    为什么自己当初要选择Redis作为数据存储解决方案中的一员呢?现在能想到的原因主要有三.其一,Redis不仅性能高效,而且完全免费.其二,是基于C/C++开发的服务器,这里应该有一定的感情因素吧.最后 ...

  10. Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果

    Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果 前言: 每次写之前都会来一段(废)话.{心塞...} Google Play首页两个tab背景 ...