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配合自制弹框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 详解Angular中实现自定义组件的双向绑定的两种方法

    详解Angular中实现自定义组件的双向绑定的两种方法

    这篇文章主要介绍了详解Angular中实现自定义组件的双向绑定的两种方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • 全面解析Angular中$Apply()及$Digest()的区别

    全面解析Angular中$Apply()及$Digest()的区别

    $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑。这篇文章主要介绍了Angular中$Apply()及$Digest()区别详细说明的相关资料,需要的朋友可以参考下
    2016-08-08
  • js常用正则表达式集锦

    js常用正则表达式集锦

    这篇文章主要介绍了js常用正则表达式集锦,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Angular.js中ng-include用法及多标签页面的实现方式详解

    Angular.js中ng-include用法及多标签页面的实现方式详解

    这篇文章主要给大家介绍了在Angular.js中ng-include用法及多标签页面的实现方式的相关资料,文中通过示例代码介绍的非常详细,相信对大家具有一定的参考学习价值,需要的朋友们下面随着小编一起来学习学习吧。
    2017-05-05
  • AngularJS动态绑定HTML的方法分析

    AngularJS动态绑定HTML的方法分析

    这篇文章主要介绍了AngularJS动态绑定HTML的方法,结合实例形式分析了AngularJS实现动态绑定HTML的相关操作指令用法与使用注意事项,需要的朋友可以参考下
    2016-11-11
  • Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)

    Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)

    这篇文章主要介绍了Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码),需要的朋友可以参考下
    2017-10-10
  • 基于AngularJS实现的工资计算器实例

    基于AngularJS实现的工资计算器实例

    这篇文章主要介绍了基于AngularJS实现的工资计算器,结合具体实例形式分析了AngularJS数值计算相关操作技巧,需要的朋友可以参考下
    2017-06-06
  • AngularJS基础学习笔记之指令

    AngularJS基础学习笔记之指令

    指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用。
    2015-05-05
  • Angular使用Restful的增删改

    Angular使用Restful的增删改

    今天小编就为大家分享一篇关于Angular使用Restful的增删改,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-12-12
  • AngularJS实现的获取焦点及失去焦点时的表单验证功能示例

    AngularJS实现的获取焦点及失去焦点时的表单验证功能示例

    这篇文章主要介绍了AngularJS实现的获取焦点及失去焦点时的表单验证功能,涉及AngularJS使用ng-blur、ng-focus针对表单事件监听相关操作技巧,需要的朋友可以参考下
    2017-10-10

最新评论