Angular之模态弹窗ui-bootstrap-modal及轻量级弹窗ngDialog
ui-bootstrap 中模态
官网 angular-ui-bootstrap 对于ui-bootstrap集成大量指令如折叠ui.bootstrap.accordion、时间插件ui.bootstrap.datepicker、接下来要说明的模态窗ui.bootstrap.modal等.....
疑问？ angular-ui-bootstrap-1.3.2 引入时遇到问题：
Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal
解决 angular-1.5.5 问题得以解决
官网案列——模态效果
ui-bootstrap-modal在线编辑代码 请猛点击这里
ui-bootstrap-modal实现Demo[折叠]如下
<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ui.bootstrap 模态窗</title>
<link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.min.css" />
<script type="text/javascript" src="framework/angular-1.5.5/angular.js"></script>
<script src="framework/angular-ui-bootstrap-1.3.2/ui-bootstrap-tpls.min.js"></script>
</head>
<body ng-controller="ModalDemoCtrl">
<div style="padding: 20px;">
<button type="button" class="btn btn-primary" ng-click="open()">Open me!</button>
<button type="button" class="btn btn-success" 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>
<script type="text/javascript">
var myModal = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
myModal.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;
}
}
});
//模态实例---ModalDemoCtrl中的$scope
//接收点击ok参数
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}; $scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
}); //$uibModalInstance是模态窗口的实例
myModal.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items1) {
$scope.items = items1;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
//$scope.selected.item 值传到
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
</script> <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>
</body>
</html>
ngDialog 轻量级弹窗
官网 ng-dialog
<!DOCTYPE html>
<html lang="en" ng-app="indexApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入第三方样式库bootstrap.min.css-->
<link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="framework/ngDialog-0.6.4/css/ngDialog.css">
<link rel="stylesheet" href="framework/ngDialog-0.6.4/css/ngDialog-theme-default.css"> <link rel="stylesheet" href="css/main.css" />
<!--引入js库anglarjs-->
<script type="text/javascript" src="framework/1.3.0.14/angular.js"></script>
<script type="text/javascript" src="framework/ngDialog-0.6.4/js/ngDialog.js"></script>
</head>
<body ng-controller="indexCtrl">
<button class="btn btn-primary" ng-click="clickToOpen()">弹窗</button>
<script>
var myModal = angular.module('indexApp',['ngDialog']);
myModal.controller('indexCtrl',function($scope,ngDialog, $http){ $http.get('cardInfo/cardInfo.json').success(function(data) {
$scope.cardInfo = data;
}); $scope.clickToOpen = function () {
ngDialog.open({
template: 'templateId.html',
className:'ngdialog-theme-default ngdialog-theme-plain',
scope: $scope,
width: '60%',
controller:function($scope){
$scope.show = function(){
$scope.closeThisDialog(); //关闭弹窗
}
}
});
};
})
</script> <script type="text/ng-template" id="templateId.html">
<div class="ui-dialog-title ">卡片详情信息</div>
<div class="ui-dialog-content">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>场所名称</th>
<th>门名称</th>
<th>员工姓名</th>
<th>员工电话</th>
<th>卡号</th>
<th>开卡日期</th>
<th>部门名称</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cardInfos in cardInfo">
<td>{{cardInfos.place}}</td>
<td>{{cardInfos.doorName}}</td>
<td>{{cardInfos.name}}</td>
<td>{{cardInfos.phoneNumber}}</td>
<td>{{cardInfos.cardNumber}}</td>
<td>{{cardInfos.carDate | date: 'yyyy-MM-dd' }}</td>
<td>{{cardInfos.department}}</td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary" ng-click="show()">保存</button>
<button type="button" class="btn btn-default" ng-click="closeThisDialog()">取消 </button>
</div>
</script>
</body>
</html>
Angular之模态弹窗ui-bootstrap-modal及轻量级弹窗ngDialog的更多相关文章
- bootstrap Modal或者 bootbox弹窗时，页面混动至顶部
bootstrap使用Modal时,页面自动滚动至了最顶部, 调用bootbox时,也是如此 查了半天资料,最后参考下述帖子,解决问题 https://stackoverflow.com/questi ...
- Angular -ui - BootStrap组件的解释以及使用
关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...
- Bootstrap modal模态框关闭时，combobox input下拉框仍然保留在页面上
问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...
- 重置 Bootstrap modal 模态框数据
利用 Bootstrap modal 模态框弹层添加或编辑数据,第二次弹出模态框时总是记住上一次的数据值,stackoverflow 上找到个比较好的方法,就是利用 jQuery 的 clone 方法 ...
- 对bootstrap modal的简单扩展封装
对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677 注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...
- Bootstrap modal.js 源码分析
/* ======================================================================== * Bootstrap: modal.js v3 ...
- iOS开发UI篇—Modal简单介绍
iOS开发UI篇—Modal简单介绍 一.简单介绍 除了push之外,还有另外一种控制器的切换方式,那就是Modal 任何控制器都能通过Modal的形式展⽰出来 Modal的默认效果:新控制器从屏幕的 ...
- Bootstrap modal常用参数、方法和事件
Bootstrap modal(模态窗)常用参数.方法和事件: 参数: 名称 类型 默认值 描述 Backdrop Boolean或字符串“static” True True:有背景,点击modal外 ...
- bootstrap modal 监听滚动条事件
bootstrap modal 里面使用datetimepicker时间控件,滚动时,时间控件并不会隐藏,这是一个小bug,在组里改下,当滚动条滚动时,直接隐藏这个时间控件,$("#alar ...
随机推荐
- JavaScript 二进制转文件
关于在javascript下,如何将二进制转换成相应的文件并下载. 首先, 我们需要得到二进制的数据以及相应的文件格式,没有相应的格式也可以,可以通过二进制来判断,但相对会麻烦很多,所以建议可以要求后 ...
- zepto 事件分析2($.on)
这里主要分析zepto事件中的$.on函数,先看一下该函数的代码 $.fn.on = function(event, selector, data, callback, one){ var autoR ...
- jquery获取checkbox是否选择的值
//是否被选中验证有选中的设置为true,否设置为false function myCheckbox() { flag += 1; if (flag%2 == 0){ $('#isSelf').att ...
- Eclipse中SVN插件的安装和配置(离线安装)
Eclipse利用svn的离线安装包进行配置svn,这种方式配置起来很简单,但是前提是必须下载可用的的svn离线包.因为有的从网上下载的svn离线包有问题. 第一步:下载svn离线包 我下载的是下面这 ...
- JavaScript如何工作:内存管理+如何处理4个常见的内存泄漏
摘要: 作者将自己常用的JavaScript模块分享给大家. 原文:JavaScript如何工作:内存管理+如何处理4个常见的内存泄漏 作者:前端小智 Fundebug经授权转载,版权归原作者所有. ...
- linux服务器重启指令
一.Linux 的五个重启命令 1.shutdown 2.poweroff 3.init 4.reboot 5.halt 二.五个重启命令的具体说明 shutdown reboot 在linux下一些 ...
- vue2 切换路由时 页面滚动到顶部 用游览器返回时 记住上页的位置
官方用例:https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html import Vue from 'vue' import Route ...
- CSS3布局之多列布局columns详解
columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列 ...
- cf55D. Beautiful numbers(数位dp)
题意 题目链接 Sol 看到这种题就不难想到是数位dp了. 一个很显然的性质是一个数若能整除所有位数上的数,则一定能整除他们的lcm. 根据这个条件我们不难看出我们只需要记录每个数对所有数的lcm(也 ...
- 利用Fiddler修改请求信息通过Web API执行Dynamics 365操作(Action)实例
本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复261或者20170724可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong.me ...