基于 AngularJS 的浮层组件，由 artDialog 演进而来。angular-popups 是一个严格遵循 AngularJS 架构与 web 标准的组件：

1. 使用 AngularJS 自带的 ng-if、ng-show、ng-hide 控制浮层的显示、销毁
2. 支持 ARIA 规范、无障碍焦点管理、快捷键关闭
3. 完全基于 HTML 标签（指令），无需在控制器中进行配置
4. 可以指定元素或鼠标事件对象（$event）对齐
5. 支持模态浮层
6. 对移动端支持友好
7. 轻量（css+js=7kb），不依赖 jQuery 等外部库

You'll need git and a web browser.

Run the following command to check out a local copy of the code.

git clone https://github.com/JenifferWuUCLA/angularjs-popups-demo.git

支持使用 script 标签或者 webpack、requirejs、seajs 调用：

调用

<script src="lib/angular.js"></script>
<script src="dist/angular-popups.js"></script>
<script>
    var app = angular.module('app', ['angular-popups']);
</script>

调用

require('angular-popups');
var app = angular.module('app', ['angular-popups']);

angular-popups 依赖 angular 这个全局模块

包含如下浮层指令：

• dialog 对话框指令
• bubble 气泡指令
• notice 通知消息指令
• popup 透明浮层指令

ng-if、ng-show 如果传入的是 $event，则浮层会定位到事件触发位置

对话框指令

对话框子指令中的事件可以使用 $close() 这个函数，它会调用通用参数 close 中的表达式

• Chrome
• Firefox
• IE9+

Because we are pulling files from a CDN, we are going to need to run angularjs-popups-demo from a web server. There are a few ways to do this, but one of the easiest ways is to use the npm package serve.

The steps are as follows:

1. Install Node.js. You can find all of the information to do that here.
2. Install the serve package by running npm install -g serve from the command line.
3. Navigate to the angularjs-popups-demo directory from the command line and run serve.
4. Go to http://localhost:5000 in your browser to see the application.