首页 > 代码库 > Bootstrap+AngularJS对话框实例
Bootstrap+AngularJS对话框实例
<script type="text/javascript" src="http://www.mamicode.com/assets/JS/plugins/jquery.min.js"></script><script type="text/javascript" src="http://www.mamicode.com/assets/JS/plugins/jquery-migrate.min.js"></script><script type="text/javascript" src="http://www.mamicode.com/assets/JS/AngularJS/angular.js"></script><script type="text/javascript" src="http://www.mamicode.com/assets/JS/AngularJS/i18n/angular-locale_zh.js"></script><!-- AngularJs+Bootstrap --><script src="http://www.mamicode.com/Assets/JS/plugins/angularjs/plugins/ui-bootstrap-tpls.min.js"></script>
1、加入jquery和angular的引用
2、加入ui-bootstrap-tpls.min.js,这个是bootstrap对angularjs的封装
3、编写对话框模板
<script type="text/ng-template" id="Service.html"> <div class="portlet box blue "> <div class="portlet-title"> <div class="caption"> <i class="fa fa-gift"></i>服务协议 </div> </div> <div class="portlet-body"> <div class="scroll-body" slimscroll="{height : 500}" style=‘height:500px;‘> <strong style=‘text-align:center‘>服务协议</strong><br /> </div> <ul class="pager"> <li class="previous"> <a href="javascript:;" class="btn blue" ng-click=‘Refuse()‘> <i class="fa fa-angle-left"></i>拒绝 </a> </li> <li class="next"> <a href="javascript:;" class="btn blue" ng-click=‘Agree()‘>同意 <i class="fa fa-angle-right"></i> </a> </li> </ul> </div> </div> </script>
5、添加ng-click事件,如: <a href="javascript:;" ng-click="OpenDlg(‘lg‘)">《服务协议》</a>
6、当然不要忘记了这个: var app = angular.module(‘appMain‘, [‘ui.bootstrap‘]);
7、在控制器中处理打开对话框的点击事件
$scope.OpenDlg=function(size){ var size=size||‘‘;//size是一个窗口大小的参数,可采用lg,sm,默认值空白,以此来控制窗口大小 var modalInstance = $modal.open({ templateUrl: ‘Service.html‘, //模板url controller: ‘ctrlDlgService‘, //控制器 size : size,//默认窗口大小 resolve: { //参数传递 Agree : function() { return [true, false] } } }); modalInstance.opened.then(function(){ console.log(‘modal is opened‘); //模态窗口打开之后执行的函数 }); modalInstance.result.then(function (result) { $scope.selected = result;//窗口点击关闭后的返回值 console.log(‘result:‘+result); }, function (reason) { console.log(reason);//点击空白区域,总会输出backdrop click,点击取消,则会触发cancel $log.info(‘Modal dismissed at: ‘ + new Date()); }); }
8、对话框控制器
app.controller(‘ctrlDlgService‘, function ($scope, $http,$modal,growl,$modalInstance,Agree){ $scope.items = Agree;//获取参数 // 拒绝事件 $scope.Refuse = function() { console.log(‘Refuse‘); $modalInstance.close(false); }; //同意事件 $scope.Agree = function() { console.log(‘Agree‘); $modalInstance.close(true); }; //退出事件 $scope.cancel = function() { $modalInstance.dismiss(‘cancel‘); } })
9、搞定收工
Bootstrap+AngularJS对话框实例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。