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中$injector、$rootScope和$scope的概念和关联关系深入分析
这篇文章主要介绍了AngularJS中$injector、$rootScope和$scope的概念和关联关系,结合实例形式较为深入的分析了$injector、$rootScope和$scope的概念、功能、使用方法及相互之间的关系,需要的朋友可以参考下2017-01-01
详解AngularJs中$sce与$sceDelegate上下文转义服务
这篇文章给大家详细介绍了AngularJs提供的严格上下文转义服务$sce与$sceDelegate,文中介绍的很详细,有需要的朋友们可以参考借鉴。2016-09-09


最新评论