bootstrap模态框

原创性声明：本文完全为笔者原创，请尊重笔者劳动力。转载务必注明原文地址。

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了,于是也改了下名字：发现还是报错：

不理解$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（模态框）

感谢参考资料的作者以及他们参考的作者，感谢他们无私的分享！
有什么错误或不足之处，还请批评指正！谢谢大家！