angular-ui-bootstrap-modal必须要说的几个点(转)

时间:2022-10-20 21:28:44
angular-ui-bootstrap-modal必须要说的几个点
摘要: 基于angular来实现的一个bootstrap模态框,有些不得不说的地方

项目中以前就经常用到模态框,但是一直没有时间来整理,

好在今天稍微有点时间,就来讲一下angular-ui-bootstrap-modal这个功能要怎么来做,以及其中不得不提的几个点

首先还是最基础的类库引入,官方网站是提了一下版本的

https://angular-ui.github.io/bootstrap/这里给个网址可以自己看一下

angular-ui-bootstrap-modal必须要说的几个点(转)

然后在其中版本依赖就说了这么几个点

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这两个函数,我在网上找了一个详细的说明

angular-ui-bootstrap-modal必须要说的几个点(转)

意思就是说close呢是用于关闭模态框的方法,返回的是一个result--结果

dismiss也是用于关闭模态框的方法,但返回的是一个reason--理由

这么说应该很好理解了吧,

再说的详细一点就是,,,看代码

modalInstance.result.then(function (selectedItem) {
//dosomething
});
modalInstance.reason.then(function (selecteItem) {
//dosomething
});

这样总好理解了吧,哈哈,就是这样啦

 

angular-ui-bootstrap-modal必须要说的几个点(转)的更多相关文章

  1. Angular -ui - BootStrap组件的解释以及使用

    关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...

  2. angular ui &dollar;modal 使用 option

    $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示ht ...

  3. 对bootstrap modal的简单扩展封装

    对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677   注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...

  4. Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上

    问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...

  5. Bootstrap modal&period;js 源码分析

    /* ======================================================================== * Bootstrap: modal.js v3 ...

  6. 前端 angular 和 bootstrap 的安装步骤

    1.安装bower模块: npm install -g bower --registry=http://registry.npm.taobao.org 2.创建.bowerrc 文件存放 前端相关的模 ...

  7. Bootstrap Modal 垂直方向加滚动条

    原文链接:http://blog.****.net/cyh1111/article/details/52960747 背景 使用Bootstrap Modal实现用户资料修改,由于用户信息过多,默认M ...

  8. Bootstrap modal垂直居中

    Bootstrap modal垂直居中   在网上看到有Bootstrap2的Modal dialog垂直居中问题解决方法,这种方法自己试了一下,并不能完全居中,并且窗口的大小不一样的话,每次显示的m ...

  9. iOS开发UI篇—Modal简单介绍

    iOS开发UI篇—Modal简单介绍 一.简单介绍 除了push之外,还有另外一种控制器的切换方式,那就是Modal 任何控制器都能通过Modal的形式展⽰出来 Modal的默认效果:新控制器从屏幕的 ...

  10. &lbrack;转&rsqb;jQuery UI Dialog Modal Popup Yes No Confirm example in ASP&period;Net

    本文转自:http://www.aspsnippets.com/Articles/jQuery-UI-Dialog-Modal-Popup-Yes-No-Confirm-example-in-ASPN ...

随机推荐

  1. &lbrack;原创&rsqb; 【2014&period;12&period;02更新网盘链接】基于EasySysprep4&period;1的 Windows 7 x86&sol;x64 『视频』封装

    [原创] [2014.12.02更新网盘链接]基于EasySysprep4.1的 Windows 7 x86/x64 『视频』封装 joinlidong 发表于 2014-11-29 14:25:50 ...

  2. a 标签中调用js的几种方法

    我们常用的在a标签中有点击事件: 1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问 ...

  3. substring&lpar;&rpar;、 substr&lpar;&rpar; 、slice&lpar;&rpar;的区别:

    stringObject.substring(start,stop) 用于提取字符串中介于两个指定下标之间的字符.start必需.一个非负的整数,规定要提取的子串的第一个字符在 stringObjec ...

  4. iOS开发--开发者帐号

    iOS应用上线 http://www.jianshu.com/p/ffddc5e5f0b9 http://www.jianshu.com/p/986e02d38f1b 好不容易终于申请下来了ios 公 ...

  5. underscorejs-every学习

    2.10 every 2.10.1 语法: _.every(list, predicate, [context]) 2.10.2 说明: 对list集合的每个成员根据predicate进行真值检测,如 ...

  6. 总结分享十大iOS开发者最喜爱的库 分类: ios相关 app相关 2015-04-03 16&colon;43 320人阅读 评论&lpar;0&rpar; 收藏

    该10大iOS开发者最喜爱的库由"iOS辅导团队"成员Marcelo Fabri组织投票选举而得,参与者包括开发者团队,iOS辅导团队以及行业嘉宾.每个团队都要根据以下规则选出五个 ...

  7. 关于Linux的虚拟内存管理

    在linux中可以通过free指令查看当前内存,在后面加-m参数能让数字单位显示为MB. 一般机器,有一个实际内存和一个虚拟内存. swap就是虚拟内存,这个虚拟内存可以是文件,也可以是磁盘分区.通常 ...

  8. noj算法 素数环 回溯法

    描述: 把1到20这重新排列,使得排列后的序列A满足:a. 任意相邻两个数之和是素数b. 不存在满足条件a的序列B使得:A和B的前k(0 <= k <= 19)项相同且B的第k+1项比A的 ...

  9. 为 Confluence 6 分发包设置一个邮件会话

    最简单设置 Confluence 电子邮件发服务器的方否认就是通过 Confluence 的管理员控制台进行设置.请参考 Configuring a Server for Outgoing Mail ...

  10. MySQL 基础--时间戳类型

    时间戳数据存储 .TimeStamp的取值范围为'1970-01-01 00:00:01' UTC 至'2038-01-19 03:14:07' UTC: .在存储时间戳数据时先将数据转换为UTC时区 ...