angularjs怎么编写一个公共的弹出层插件

JavaScript09

angularjs怎么编写一个公共的弹出层插件,第1张

恰好写过。

ng的组件分为两种形式，一种是用directive封装的custom element形式的component，比如Button、Tooltip这种；另外一种则是以Service形式封装成一个单例的object由angular的IoC注入到controller中，比如notification、或者你需要的modal。

首先要为modal服务设计API，比如modal.open modal.close, 然后要为弹出的modal设计遮罩层，并且确定当同时有多个modal出现在页面上时，遮罩层唯一。

其次，出于ng的特殊性，每次open一个新modal时，都需要利用ng内置的$compile服务对modal内的模板进行编译，并且为了支持controllerAs的关键词，这部分连接需要手动在服务中处理(具体怎么处理百度一下吧，很容易)

以下是我当初设计时写的一些参数，或许你可以参照。

API:    

.open(options) => Modal Object Instance    

options ::= {    

    template: String | dom<class|Id>,    

    className: String,    

    scope: AngularScope,    

    hooks:{    

        onOpen: Function,    

        onClose: Function    

    },    

    controller:String,    

    controllerAs:String,       

    title: String    

}    

.closeAll    

.close(id)    

id ::= Number

额外的，这里有一个简单的实现，供你参考https://github.com/btford/angular-modal/blob/master/modal.js

一． layer简介

layer是一款基于jquery的弹窗插件，浏览器兼容性很好，功能强大。

通过研究官方示例，发现使用layer分2步：

1.引入js：（jquery在前）

2. 写layer的函数：

二． 初步使用研究

     1. title,maxmin,area:

     2. end,  layer.alert:

3. type和content：

type取值0-4共5个值。他的含义是弹窗的类型。最常用的是0,1,2.

1）type=0,content里面直接写提示的信息。

2）type=1,content里面写的是对象。将对象的内容弹出。

3）type=2,content里面写的网页的路径。将网页弹出。

-modules：放置模块的文件夹，里面有一个 alert 文件夹，用于存放 alert 插件 ； -Alert.vue：就是我们要在多处用到提示弹窗组件； -index.js：对于该自定义插件的一些配置； 1.alert 2.confirm原文 https://blog.csdn.net/sinat_40697723/article/details/106036056