Bootstrap和Angularjs配合自制弹框的实例代码
更新时间:2016年08月24日 11:15:05 作者:haiziguo
今天小编通过本文给大家分享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 ==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配合自制弹框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
AngularJS实现controller控制器间共享数据的方法示例
这篇文章主要介绍了AngularJS实现controller控制器间共享数据的方法,结合简单实例形式分析了AngularJS控制器数据共享的实现方法,需要的朋友可以参考下2017-10-10angularjs学习笔记之三大模块(modal,controller,view)
本文给大家记录的是angularjs的三大模块(modal,controller,view)的使用说明,方便初学者能够顺利的学习angularjs.2015-09-09解决angular双向绑定无效果,ng-model不能正常显示的问题
今天小编就为大家分享一篇解决angular双向绑定无效果,ng-model不能正常显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10一篇文章快速了解Angular和Ionic生命周期和钩子函数
Ionic以AngularJS和ApacheCordova为基础,使用Node.js进行模块管理,使用Html5、Css(SASS)和Javascript技术进行APP开发,这篇文章主要给大家介绍了如何通过一篇文章快速了解Angular和Ionic生命周期和钩子函数的相关资料,需要的朋友可以参考下2021-07-07
最新评论