项目中以前就经常用到模态框,但是一直没有时间来整理,
好在今天稍微有点时间,就来讲一下angular-ui-bootstrap-modal这个功能要怎么来做,以及其中不得不提的几个点
首先还是最基础的类库引入,官方网站是提了一下版本的
https://angular-ui.github.io/bootstrap/这里给个网址可以自己看一下
然后在其中版本依赖就说了这么几个点
angular的版本要在1.4.x以上,1.5.5版本还在测试中,然后ui-bootstrap-tpls.js这个类库是在0.14.3以上,然后其他的组件要求都是在1.5.5一下就可以了
因为现在官方最新的angular版本好像是1.5.7,注意一下这个点就可以了,其他的问题应该都不大,
该怎么引入还是怎么引入
那么接下来直接看我的引入版本吧
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
这是我用的类库版本,当然如果你不能*的话,最好还是把这些类库down下来,
直接用bower就可以了
bower install angular --save
bower install angular-bootstrap -save
bower install angular-animate -save
bower install bootstrap --save
这里提一下,ui-bootstrap-tpls.js这个类库是在angular-bootstrap这个包里面的,然后就是版本注意一下,就不会有问题了,
ok,文件引入做好了,接下来就是做一个modal
首先还是html
<div ng-controller="ModalDemoCtrl">
<!-- 这里就是控制器的内容 ,然后直接在控制器里面插入modal的页面元素-->
<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><buttontype="button"class="btn btn-default"ng-click="open()">Open me!</button><buttontype="button"class="btn btn-default"ng-click="open('lg')">Large modal</button><buttontype="button"class="btn btn-default"ng-click="open('sm')">Small modal</button><buttontype="button"class="btn btn-default"ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button><divng-show="selected">Selection from a modal: {{ selected }}</div></div>
然后在引入自己写的一个控制器文件app.js
<script src="app.js"></script>
重点就是接下的几点了
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
//必须要引入的模块有两个ngAnimate\ui.bootstrap,一个都不能少,必须在这个模板加载的时候引入
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
//然后就是主控制器,没什么,注意$uibModal这个东西,也是要在控制器中引入的
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
//这里很关键,是打开模态框的过程
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,//打开时的动画开关
templateUrl: 'myModalContent.html',//模态框的页面内容,这里的url是可以自己定义的,也就意味着什么都可以写
controller: 'ModalInstanceCtrl',//这是模态框的控制器,是用来控制模态框的
size: size,//模态框的大小尺寸
resolve: {//这是一个入参,这个很重要,它可以把主控制器中的参数传到模态框控制器中
items: function () {//items是一个回调函数
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;//动画效果
};
});
// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
//这是模态框的控制器,记住$uibModalInstance这个是用来调用函数将模态框内的数据传到外层控制器中的,items则上面所说的入参函数,它可以获取到外层主控制器的参数
$scope.items = items;//这里就可以去外层主控制器的数据了
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
//close函数是在模态框关闭后调用的函数,他会将这个参数传到主控制器的results函数中,作为回调值
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
//dismiss也是在模态框关闭的时候进行调用,而它返回的是一个reason
$uibModalInstance.dismiss('cancel');
};
});
关于modal控制器中的close与dismiss这两个函数,我在网上找了一个详细的说明
意思就是说close呢是用于关闭模态框的方法,返回的是一个result--结果
dismiss也是用于关闭模态框的方法,但返回的是一个reason--理由
这么说应该很好理解了吧,
再说的详细一点就是,,,看代码
modalInstance.result.then(function (selectedItem) {
//dosomething
});
modalInstance.reason.then(function (selecteItem) {
//dosomething
});
这样总好理解了吧,哈哈,就是这样啦
angular-ui-bootstrap-modal必须要说的几个点(转)的更多相关文章
-
Angular -ui - BootStrap组件的解释以及使用
关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...
-
angular ui $modal 使用 option
$modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示ht ...
-
对bootstrap modal的简单扩展封装
对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677 注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...
-
Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上
问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...
-
Bootstrap modal.js 源码分析
/* ======================================================================== * Bootstrap: modal.js v3 ...
-
前端 angular 和 bootstrap 的安装步骤
1.安装bower模块: npm install -g bower --registry=http://registry.npm.taobao.org 2.创建.bowerrc 文件存放 前端相关的模 ...
-
Bootstrap Modal 垂直方向加滚动条
原文链接:http://blog.****.net/cyh1111/article/details/52960747 背景 使用Bootstrap Modal实现用户资料修改,由于用户信息过多,默认M ...
-
Bootstrap modal垂直居中
Bootstrap modal垂直居中 在网上看到有Bootstrap2的Modal dialog垂直居中问题解决方法,这种方法自己试了一下,并不能完全居中,并且窗口的大小不一样的话,每次显示的m ...
-
iOS开发UI篇—Modal简单介绍
iOS开发UI篇—Modal简单介绍 一.简单介绍 除了push之外,还有另外一种控制器的切换方式,那就是Modal 任何控制器都能通过Modal的形式展⽰出来 Modal的默认效果:新控制器从屏幕的 ...
-
[转]jQuery UI Dialog Modal Popup Yes No Confirm example in ASP.Net
本文转自:http://www.aspsnippets.com/Articles/jQuery-UI-Dialog-Modal-Popup-Yes-No-Confirm-example-in-ASPN ...
随机推荐
-
[原创] 【2014.12.02更新网盘链接】基于EasySysprep4.1的 Windows 7 x86/x64 『视频』封装
[原创] [2014.12.02更新网盘链接]基于EasySysprep4.1的 Windows 7 x86/x64 『视频』封装 joinlidong 发表于 2014-11-29 14:25:50 ...
-
a 标签中调用js的几种方法
我们常用的在a标签中有点击事件: 1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问 ...
-
substring()、 substr() 、slice()的区别:
stringObject.substring(start,stop) 用于提取字符串中介于两个指定下标之间的字符.start必需.一个非负的整数,规定要提取的子串的第一个字符在 stringObjec ...
-
iOS开发--开发者帐号
iOS应用上线 http://www.jianshu.com/p/ffddc5e5f0b9 http://www.jianshu.com/p/986e02d38f1b 好不容易终于申请下来了ios 公 ...
-
underscorejs-every学习
2.10 every 2.10.1 语法: _.every(list, predicate, [context]) 2.10.2 说明: 对list集合的每个成员根据predicate进行真值检测,如 ...
-
总结分享十大iOS开发者最喜爱的库 分类: ios相关 app相关 2015-04-03 16:43 320人阅读 评论(0) 收藏
该10大iOS开发者最喜爱的库由"iOS辅导团队"成员Marcelo Fabri组织投票选举而得,参与者包括开发者团队,iOS辅导团队以及行业嘉宾.每个团队都要根据以下规则选出五个 ...
-
关于Linux的虚拟内存管理
在linux中可以通过free指令查看当前内存,在后面加-m参数能让数字单位显示为MB. 一般机器,有一个实际内存和一个虚拟内存. swap就是虚拟内存,这个虚拟内存可以是文件,也可以是磁盘分区.通常 ...
-
noj算法 素数环 回溯法
描述: 把1到20这重新排列,使得排列后的序列A满足:a. 任意相邻两个数之和是素数b. 不存在满足条件a的序列B使得:A和B的前k(0 <= k <= 19)项相同且B的第k+1项比A的 ...
-
为 Confluence 6 分发包设置一个邮件会话
最简单设置 Confluence 电子邮件发服务器的方否认就是通过 Confluence 的管理员控制台进行设置.请参考 Configuring a Server for Outgoing Mail ...
-
MySQL 基础--时间戳类型
时间戳数据存储 .TimeStamp的取值范围为'1970-01-01 00:00:01' UTC 至'2038-01-19 03:14:07' UTC: .在存储时间戳数据时先将数据转换为UTC时区 ...