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();
                }
            }
        });
    }



}]);

~；；~完毕！