指令
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自制弹框的更多相关文章

  1. 自己写的基于bootstrap风格的弹框插件

    自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...

  2. angularjs指令弹框点击空白处隐藏及常规方法

    效果图展示: 第一种方法:angularjs自定义指令: 指令: app.directive('onBlankHide', function () { return { restrict: 'A', ...

  3. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  4. bootstrap弹框

    http://v3.bootcss.com/javascript/#modals 参考bootstrap官网 模态框做php后端 前端一直不行,但是很多时候 用到ajax都要用到弹框,一直在代码里面找 ...

  5. Bootstrap学习笔记(9)--模态框(登录/注册弹框)

    说明: 1. 上来一个ul先把登录和注册两个链接扔进去,ul的类nav,navbar-nav是导航条,navbar-right让他固定在右侧.每个li的里面,data-toggle="mod ...

  6. angularJs $mdDialog和$uibModal弹框关闭传值

    $mdDialog以一个点击button按钮出现弹框为例: $scope.btn=function($event,row){ var dScope = $scope.$new(true); dScop ...

  7. bootstrap + angularjs + seajs构建Web Form前端(1)

    bootstrap + angularjs + seajs构建Web Form前端(一) 简介 Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark ...

  8. js弹框3秒后自动消失

    开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...

  9. Bootstrap Modals(模态框)

    http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html 描述 Bootstrap Modals(模态框)是使用定制的 Jquery ...

随机推荐

  1. 【Visual Studio】Visual Studio中常用的快捷键收集

    添加注释:Ctr+k+c 取消注释:Ctr+k+u 格式化:Ctr+a+k+f 当前光标自动向下移一行:Ctr+Shift+Enter 运行:F5 进入光标指定的方法或是类:F12 在当前文件中查找: ...

  2. 【Android】Android连接SQLite3数据库的操作

    在前面使用SQLite3的时候,并没有留意到有SQLiteOpenHelper这个类,所以只好在Activity里面去创建和维护数据库跟数据表的创建. 但是,现在有了SQLiteOpenHelper这 ...

  3. Swift 封装

    前言 封装主要有两大目的:一是为了我们使用数据更加方便,二是为了数据保护. 1.Swift 访问修饰符 在 Swift 语言中,访问修饰符也分为三类,分别是 private.internal.publ ...

  4. java appium客户端 6.1.0android长按及滑动变更

    今天使用appium 6.1.0 java客户端,发现长按longpress(element),无法使用.如下代码在5.0.4 版本是可以正常运行的, WebElement noteDelete = ...

  5. jenkins执行shell命令提示找不到命令解决办法

    用jenkins执行shell脚本,执行一条命令: #唤醒休眠手机 adb shell input keyevent 提示: [adb] $ /bin/sh -xe /Users/xxxxx/tool ...

  6. 如何利用IPv6进行远程桌面连接

    如何利用IPv6进行远程桌面连接 学校是教育网,其中寝室和实验室的IPv4地址被划分成了两个VLAN,所以没法使用windows的远程连接功能.今天突然想到学校的IPv6地址可能并未划分成两个VLAN ...

  7. webstorm 设置js或者html文件自动缩进为4个空格不生效

    设置 tab 和自动缩进为4个空格不生效,解决办法如下 设置代码缩进 1. 依次打开files —- settings —- Editor —- Code Style —- JavaScript 2. ...

  8. curl以cookie的方式登录

    curl -o /dev/null -s -w ‘%{time_connect}:%{time_starttransfer}:%{time_total}’ --cookie "UM_dist ...

  9. 【Objective-C】OC中KVO的基本概念和使用方法

    基本概念: 键值观察是一种使用获取其他对象的特定属性变化的通知机制. 控制器层的绑定技术就是严重依赖键值观察获得模型层和控制器层的变化通知的. 对于不依赖控制器层类的应用程序,键值观察提供了一种简化的 ...

  10. [na]数据链路层&网络层协议小结截图版

    ip层:分组选路 tcp:端到端的通信 中间系统没必要有应用程序,分组选路即可 应用程序中隐藏所有的物理细节. 语音肯定用udp linux主版本 次版本号 修订号 次版本为偶数说明是稳定版.奇数是开 ...