就是頁面上彈出來的小框框啦，操作起來蠻方便的。

首先寫好要彈出的模板放在dialog文件夾中，設置modal-header、modal-body、modal-footer屬性；

模板：

<div class="modal-header"><h4 class="modal-title" id="myModalLabel" style="text-align: left;">編輯</h4> </div> <div class="modal-body"><div class="row"><div class="col-md-12"><div>姓名:<input type="text"><br>密碼:<input type="text"><br> </div></div> </div> </div> <div class="modal-footer"><button type="button" class="btn btn-default btn-sm" ng-click="close()">關閉</button> </div>

我是放在workCtrl控制器中，js如下：

myapp.controller('workCtrl', ['$scope','$uibModal', function($scope,$uibModal){$scope.editor=function(){$uibModal.open({templateUrl:"dialog/edit.html", //引入模板路徑animation: true, //出現的效果backdrop:"static", //讓模板旁邊的點擊無效果size:"md", //模板的大小controller:function($scope,$uibModalInstance){
//關閉窗戶$scope.ok=function(){$uibModalInstance.close();}$scope.close=function(){$uibModalInstance.close();}}});}}]);

~；；~完畢！

轉載于:https://www.cnblogs.com/xiaoluoli/p/6125641.html

總結

以上是生活随笔為你收集整理的Angular模态框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。