Bootstrap+AngularJS对话框实例

<script type="text/javascript" src="/assets/JS/plugins/jquery.min.js"></script>
<script type="text/javascript" src="/assets/JS/plugins/jquery-migrate.min.js"></script>
<script type="text/javascript" src="/assets/JS/AngularJS/angular.js"></script>
<script type="text/javascript" src="/assets/JS/AngularJS/i18n/angular-locale_zh.js"></script>
<!-- AngularJs+Bootstrap -->
<script src="/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、搞定收工

上一篇:【C语言】符号优先级


下一篇:AspNet Mvc 路由解析中添加.html 等后缀 出现404错误的解决办法