如何使用ANGULAR-STRAP的模态框？

大家好，我是IT修真院武汉分院第5期的如何使用webpack学员朱英杰，一枚正直纯洁善良的WEB前端程序员。

1.背景介绍

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

2.知识剖析

在做Web开发的过程中，我们经常会使用弹窗对用户的一些操作进行提示或反馈，但是浏览器本身的alert弹窗样式比较粗糙，给用户带来的视觉体验比较差，在越来越注重用户体验的时代，好的模态框可以让我们用户有更好的体验效果，带来更多的用户好评。

这里给大家介绍一款模态框的组件，AngularStrap中的modal组件，这款模态框组件应该说不是最简单易用的，但是它有一些明显的特点，比如说可以引用自定义的html作为模态框模板，有较多的动画效果支持等。

3.常见问题

引入文件不够导致报错

未引入bootstrap文件而没有样式

未引入angular-motion文件而没有动画效果

4.解决方案

4.1先从组件官网上看好需要引入什么文件，然后自己去cdn上找，不要使用组件demo中给的文件地址有的是不能用的

4.2注意自己的angular模块中的注入项，只要是注入了的模块，一定要有相应模块的注入，有的组件是不需要一些模块的，但是官网为了方便，会将所有组件要用到的模块都注入进来，这个时候要看好，不需要用的模块可以不注入，但是一旦注入了就必须药引入相应的文件

4.3angular组件大部分都要用到boostrap，因此引入bs也是必须的

4.4有的组件缺少动画效果是因为没有引入相应的angular文件，有的时候光引入angular-animate是不够的，还需要使用angular-motion等其他文件

5.编码实战

5.1模态框最基本的使用方法，即挑选任意一个元素，在元素上设置属性以对指令进行绑定，然后在angular的controller中进行对模态框title和content的设置，这个模态框的状态已经可以起到一个基本的对用户进行信息提示的作用。

模态框的基本状态

将模态框backdrop属性设置为false时的状态

5.2以上是对模态框的基本使用，以及简单的属性改变，此外还有动画效果的设置等，但是从功能上来讲，只使用指令去定义的模态框，功能上比较局限。如果想通过自己设置自定义函数的方式来控制模态框的出现或消失，需要自己定义一个模态框

自定义的modal

在使用自定义的modal的时候，之前在元素中的modal指令就不需要了，取而代之的是自己设置的ng-click事件，事件可以来触发modalShow函数，已达到启动模态框的效果。

实际上，这个时候我们对模态框操控的自由度已经很高了，这个modalShow函数不光可以用于在元素上绑定ng-click函数，还可以用于我们自己的任何想让模态框出现的函数中，比如设置一个判断函数，对于特定的结果，就使用modalShow函数，让模态框出现

5.3在上面用法的基础上，angularstrap还提供了一个可控性更加高的方法，可以让我们来解决更多的问题。如果我们不想使用组件给定的模态框样式，而是想使用自己自定义的样式，那我们可以使用modal组件的template-url属性，来引入自己写定的模板

使用自定义模板的模态框

上面的图片即是自定义的模态框，请忽略丑丑的样式，因为样式不是最重要，重要的事情在于这个模态框上多了两个按钮，分别是拒绝和同意按钮，这两个按钮是我加上去的，按钮上分别绑定了设定的自定义函数，那么这就意味着我们可以在模态框中自己去设定需要和用户进行比较复杂的交互了，比如说做个选择，投个票什么的，这个时候模态框已经不单单是起到信息提示的作用了，还有信息的交互。

那么到这里，模态框的一些大家平时能够用到的功能就介绍完了，这个组件在动画效果和属性上还有很多待挖掘的东西，大家感兴趣的话可以自己再去学习一下。

6.拓展思考

异常情况应该如何处理

7.参考文献

angularstrap的官网 

8.更多讨论

大家用过其他哪些好用的模态框组件吗？

课后讨论：

问：引入的angular版本和bs版本有要求吗？

答：angular版本需要在1.2以上，bs版本要在3.0以上

问：可以在自定义的模态框模板中加入输入框吗？

答：可以

问：如何控制模态框的关闭呢？

答：组件有定义好的$show，$hide函数，可以用来控制模态框的显现或消失

PPT链接

【武汉-第161期】如何使用angularstrap模态框_腾讯视频