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 相关文章推荐
js实现图片轮换效果代码
Apr 16 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
JavaScript实现矩形块大小任意缩放
Aug 25 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
PHP分页类集锦
2014/11/18 PHP
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
Python subprocess模块常见用法分析
2018/06/12 Python
Sanic框架配置操作分析
2018/07/17 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
python的sorted用法详解
2019/06/25 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
Python Map 函数的使用
2020/08/28 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
会务接待方案
2014/02/27 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
2014年保卫工作总结
2014/12/05 职场文书
2015年光棍节活动总结
2015/03/24 职场文书