Model是用来创建模态窗口的，但是实际上，并没有Model指令，而只有$uibModal服务，创建模态窗口是使用$uibModal.open()方法。

创建模态窗口时，要有一个模态窗口的模板和对应的控制器，然后在open()方法的参数中指定它们。来看一个例子：

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

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

             $scope.open = function (size) {

                 var modalInstance = $uibModal.open({

                     templateUrl: 'myModalContent.html',

                     controller: 'ModalInstanceCtrl',

                     backdrop: "static",

                     size: size,

                     resolve: {

                         items1: function () {

                             return $scope.items;

                         }

                     }

                 });

                 modalInstance.result.then(function (selectedItem) {

                     $scope.selected = selectedItem;

                 }, function () {

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

                 });

             };

             $scope.toggleAnimation = function () {

                 $scope.animationsEnabled = !$scope.animationsEnabled;

             };

         });

 //$uibModalInstance是模态窗口的实例

 angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items1) {

             $scope.items = items1;

             $scope.selected = {

                 item: $scope.items[0]

             };

             $scope.ok = function () {

                 $uibModalInstance.close($scope.selected.item);

             };

             $scope.cancel = function () {

                 $uibModalInstance.dismiss('cancel');

             };

         });

     </script>

 </head>

 <body>

     <div ng-controller="ModalDemoCtrl">

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

             <div class="modal-header">

                 <h3 class="modal-title">I'm a modal!</h3>

             </div>

             <div class="modal-body">

                 <ul>

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

                         <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>

                     </li>

                 </ul>

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

             </div>

             <div class="modal-footer">

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

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

             </div>

         </script>

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

         <button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>

         <button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>

         <div ng-show="selected">Selection from a modal: {{ selected }}</div>

     </div>

 </body>

 </html>

背景为灰色，不可操作。效果是这样：

open()中可以使用的参数有：

参数名 默认值 备注
animation true 是否启用动画
appendTo  body 把模态窗口放在指定的dom元素中。例如$document.find('aside').eq(0)
backdrop  true

打开模态窗口时的背景设置。可设置的值有：true（显示灰色背景，在模态窗口之外单击会关闭模态窗口），false

（不显示灰色背景），"static"（显示灰色背景，在模态窗口关闭之前背景元素不可用）
backdropClass   为背景添加的类名
bindToController false 设置为true并且使用controllerAs参数时，$scope的属性会传递给模态窗口所使用的controller
controller  

可以设置为一个表示controller的字符串，或者一个函数，或者一个数组（使用数组标记的方式为控制器注入依赖）。

控制器中可使用$uibModalInstance来表示模态窗口的实例。
controllerAs    controller-as语法的替代写法
keyboard  true  是否允许用ESC键关闭模态窗口
openedClass   modal-open  打开模态窗口时为body元素增加的类名
resolve   传递到模态窗口中的对象
scope $rootScope 模态窗口的父作用域对象
size   一个字符串，和前缀“model-”组合成类名添加到模态窗口上
template   表示模态窗口内容的文本
templateUrl   模态窗口内容的模板url
windowClass   添加到模态窗口模板的类名（不是模态窗口内容模板）
windowTemplateUrl uib/template/modal/window.html   
windowTopClass   添加到顶层模态窗口的类名

全局的设置可以通过$uibModalProvider.options来配置。

使用controller-as语法时，可以为controller注册一个别名，并且将这个controller当作一个普通的Javascript对象，不需要注入$scope，也不需要将视图模型的内容绑定到$scope上。

有两种方式使用controller-as语法：

1 在controller中指定controller:"ModalInstanceCtrl as vm"（不使用controllerAs属性）

2 在controllerAs属性中指定controllerAs:"vm"

这两种方式的效果是一样的。来看这个例子：

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

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

             $scope.open = function (size) {

                 var modalInstance = $uibModal.open({

                     animation: $scope.animationsEnabled,

                     templateUrl: 'myModalContent.html',

                     controller: 'ModalInstanceCtrl',

                     controllerAs: 'vm',

                     backdrop: "static",

                     size: size,

                     resolve: {

                         items1: function () {

                             return $scope.items;

                         }

                     }

                 });

                 modalInstance.result.then(function (selectedItem) {

                     $scope.selected = selectedItem;

                 }, function () {

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

                 });

             };

             $scope.toggleAnimation = function () {

                 $scope.animationsEnabled = !$scope.animationsEnabled;

             };

         });

         //$uibModalInstance是模态窗口的实例

  angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items1) {

             this.items = items1;

             this.selected = {

                 item: this.items[0]

             };

             this.ok = function () {

                 $uibModalInstance.close(this.selected.item);

             };

             this.cancel = function () {

                 $uibModalInstance.dismiss('cancel');

             };

         });

     </script>

 </head>

 <body>

     <div ng-controller="ModalDemoCtrl">

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

             <div class="modal-header">

                 <h3 class="modal-title">I'm a modal!</h3>

             </div>

             <div class="modal-body">

                 <ul>

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

                         <a href="#" ng-click="$event.preventDefault(); vm.selected.item = item">{{ item }}</a>

                     </li>

                 </ul>

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

             </div>

             <div class="modal-footer">

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

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

             </div>

         </script>

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

         <button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>

         <button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>

         <div ng-show="selected">Selection from a modal: {{ selected }}</div>

     </div>

 </body>

 </html>

这个例子中，ModalInstanceCtrl的别名是vm，ModalInstanceCtrl没有注入$scope，所有的属性都使用this绑定到controller对象本身，在视图中使用vm.Items或者vm.ok()来调用controller的对象

$uibModal.open()方法返回一个模态窗口实例，这个实例有几个属性：

属性名 类型 说明
close(result) function 关闭模态窗口，传递一个结果
dismiss(reason)  function 取消模态窗口，传递一个原因
result promise 一个promise，窗口关闭时为resolved，窗口取消时为rejected
opened promise 一个promise，窗口打开并下载完内容解析了所有变量后，promise为resolved
closed promise 一个promise，窗口关闭并且动画结束后为resolved
rendered promise 一个promise，窗口呈现出来后为resolved

除了可以使用模态窗口的实例来关闭和取消窗口（上面例子中的$uibModalInstance.close($scope.selected.item);），和模态窗口关联的scope也可以关闭和取消窗口。如：

 angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items1) {

             $scope.items = items1;

             $scope.selected = {

                 item: $scope.items[0]

             };

             $scope.ok = function () {

                 $scope.$close("aa");

             };

             $scope.cancel = function () {

                 $scope.$dismiss("cancel");

             };

         });

目录：

AngularJs的UI组件ui-Bootstrap分享（一）

AngularJs的UI组件ui-Bootstrap分享（二）——Collapse

AngularJs的UI组件ui-Bootstrap分享（三）——Accordion

AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup

AngularJs的UI组件ui-Bootstrap分享（五）——Pager和Pagination

AngularJs的UI组件ui-Bootstrap分享（六）——Tabs

AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown

AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover

AngularJs的UI组件ui-Bootstrap分享（九）——Alert

AngularJs的UI组件ui-Bootstrap分享（十）——Model

AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead

AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

AngularJs的UI组件ui-Bootstrap分享（十）——Model的更多相关文章

  1. Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu

    1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...

  2. Ionic4.x 中的 UI 组件(UI Components) 日期组件

    1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...

  3. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  4. Ionic4.x 中的 UI 组件(UI Components)表单相关组件

    1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...

  5. 挂号平台首页开发（UI组件部分）

    JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...

  6. AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

    Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

  7. AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

    Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...

  8. AngularJs的UI组件ui-Bootstrap分享（一）

    最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...

  9. AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

    进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条.第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条. 这 ...

随机推荐

  1. selenium2.0关于python的常用函数（一）

    1.通过标签属性Id查找元素 方法:find_element_by_id(element_id) 实例:driver.find_element_by_id("iptUsername" ...

  2. spring-boot 之 使用Admin监控应用

    https://yq.aliyun.com/articles/2322 ************************************* 摘要: Spring Boot提供的监控接口,例如: ...

  3. easyui 复选框 onClickRow事件与onSelect事件与onCheck事件

    在项目中一直存在一个问题,一直都没发现问题的根源在哪里.在我们测试这边也是偶尔会出现.但是每次我去测试的时候也没问题.今天终于找到原因了! 在easyui中点击行和点击复选框触发的事件是不一样的! 点 ...

  4. SQL Server Reporting Service(SSRS) 第四篇 SSRS 用法总结

    1. 如何让表头在每页显示(译) A. 打开高级模式:  在分组栏中点击Column Goups右侧的箭头选择高级模式; B. 找到第一个Static组 在Row Groups区域中(注意不是Colu ...

  5. linux centos 安装mysql

    安装步骤 http://www.cnblogs.com/gaojupeng/p/5727069.html 下面这个报错 主要还是在 题啊加软连接的   命令出了问题 1.启动  报错 mysqld_s ...

  6. Student elective system (VF)

    博客插N+文件有些麻烦,索性PDF上传到百度文库 点击获取<数据库系统原理与应用>也有相应的word版本 word版加密密码:(博客链接加密后) 六.附录 数据库设计的基本步骤,按照规范设 ...

  7. jq中数组应用的错误

    js中数组可以这样使用: <ul id="ul"> <li value="1">s</li> <li>f< ...

  8. JAVA GUI布局管理器

    边界布局管理器: a.布局方式:是把整个容器划分为五个部分.东西南北中,南北要贯通,中间最大 (不仅是中间的范围最大,权利也最大)当周边不存在的时候中间会占领周边,当中间不存在的时候周边不能占据中间 ...

  9. 非常有趣的Console

    原文地址: http://www.helloweba.com/view-blog-383.html 批量去掉或替换文本中的换行符(notepad++.sublime text2) 原文地址:http: ...

  10. CentOS5.4 搭建Hadoop2.5.2伪分布式环境

    简介: Hadoop是处理大数据的主要工具,其核心部分是HDFS.MapReduce.为了学习的方便,我在虚拟机上搭建了一个伪分布式环境,来进行开发学习. 一.安装前准备: 1)linux服务器:Vm ...