原文转至 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

 <!DOCTYPE html>

 <html ng-app="ModalDemo">

 <head>

     <title></title>

     <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

     <script src="lib/angular/angular.min.js"></script>

     <script src="lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.7.0.min.js"></script>

     <script src="lib/angular/i18n/angular-locale_zh-cn.js"></script>

 </head>

 <body>

 <div ng-controller="ModalDemoCtrl">

     <script type="text/ng-template" id="myModalContent.html">

         <div class="modal-header">

             <h3>I'm a modal!</h3>

         </div>

         <div class="modal-body">

             <ul>

                 <li ng-repeat="item in items">

                     <a ng-click="selected.item = item">{{ item }}</a>

                 </li>

             </ul>

             Selected: <b>{{ selected.item }}</b>

         </div>

         <div class="modal-footer">

             <button class="btn btn-primary" ng-click="ok()">OK</button>

             <button class="btn btn-warning" ng-click="cancel()">Cancel</button>

         </div>

     </script>

     <button class="btn" ng-click="open()">Open me!</button>

 </div>

 <script>

     var ModalDemo = angular.module('ModalDemo', ['ui.bootstrap']);

     var ModalDemoCtrl = function ($scope, $modal, $log) {

         $scope.items = ['item1', 'item2', 'item3'];

         $scope.open = function () {

             var modalInstance = $modal.open({

                 templateUrl: 'myModalContent.html',

                 controller: ModalInstanceCtrl,

                 resolve: {

                     items: function () {

                         return $scope.items;

                     }

                 }

             });

             modalInstance.opened.then(function(){//模态窗口打开之后执行的函数

                 console.log('modal is opened');

             });

             modalInstance.result.then(function (result) {

                  console.log(result);

             }, function (reason) {

                 console.log(reason);//点击空白区域，总会输出backdrop click，点击取消，则会暑促cancel

                 $log.info('Modal dismissed at: ' + new Date());

             });

         };

     };

     var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

         $scope.items = items;

         $scope.selected = {

             item: $scope.items[0]

         };

         $scope.ok = function () {

             $modalInstance.close($scope.selected);

         };

         $scope.cancel = function () {

             $modalInstance.dismiss('cancel');

         };

     };

 </script>

 </body>

 </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. html5 的 webScoket 和 C# 建立Socket连接

    最近使用的web项目中,需要服务器直接触发前端显示效果. 所以研究了一下websocket: 名词解释: WebSocketWebSocket协议是一种双向通信协议,它建立在TCP之上,同http一样 ...

  2. iPhone深度学习-ARM

    平台 xCode 5.0 iPhone 4 在Building setting中的 Architectures 部分,有这么一个选项 Architectures,这里有一些选项是 Armv7 和Arm ...

  3. SQL server 数据连接池使用情况检测

    1.依据HOST_NAME请求session_id 查询 select DB_NAME(database_id) dbname,login_name,t1.session_id,t1.request_ ...

  4. 【电脑使用经验】怎么查看无线网络中电脑的IP地址？

    1. 2. 3. 4. 5.

  5. weblogic内存快速配置

    # IF USER_MEM_ARGS the environment variable is set, use it to override ALL MEM_ARGS values USER_MEM_ ...

  6. Unique Binary Search Trees II - LeetCode

    Given n, generate all structurally unique BST's (binary search trees) that store values 1...n. For e ...

  7. 详解Webpack2的那些路径

    Webpack2 中有很多涉及路径参数配置,若不知其所以然,很容易混淆出错.本文尽可能的汇集了 Webpack2 中设计路径的配置,力争深入浅出. context context 是 webpack ...

  8. Code signing is required for product type Unit Test Bundle in SDK iOS 8.0

    I fixed the issue (temporarily) by going to Edit Scheme, then in the Build section, removing my unit ...

  9. If Value Exists Then Query Else Allow Create New in Oracle Forms An Example

    An example given below for Oracle Forms, when a value exists then execute query for that value to di ...

  10. gitbook简单安装和使用

    1.gitbook是用来写书的,支持markdown等 2.在线写 gitbook最新版地址:https://www.gitbook.com/account/ 免费用户只能有一个public和一个pr ...