原创性声明：本文完全为笔者原创，请尊重笔者劳动力。转载务必注明原文地址。
angularJS模态框——实际开发中的逐步学习
在之前做的一个项目中，笔者对angular模态框一窍不通，迷迷糊糊的参照jhipster生成的代码，竟也完成了。如今在另一个框架下的项目中，也需要用到模态框，于是从修改bower.json文件，到注入angular module中,总算有一些心得。便及时记录下来。
tip:以下内容比较基础，大神轻喷！
背景：由于当时项目中并没用到bootstrap，因此，angular模态框需要依赖的组件是缺少的。
当时，找到以前项目的$model代码，带来用:
$modal.open({
templateUrl: 'scripts/app/entities/userInfo/userInfo-dialog.html',
controller: 'UserInfoDialogController',
size: 'lg',
resolve: {
entity: ['UserInfo', function(UserInfo) {
return UserInfo.get({id : $stateParams.id});
}]
}
});
发现直接报错。
Unknown provider: $modalProvider <- $modal <- column
后来上网查了下，发现$modal改名为$uibModal了,于是也改了下名字：发现还是报错：
于是查资料。发现，首先需要在angular.module()中注入'ui-bootstrap' 模块，于是加了，可还是报错，才发现项目中根本没有用的bootstrap，相关的bootstrap依赖都没有引入，于是在bower.json中的依赖项中加入了：
"bootstrap": "*",
"angular-bootstrap": "*"
接着到项目的根目录下cmd运行bower update(前提是要先装好bower哦),安装完毕后，刷新项目，重新运行。没想到还是错误。
提示
'ui-bootstrap' 不理解，原来，并没有将bower update后下载的js和css文件引入index.html中，于是将文件引入：
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
重新运行，总算是成功了！
下面就该弥补当年迷迷糊糊完成模块框的遗憾了。具体学习一下$uibModal怎么用。
贴一段code:
angular.module('app' , function($uibModal) {
$scope.openDemo = function(sqlState, indexNum) {
$uibModal.open({ // 打开一个模态框
//template: "<div></div>", //DOM视图元素
templateUrl: 'views/useScenarioDemo.html', //模态窗视图的html路径
controller: 'useScenarioController', //指定模态框对应的控制器
size: 'lg', //字符串，和前缀“model-”组合成类名添加到模态窗口上
animation: true, //默认值, 打开模态框时，是否带有动画
backdrop: true, //默认值
backdropClass: 'className', //字符串，为背景添加类名
keyboard: true, // 默认，是否允许ESC关闭摸态框
scope: $rootScope, //默认值，模态窗口的父作用域对象
resolve: { // 传递到模态框对应控制器中的对象。也可以是一个方法，方法返回值要是一个对象
entity: function() {
return {
sqlState: sqlState,
indexNum: indexNum
}
}
}
});
}
});
代码中各个配置项一目了然。更多配置项及解释可以查看：这里。
此外，模态框只有一个open方法，那如何在模态框中添加点击事件，以方便用户关闭呢？
open()方法的返回值是一个模态实例。它具有如下方法和属性：
- close(result)：关闭模态窗口并传递一个结果
- dismiss(reason)：撤销模态方法并传递一个原因
- result：一个契约，当模态窗口被关闭或撤销时传递
- opened：一个契约，当模态窗口打开并且加载完内容时传递的变量
如何在模态框对应的控制器中调用这些方法呢？
只需要在模态框对应的控制器中注入：$uibModalInstance，同时在函数参数的形参中引入即可。因为$uibModalInstance 即是$uibModal.open()方法的返回实例。可以用它直接调用上面四个方法，实现关闭摸态框。
参考：
- AngularJs的UI组件ui-Bootstrap分享（十）——Model
- AngularJs 弹出框 model（模态框）
感谢参考资料的作者以及他们参考的作者，感谢他们无私的分享！
有什么错误或不足之处，还请批评指正！谢谢大家！
