Bootstrap和Angularjs配合自制弹框的实例代码


Posted in Javascript onAugust 24, 2016

指令

directive('bsPopup', function ($parse) {
return {
require: 'ngModel',
restrict: 'A',
link: function (scope, elem, attrs, ctrl) {
scope.$watch(function () {
return $parse(ctrl.$modelValue)(scope);
}, function (newValue) {
if (newValue ==0) {
$(elem).modal('hide');
return;
}
if (newValue == 1) {
$(elem).modal('show');
return;
}
});
}
}
});
<button class="btn btn-xs btn-warning" data-target="#myModal" data-toggle="modal" ng-click="sss()">弹框</button>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" bs-popup="" ng-model="test"
id="myModal" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header alert-info">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 id="myModalLabel" class="modal-title">弹框</h4>
</div>
<div class="modal-body">
<button class="btn btn-info" ng-click="hhh()">测试</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

以上所述是小编给大家介绍的Bootstrap和Angularjs配合自制弹框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
js DOM模型操作
Dec 28 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
js倒计时抢购实例
Dec 20 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
总结Javascript中的隐式类型转换
Aug 24 #Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 #Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 #Javascript
JS for...in 遍历语句用法实例分析
Aug 24 #Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 #Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 #Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 #Javascript
You might like
DC动漫人物排行
2020/03/03 欧美动漫
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
javascript 面向对象 function类
2010/05/13 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python操作串口的方法
2015/06/17 Python
解析Python中while true的使用
2015/10/13 Python
Python实现翻转数组功能示例
2018/01/12 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python字符串的常见操作实例小结
2019/04/08 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
函授毕业自我鉴定
2014/02/04 职场文书
一句话工作感言
2014/03/01 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python
Spring 使用注解开发
2022/05/20 Java/Android