Bootstrap+Angularjs自制弹框
指令
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 ==) {
$(elem).modal('hide');
return;
}
if (newValue == ) {
$(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自制弹框的更多相关文章
- 自己写的基于bootstrap风格的弹框插件
自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...
- angularjs指令弹框点击空白处隐藏及常规方法
效果图展示: 第一种方法:angularjs自定义指令: 指令: app.directive('onBlankHide', function () { return { restrict: 'A', ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- bootstrap弹框
http://v3.bootcss.com/javascript/#modals 参考bootstrap官网 模态框做php后端 前端一直不行,但是很多时候 用到ajax都要用到弹框,一直在代码里面找 ...
- Bootstrap学习笔记(9)--模态框(登录/注册弹框)
说明: 1. 上来一个ul先把登录和注册两个链接扔进去,ul的类nav,navbar-nav是导航条,navbar-right让他固定在右侧.每个li的里面,data-toggle="mod ...
- angularJs $mdDialog和$uibModal弹框关闭传值
$mdDialog以一个点击button按钮出现弹框为例: $scope.btn=function($event,row){ var dScope = $scope.$new(true); dScop ...
- bootstrap + angularjs + seajs构建Web Form前端(1)
bootstrap + angularjs + seajs构建Web Form前端(一) 简介 Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark ...
- js弹框3秒后自动消失
开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...
- Bootstrap Modals(模态框)
http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html 描述 Bootstrap Modals(模态框)是使用定制的 Jquery ...
随机推荐
- MySQL-InnoDB Compact 行记录格式
InnoDB存储引擎提供了compact(5.1后的默认格式)和redundant两个格式来存放行记录数据.redundant格式是为了兼容之前的版本而保留. mysql> show table ...
- php性能优化(一)压力測试工具篇
ab使用 Apache附带的压力測试工具ab,很easy使用,而且全然能够摸你各种条件对Webserver发起測试请求.ab能够直接在Webserver本地发起測试请求.这对于须要了解server的处 ...
- Shell脚本:向磁盘中批量写入数据
一.关于本文 工作要做的监控系统需要监控磁盘空间的使用率并报警.在测试这个功能的时候需要模拟两个场景:一是磁盘空间不断增长超过设定的阈值时,需要触发报警机制:二是磁盘空间降落到低于报警阈值的时候,不再 ...
- stm8 I/O口模式配置
复位后的默认配置 :复位之后,所有的引脚都是悬浮输入模式. However, a few pins may have a different behavior. Refer to the datash ...
- [转] JDBC中的Statement和PreparedStatement的区别
以Oracle为例吧 Statement为一条Sql语句生成执行计划,如果要执行两条sql语句select colume from table where colume=1;select colume ...
- Apache Hadoop下一代MapReduce框架(YARN)简介 (Apache Hadoop NextGen MapReduce (YARN))
英文看着头大,先试着翻译一下. E文原文:http://archive.cloudera.com/cdh5/cdh/5/hadoop/hadoop-yarn/hadoop-yarn-site/YARN ...
- xpath的常见操作
1. 获取某一个节点下所有的文本数据: data = response.xpath('//div[@id="zoomcon"]') content = ''.join(data.x ...
- ssh 反向代理和正向代理的文章
搜索原因是,我希望访问家里内网的机器 技术要点: ssh 反向代理,正向代理 隧道 文章摘自: https://my.oschina.net/leejun2005/blog/94401 https:/ ...
- MySQL 自带工具使用介绍
MySQL 数据库不仅提供了数据库的服务器端应用程序,同时还提供了大量的客户端工具程序,如mysql,mysqladmin,mysqldump 等等,都是大家所熟悉的.虽然有些人对这些工具的功能都已经 ...
- Android应用中创建绑定服务使得用户可以与服务交互
原文:http://android.eoe.cn/topic/android_sdk 一个绑定的服务是客户服务器接口上的一个服务器.一个绑定的服务允许组件(如:活动)来绑定一个服务,传送请求,接收响应 ...