模态框应用也有很多,目前项目中基于boot和ng开发,boot自带的模态框有利也有弊,当权限控制点击不弹页面时,会比较麻烦,所以整理了一下ngDialog的用法。
需要的外部文件
<link rel="stylesheet" href="css/ngDialog-theme-default.css"/>
<link rel="stylesheet" href="css/ngDialog-theme-plain.css"/>
<link rel="stylesheet" href="css/ngDialog.min.css"/>
<script src="js/ngDialog.min.js"></script>
第一个弹框
<script type="text/ng-template" id="first.html">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">头部</h4>
</div>
<div class="modal-body">
body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="cancle()">取消</button>
<button type="button" class="btn btn-primary" ng-click="another()">确认</button>
</div>
</script>
another对应的另一个弹框
<script type="text/ng-template" id="another.html">
</script>
对应的js
ngDialog.open({
template:'first.html',
className:'ngdialog-theme-default ngdialog-theme-dadao',
controller:['$scope','$http',function($scope,$http){
$scope.cancle = function(){
$scope.closeThisDialog();
};
$scope.another = function () {
$scope.closeThisDialog();
ngDialog.open({
template:'another.html',
className:'ngdialog-theme-default ngdialog-theme-dadao',
controller:['$scope',function($scope){
}];
]}
};
}]
};
实际就是套用,有更好的方法的话,还请高手不吝赐教。