AngularJs 弹出模态窗口 $uibModal

2017-05-12

uibModal是一种创建模态窗口的服务（模态框）。创建模态很简单：创建模板和控制器，并在使用时引用它们 uibModal

详细API: https://www.jianshu.com/p/2cbf835509b1

使用angularJs 的指令库 ui-bootstrap 弹出模态窗口：
注入服务：’$uibModal’(不能和$uibModalInstance在同一controller中会报错)

该$uibModal服务只有一个方法：open(options)。

app.js

var App = angular.module('MyApp', [
    'ngRoute',
    'ngAnimate',
    'ngStorage',
    'ngCookies',
    'pascalprecht.translate',
    'ui.bootstrap',
    'ui.router',
    'oc.lazyLoad',
    'cfp.loadingBar',
    'ngSanitize',
    'ngResource',
    'tmh.dynamicLocale',
    'ui.utils',
    'ui.select2'
]);

按钮点击实现模态框（$uibModal）功能

HTML自己写div就行代码运行时会自动生成父级modal
1
2
3
<div class="listModel" >

</div>

调节div大小并剧中默认class是.modal-dialog

.modal-dialog {
   width: 850px;
   margin: 30px auto;
}

App.controller('emergencyContrl',[
'$scope','$http','$uibModal',function ($scope,$http,$uibModal){
   $scope.showList = function(){
       var modalInstance = $uibModal.open({

           //模态框的模板链接，与template必须选择一个

           templateUrl: 'app/views//emergency-listDetails.html',

           //为模态框指定一个Controller
           //既可以使用controller的名字，也可以直接指定处理方法

           controller: 'listModal',

           //模态框大小可以不写最好自定义宽度高度

           size:'lg'

           //弹出模态框时，背景是否置灰true/false
           //指定为'static'，即点击背景不能关闭模态框

           backdrop: 'static',

           //父级的 scope实例

           scope: $scope,
       });
       //模态窗口打开之后执行的函数
        modalInstance.opened.then(function(){
           console.log('modal is opened');
        });

         //模态窗口关闭后执行的函数
        modalInstance.result.then(function (result) {
           console.log('modal is close');
        });
   };
}])

点击关闭模态框 $uibModalInstance

App.controller('listModal',[
'$scope','$http','$uibModalInstance',function ($scope,$http,$uibModalInstance) {
    $scope.closeModal = function () {
        $uibModalInstance.close();
    }
}])

controller 直接指定处理方法(点击关闭模态框)

var modalInstance = $uibModal.open({

 controller: function(){
        templateUrl:templateUrl,
        $scope.closeModal = function () {
            modalInstance.close();//关闭模态框
        },
         backdrop: 'static',
         scope: $scope,
  }

})