原文转至 http://blog.csdn.net/violet_day/article/details/17170585

$modal是一个可以迅速创建模态窗口的服务，创建部分页，控制器，并关联他们

$modal仅有一个方法open(options)

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

HTML

  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">
  19.                      <a ng-click="selected.item = item">{{ item }}</a>
  20.                  </li>
  21.              </ul>
  22.              Selected: <b>{{ selected.item }}</b>
  23.          </div>
  24.          <div class="modal-footer">
  25.              <button class="btn btn-primary" ng-click="ok()">OK</button>
  26.              <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
  27.          </div>
  28.      </script>
  29.      <button class="btn" ng-click="open()">Open me!</button>
  30.  </div>
  31.  <script>
  32.      var ModalDemo = angular.module('ModalDemo', ['ui.bootstrap']);
  33.      var ModalDemoCtrl = function ($scope, $modal, $log) {
  34.          $scope.items = ['item1', 'item2', 'item3'];
  35.          $scope.open = function () {
  36.              var modalInstance = $modal.open({
  37.                  templateUrl: 'myModalContent.html',
  38.                  controller: ModalInstanceCtrl,
  39.                  resolve: {
  40.                      items: function () {
  41.                          return $scope.items;
  42.                      }
  43.                  }
  44.              });
  45.              modalInstance.opened.then(function(){//模态窗口打开之后执行的函数
  46.                  console.log('modal is opened');
  47.              });
  48.              modalInstance.result.then(function (result) {
  49.                   console.log(result);
  50.              }, function (reason) {
  51.                  console.log(reason);//点击空白区域，总会输出backdrop 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 弹出框 model（模态框）的更多相关文章

  1. jQuery制作弹出窗（模态框）

    来源:(二少)在南极 ##index.html <!DOCTYPE html><html lang="zh"><head> <meta c ...

  2. 基于bootstrap 在同一个界面弹出不同的模态框

    同一个页面如何操作多个模态框的弹出 <button class="btn btn-info" data-toggle="modal" data-targe ...

  3. sweetalert2 全面替代 alert ，从 sweetalert2 弹出 text 到 弹出 Dom 以及模态框和取消 sweetalert2 的 OK 按钮

    1. 简易基本版 sweetalert 涵盖日常基本的弹出及对话框 2. 升级版本 sweetalert2 满足常见开发工作中的各种要求 3 取消 OK 按钮, 只需要设置 showConfirmBu ...

  4. element-ui 弹出组件的遮罩层在弹出层dialog模态框的上面

     造成的原因: 因为dialog的组件外层div设置了 position:absolute: 属性所以导致遮罩层会在最上面. 解决方法: 在属性内加上这段代码 :append-to-body=&quo ...

  5. angularjs 弹出框 $modal

    angularjs 弹出框 $modal 标签: angularjs 2015-11-04 09:50 8664人阅读 评论(1) 收藏 举报  分类: Angularjs(3)  $modal只有一 ...

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

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

  7. Asp.net点击按钮弹出文件夹选择框的实现（网页）

    本文地址:http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html 在Asp.net网站实际的开发中,比如:需要实现点击一个类似于FileUpload的 ...

  8. php网页，想弹出对话框， 消息框 简单代码

    php网页,想弹出对话框, 消息框 简单代码 <?php echo "<script language=\"JavaScript\">alert(\&q ...

  9. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  10. phoenixframe自己主动化測试平台对div弹出框（如弹出的div登陆框）的处理

    package org.phoenix.cases; import java.util.LinkedList; import org.phoenix.action.WebElementActionPr ...

随机推荐

  1. python常用内建函数

    1.input 读取控制台的输入,输出的是字符串 2.enumerate 遍历数组的时候,能够将index 和item同时返回,返回的每一项包含index,item 3.isinstance(obje ...

  2. Long.ValueOf("String") Long.parseLong("String") 区别 看JAVA包装类的封箱与拆箱

    IP地址类型转换原理: 将一个点分十进制IP地址字符串转换成32位数字表示的IP地址(网络字节顺序). 将一个32位数字表示的IP地址转换成点分十进制IP地址字符串. 1.Long.ParseLong ...

  3. 洛谷 [P3623] 免费道路

    有 k 条特殊边的生成树 我们发现有一些边是必须的,如果把所有的水泥路都加入并查集,再枚举鹅卵石路,如果这条路能再次加入并查集,说明这条路是必须的 水泥路同样 这样就把必需边求出来了,剩下就可以随意加 ...

  4. case when then else 详解

    原文发布时间为:2008-10-15 -- 来源于本人的百度文章 [由搬家工具导入] sql语句判断方法之一 Case具有两种格式。简单Case函数和Case搜索函数。 --简单Case函数 CASE ...

  5. linux下的用户组管理

    用户组管理分两类 如果赋给组什么权限,那么组员就会有什么权限 1.私有组 在创建新用户的时候,就要为用户指定组.如果没有指定,就会默认创建一个与用户名相同的用户组,这个用户组只有该用户一个用户,就被称 ...

  6. EL与OGNL

    EL表达式:  >>单纯在jsp页面中出现,是在四个作用域中取值,page,request,session,application. >>如果在struts环境中,它除了有在上 ...

  7. VIM 的 modeline 和 autocmd

    modeline vim的modeline可以让你针对每个文件进行文件级别的设置,这些设置是覆盖当前用户的vimrc中的设置的.当vim打开一个包含了vim modeline注释行的文件时,会自动读取 ...

  8. Scrapy学习-24-集成elasticsearch

    elasticsearch简单集成到scrapy中 使用elasticsearch的python接口处理数据  https://github.com/elastic/elasticsearch-dsl ...

  9. LeetCode OJ-- Linked List Cycle II **

    https://oj.leetcode.com/problems/linked-list-cycle-ii/ 判断一个链表中是否有环,如果有,求环的开始位置. 按照上道题目的想法,先判断出是否有环来, ...

  10. 用C#将XML转换成JSON

    本文旨在介绍如果通过C#将获取到的XML文档转换成对应的JSON格式字符串,然后将其输出到页面前端,以供JavaScript代码解析使用.或许你可以直接利用JavaScript代码通过Ajax的方式来 ...