Angular模態框

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

首先寫好要彈出的模板放在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();
                }
            }
        });
    }



}]);

~；；~完畢！