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. [SoapUI] 在SoapUI里用Java语言判断Excel单元格为空或者Null时出错

    我取Excel数据时先判断cell是否为"": if(cellValue != ""){     listNumber.add(i);     cellValu ...

  2. 如何透过HTC Vive拍摄Mixed Reality (混合现实)影片

    https://www.vive.com/cn/forum/1706?extra=page%3D1 也许你是一位开发者,想为自己的HTC Vive游戏制作酷炫的宣传片:或者你是游戏主播,想为观众带来高 ...

  3. Javascript中apply、call、bind

    网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且列出一些它们的妙用加深记忆. apply.call 在 javascript ...

  4. 我需要在Web上完成一个图片上传的功能

    我需要在Web上完成一个图片上传的功能. 这个页面需要能从手机中选择图片上传. 首先,这个页面是从微信上面触发的,所以修改了微信的的入口地址,增加了身份识别号作为传参. 跳转到页面的时候,页面先检查身 ...

  5. web sql database数据存储位置

    Q1: 数据存储在哪儿? Web Storage / Web SQL Database / Indexed Database 的数据都存储在浏览器对应的用户配置文件目录(user profile di ...

  6. NoSQL生态系统——一致性RWN协议,向量时钟,gossip协议监测故障

    13.5 一致性 在NoSQL中,通常有两个层次的一致性:第一种是强一致性,既集群中的所有机器状态同步保持一致.第二种是最终一致性,既可以允许短暂的数据不一致,但数据最终会保持一致.我们先来讲一下,在 ...

  7. Linux下搭建DNS服务器

    1. 安装需要的软件 由于实验过程是在自己电脑进行的,所以需要安装bind bind-chroot,以下为安装过程. 图1-1 安装bind 图1-2 安装bind-chroot 2.修改DNS主配置 ...

  8. ASP.NET MVC4 请不要将你的Control命名为APIController

    今天小猪就遇到了这个坑,虽然小猪知道MVC4已经默认提供了APIController类,这样如果某Control继承自这个APIController的话会使用其自带的REST服务等等,但是之前小猪想我 ...

  9. Dom4j解析xml

    public class Dom4jTest { // Dom4j解析xml // 因为所有的方法都需要Dom树 static Document document = null; static Ele ...

  10. 四核exynos4412开发板使用网线上网注意事项

    问:RP4412开发板板子可以插网线上网? 答:可以.支持WIFI.LAN.3/4G上网的.插网线没? 问:我插了,他还是提示让我连wifi. 答:你是上网页还是其他的APP. 网页可以直接打开,有部 ...