本文内容

  • 项目结构
  • 运行结果
  • index.html
  • mymodal.js
  • 参考资料

本文讲解 Angular JS 实现模式对话框。基于 AngularJS v1.5.3、Bootstrap v3.3.6 和 ui-bootstrap-tpls 0.11。ui-bootstrap-tpls 是 AngularJS 利用 bootstrap 封装的控件——AngularJS-ui-bootstrap，网上控件大都利用它，github 上有源代码。

最近研究 ELK，需要用 AngularJS 写个 UI 出来，因为 Kibana 3 是用 AngularJS 写的，我也选择了 AngularJS。

当时想，点击页面按钮弹出个 DIV 出来，DIV 上有一些检索条件，可是实现这个弹出 DIV 功能后，发现不会在 DIV 里初始化时间控件，靠~

为了讲解方便，源代码都加了行号，所以，如果你想自己运行，可以直接去 github 上下载 demo。

下载 Demo

项目结构

 

图 1 项目结构

运行结果

图 2 运行结果：大模态

index.html

   1:  <!DOCTYPE html>
   2:  <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
   3:  <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
   4:  <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
   5:  <!--[if gt IE 8]><!-->
   6:  <html class="no-js">
   7:  <!--<![endif]-->
   8:  <head>
   9:  <meta charset="UTF-8">
  10:  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  11:  <meta name="viewport" content="width=device-width">
  12:  <title>AngularJS 模态对话框</title>
  13:  <link rel="stylesheet"
  14:      href="../src/vendor/bootstrap/dist/css/bootstrap.css">
  15:  </head>
  16:  <body ng-app="myApp" class="body">
  17:      <!-- modal template -->
  18:      <script type="text/ng-template" id="myModelContent.html">
  19:          <div class="modal-header">
  20:              <h3 class="modal-title">模态框</h3>
  21:          </div>
  22:          <div class="modal-body">
  23:              <ul>
  24:                  <li ng-repeat="item in items">
  25:                  <a ng-click="selected.item = item">{{item}}</a>
  26:                  </li>
  27:                  <div class="h2">当前选择： <b>{{selected.item}}</b></div>
  28:              </ul>
  29:          </div>
  30:          <div class="modal-footer">
  31:              <button class="btn btn-primary" ng-click="ok()">
  32:              确认
  33:              </button>
  34:              <button class="btn btn-warning" ng-click="cancel()">退出</button>
  35:          </div>
  36:      </script>
  37:      
  38:      <div class="container h1">AngularJS 模态对话框</div>
  39:      <section class="row">
  40:          <section ng-controller="modalDemo" class="col-md-6"
  41:              style="margin: 40px auto; float: none; background: #fff; padding: 30px;">
  42:              <button class="btn btn-default" ng-click="open('lg')">大模态</button>
  43:              <button class="btn btn-default" ng-click="open()">中模态</button>
  44:              <button class="btn btn-default" ng-click="open('sm')">小模态</button>
  45:              <hr>
  46:              <div class="h1" ng-show="selected">当前选择：{{selected}}</div>
  47:          </section>
  48:      </section>
  49:      <!-- load js -->
  50:      <script src="../src/vendor/angular/angular.js"></script>
  51:      <script
  52:          src="http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
  53:      <script src="../src/js/mymodal.js"></script>
  54:  </body>
  55:  </html>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

说明：

  • 第2~7行，是关于 HTML 5（以下简称 H5） 浏览器兼容的；
  • 第9行，是设置页面编码，如果没有，用 firefox 调试时，你看到编码问题的提醒；
  • 第10、11行，分别是关于 H5 在 Chrome、移动设备的设置；
  • 第13行，是引入 bootstrap.css；
  • 第16行，指定了 AngularJS 的 ng-app 属性“myApp”；
  • 第18~36行，是定义模态对话框的 H5 模板。注意，它在 scrpit 编辑里，并且还起了名字“myModelContent.html”；
  • 第38~48行，是页面的三个按钮，分别显示大、中、小三个尺寸的模态对话框；
  • 第40行，指定了 AngularJS 控制器 ng-controller 属性为“modalDemo”，表明这里面有“动作”；
  • 第42~44行，指定了 ng-click 属性，表明了元素上有点击事件。open 方法定义在后面的 mymodal.js 文件中；
  • 第50~52行，加载 AngularJS 和 ui-bootstrap-tpls 脚本文件；
  • 第53行，加载你自己的 mymodal.js 模态对话框的脚本文件。

mymodal.js

   1:  /**
   2:   * 
   3:   */
   4:  angular.module('myApp', [ 'ui.bootstrap' ])
   5:  // demo controller
   6:  .controller('modalDemo', function($scope, $modal, $log) {
   7:      // list
   8:      $scope.items = [ 'angularjs', 'backbone', 'canjs', 'Ember', 'react' ];
   9:      // open click
  10:      $scope.open = function(size) {
  11:          var modalInstance = $modal.open({
  12:              templateUrl : 'myModelContent.html',
  13:              controller : 'ModalInstanceCtrl', // specify controller for modal
  14:              size : size,
  15:              resolve : {
  16:                  items : function() {
  17:                      return $scope.items;
  18:                  }
  19:              }
  20:          });
  21:          // modal return result
  22:          modalInstance.result.then(function(selectedItem) {
  23:              $scope.selected = selectedItem;
  24:          }, function() {
  25:              $log.info('Modal dismissed at: ' + new Date())
  26:          });
  27:      }
  28:  })
  29:  // modal controller
  30:  .controller('ModalInstanceCtrl', function($scope, $modalInstance, items) {
  31:      
  32:      $scope.items = items;
  33:      
  34:      $scope.selected = {
  35:          item : $scope.items[0]
  36:      };
  37:      // ok click
  38:      $scope.ok = function() {
  39:          $modalInstance.close($scope.selected.item);
  40:      };
  41:      // cancel click
  42:      $scope.cancel = function() {
  43:          $modalInstance.dismiss('cancel');
  44:      }
  45:  });

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

说明：

  • 第4行，在 AngularJS 里定义你的 myApp 模块，并且该模块依赖 ui.bootstrap。ui.bootstrap 在 ui-bootstrap-tpls.js 脚本里；
  • 第6行，定义模态对话框的控制器，参数 $scope、$modal、$log 都是 AngularJS 提供，分别是作用域、模态、日志，希望在 function 里使用；
  • 第10~25行，定义打开模态对话框的 open 方法，这就是页面里 ng-click 调用的方法。并且，第13行，指定了模态对话框对应的控制器，接下来会定义；
  • 第30行，是定义模态对话框的控制器，定了模态对话框中“确定”和“取消”两个事件的方法；
  • 另外，AngularJS 中不用考虑对象创建问题，AngularJS 会自动进行注入依赖。

参考资料

 

下载 Demo

AngularJS 模态对话框的更多相关文章

  1. AngularJS进阶(三十一)AngularJS项目开发技巧之获取模态对话框中的组件ID

    AngularJS项目开发技巧之获取模态对话框中的组件ID 需求 出于项目开发需求,需要实现的业务逻辑是:药店端点击查看"已发货""已收货"订单详情时,模块弹出 ...

  2. MFC编程 | 非模态对话框的定义

    因为课程需要,会用到MFC编程,所以讲一些经验总结下,以便日后使用查询. // 非模态对话框的定义 // 通过单文档菜单调用一个非模态窗口 1.首先在工程里插入一个对话框(如:IDD_DLG_TEST ...

  3. bootstrap dialog 使用模态对话框

    bootstrap3-dialog 使用模态对话框 <div class="modal fade"> <div class="modal-dialog& ...

  4. 【原创】WinForm 模态对话框

    今天解决的一个问题,记录下,以备后用. 问题描述:WinForm程序有超时自动退出功能,但是有些模态对话框不关掉的话会退出失败,原因(猜测): 程序倒计时用的System.Windows.Forms. ...

  5. 关于easyUI的模态对话框

    本文版权归博客园和作者吴双本人共同所有,转载和爬虫请注明原文地址.博客园蜗牛cnblogs.com/tdws 会用easyUI的模态对话框会是我们的开发更加简洁,只需下载这个插件,把需要的文件拖到项目 ...

  6. 自定义AlertView实现模态对话框

    在Windows应用程序中,经常使用模态(Model)对话框来和用户进行简单的交互,比如登录框.在IOS应用程序中,有时我们也希望做同样的事情.但IOS的UI库中,没有模态对话框,最接近那个样子的应该 ...

  7. MFC编程入门之十二（对话框：非模态对话框的创建及显示）

    上一节讲了模态对话框及其弹出过程,本节接着讲另一种对话框--非模态对话框的创建及显示. 非模态对话框显示后,程序其他窗口仍然能正常运行,可以响应用户输入,还可以相互切换.上一讲中创建的Tip模态对话框 ...

  8. MFC编程入门之十一（对话框：模态对话框及其弹出过程）

    加法计算器对话框程序大家照着做一遍后,相信对基于对话框的程序有了些解了,有个好的开始对于以后的学习大有裨益.趁热打铁,这一节讲讲什么是对话框和非模态对话框,以及模态对话框怎样弹出. 一.模态对话框和非 ...

  9. MFC学习笔记（一）向模态对话框传递数据

    声明构造函数为2个参数,具有默认参数的参数须放在后面. CDialogDimmer::CDialogDimmer(CString name,CWnd* pParent /*=NULL*/) : CDi ...

随机推荐

  1. Git使用文档

    建立项目 新建项目 进入gitlab.dev(192.168.14.28) 选择LDAP,用自己的域账号登录 点击右上角的 加号(+)新建项目 填写项目名称 选择组为 Online_Web “Visi ...

  2. Python缩进

    今天练习代码的时候发现一个问题,练习类,我在notepad++上写的代码运行后,复制到pycharm上运行然后报错,看代码 #---coding:utf-8--- #定义一个Person类然后实例化 ...

  3. BufferedOutputStream的学习

    今天写了一下一段代码,结果打开文件却发现要写入文件的内容不仅没写入,原来的内容也消失了,而控制台却显示原文件的内容都被读取出来了,代码如下: FileInputStream fileInputStre ...

  4. eclipse里面构建maven项目详解(转载)

    本文来源于:http://my.oschina.net/u/1540325/blog/548530 eclipse里面构建maven项目详解 1       环境安装及分配 Maven是基于项目对象模 ...

  5. oracle dblink调用函数

    select  用户名.函数名@DBLINK名称(参数) from dual; e.g. select newbosid@TEST('1234ECMA') from dual; -- 成功执行 sel ...

  6. Java 第一课

    怎么去学习java: 1,课前预习,加深对课上学习的吸收! 2,课后预习,让我们能够对所学内容的掌握! 3.通过画流程图,锻炼逻辑思维能力,学会从程序员的角度去看到问题,摒弃以前的惯性的思维方式!

  7. hdu 5748(求解最长上升子序列的两种O(nlogn)姿势)

    Bellovin Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s): Accepte ...

  8. Neo4j 2.0 M4 发布

    Neo4j 发布了 2.0 的第四个里程碑版本,该版本要求 Java 7 的支持.详细的改进记录请看发行通知. Neo是一个网络——面向网络的数据库——也就是说,它是一个嵌入式的.基于磁盘的.具备完全 ...

  9. 选择哪种方式进行SharePoint的备份

    关于SharePoint的备份还原功能,大家可能都有所了解.但是SharePoint一共有多少种备份方式呢,哪种备份方式是更适合你的呢,本文主要为大家梳理,并且深入的研究一下常见的几种备份方式,以便大 ...

  10. 辐射4 中文武器命名方法, 不用winhex, 直接游戏内操作

    参考资料:https://www.reddit.com/r/fo4/comments/3t354b/tip_you_can_add_text_formatting_italic_underline/h ...