模态框应用也有很多,目前项目中基于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>
第一个弹框
another对应的另一个弹框<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>
对应的js<script type="text/ng-template" id="another.html"> </script>
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){ }];
]} }; }] };
实际就是套用,有更好的方法的话,还请高手不吝赐教。