<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" >
<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、搞定收工