angular可自定义的对话框,弹窗指令
指令不明的,推荐 AngularJS指令参数详解
以下为示例代码
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../dist/lib/angular/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="../dist/css/all.min.css" />
<script type="text/javascript" src="../dist/app.js"></script>
<title></title>
<script>
/**************************************************************************
*可自定义弹窗指令
* <dialog load-data="对象"></dialog>
*传入一个参数对象。以下为参数解释
* $scope.data={//共三个参数
isShow: true,//必须 控制显示和隐藏
template: {//必须 内容模板
url: webroot+'/views/dialog/warn-dialog.html',//模板地址
events: function (events) {//对模板进行事件绑定,所有事件和值必须绑定在传入的对象上
//events:用于绑定事件和值
}
},
buttons: {//必须 buttons:{}空对象表示没有按钮,按钮可0-n个
key: 'name',//非必须,用于控制按钮显示哪个值
list: [//非必须,用于自定义按钮,list存在,key必须存在,不存在表示使用默认按钮
{//元素内容自定义,用key控制显示
name: buttonName,
value: 'true'
},
{
name: '取消',
value: 'false'
}
],
callback: function (item, index) {//使用按钮必须存在,按钮点击的回调事件,item:当前选中的元素,index:元素下标
$scope.data.isShow = false;//修改显示隐藏
if (item.value) {
//window.location.href='login.html';
}
}
}
}
* <dialogload-data="data"></dialog>
*
**************************************************************************/
app.controller('dialog', ['$scope','webroot', function ($scope,webroot) {
$scope.content="这是一个传参测试";
$scope.buttonName='确认'; $scope.data = {
isShow: true,
template: {
url: webroot + '/views/dialog/warn-dialog.html',
events: function (events) {
//因为在当前$scope中定义,所以能够直接访问当前$scope空间
events.content = $scope.content;
events.back=function(){//因为传递的是值,需要自己进行触发.
$scope.backData ='这是一个回传:'+events.content;
}; }
},
buttons: {
key: 'name',
list: [
{
name: $scope.buttonName,
value: 'true'
},
{
name: '取消',
value: 'false'
}
],
callback: function (item, index) {
$scope.data.isShow = false;
console.log('这是一个回调事件'+index);
console.log(item);
}
}
};
}]);
</script>
</head>
<body ng-controller="dialog">
<dialog load-data="data"></dialog>
<button ng-click="data.isShow=!data.isShow">点击按钮测试</button>
{{backData}}
<script type="text/javascript" src="../dist/directive/dialogBox.js"></script> </body>
</html>
实例github可以下载
样式文件,根据自己需求自行修改。
angular可自定义的对话框,弹窗指令的更多相关文章
- Taro自定义Modal对话框组件|taro仿微信、android弹窗
基于Taro多端实践TaroPop:自定义模态框|dialog对话框|msg消息框|Toast提示 taro自定义弹出框支持编译到多端H5/小程序/ReactNative,还可以自定义弹窗类型/弹窗样 ...
- Android中制作自定义dialog对话框的实例
http://www.jb51.net/article/83319.htm 这篇文章主要介绍了Android中制作自定义dialog对话框的实例分享,安卓自带的Dialog显然不够用,因而我们要继 ...
- 修改VCL源码实现自定义输入对话框
来自:https://yq.aliyun.com/wenji/88428 通过修改VCL源码实现自定义输入对话框 在BCB中有两个函数可以实现输入对话框:InputBox和InputQuery,其实I ...
- 024 Android 自定义样式对话框(AlertDialog)
1.AlertDialog介绍 AlertDialog并不需要到布局文件中创建,而是在代码中通过构造器(AlertDialog.Builder)来构造标题.图标和按钮等内容的. 常规使用步骤(具体参见 ...
- 《手把手教你》系列技巧篇(二十八)-java+ selenium自动化测试-处理模态对话框弹窗(详解教程)
1.简介 在前边的文章中窗口句柄切换宏哥介绍了switchTo方法,这篇继续介绍switchTo中关于处理alert弹窗的问题.很多时候,我们进入一个网站,就会弹窗一个alert框,有些我们直接关闭, ...
- Vue自定义组件实现v-model指令
Tips: 本文所描述的Vue均默认是Vue2版本 在我们初次接触Vue的时候,一定会了解到一个语法糖,那就是v-model指令,它带给我们的第一印象就是它可以实现双向绑定 那么,什么是双向绑定?通俗 ...
- Angular的自定义指令以及实例
本文章已收录于: AngularJS知识库 分类: javascript(55) http://www.cnblogs.com/xiaoxie53/p/5058198.html 前面的文章介 ...
- angular directive自定义指令
先来看一下自定义指令的写法 app.directive('', ['', function(){ // Runs during compile return { // name: '', // pri ...
- angular指令,异步调用数据,监控数据的变化(自定义一个表头的指令)
angular框架中提供了很多有效的指令,指令的目的就是为了提高代码的复用率,提高工作效率. 下面我们自己来定义一个指令: 一点建议:写指令名字的时候,尽量不要用用大写,下划线等,否则会有很大的坑等着 ...
随机推荐
- Spyder使用IPython Console弹出绘图窗口的设置方法
http://www.datastudy.cc/article/3cfc3aff3b2c5948b938456e00376276 在使用Spyder的过程中,因为它的绘图,默认是绘图在IPython窗 ...
- Gym 101933
Gym 101933 B. Baby Bites水题直接模拟即可 #include <cstdio> #include <cstring> #include <queue ...
- 题解【bzoj1503 [NOI2004]郁闷的出纳员】
Description 给出一个下限 \(m\) ,要求维护以下操作 插入一个数(如果小于下限就不加) 给每个数加上一个数 给每个数减去一个数,并且删除掉 \(< m\) 的所有数 求目前第 \ ...
- Laravel 限流中间件 throttle 简析
1. 在Laravel 中配置 在 app\Http\Kernel.php 中,默认添加到中间件组 api 下,1分钟60次. 2. 限流原理 获取唯一请求来源,进行唯一标识(key) 获取该请求请求 ...
- nginx反向代理下载文件失败处理
最近遇到了客户在从我们的服务器下载文件失败时的情况.然后把解决方案一并整理一下以备后续.需要说明的是,我们前端都是使用nginx来做反向代理,后面的逻辑处理采用php的方式. 1.缓存目录不可写 ng ...
- Java操作Kafka执行不成功的解决方法,Kafka Broker Advertised.Listeners属性的设置
创建Spring Boot项目继承Kafka,向Kafka发送消息始终不成功.具体项目配置如下: <?xml version="1.0" encoding="UTF ...
- bzoj千题计划148:bzoj1537: [POI2005]Aut- The Bus
http://www.lydsy.com/JudgeOnline/problem.php?id=1537 朴素的转移:dp[i][j]=max(dp[i][j-1],dp[i-1][j])+p[i][ ...
- Centos7系统中安装Nginx1.8.0
Nginx的安装 tar -zxvf nginx-1.8.0.tar.gz cd nginx-1.8.0 ./configure make make install /usr/local/nginx/ ...
- 15个超级实用的jQuery插件
jQuery是一个可订制的.轻量级的前端开发框架,它会让你的前端开发拥有无限的可能性.它会在敏捷Web开发中帮你做很多事情,比如简化HTML文档的解析.事件处理.动画效果和Ajax交互.实践上jQue ...
- 简单理解 NP, P, NP-complete和NP-Hard
P是一类可以通过确定性图灵机(以下简称 图灵机)在多项式时间(Polynomial time)内解决的问题集合. NP是一类可以通过非确定性图灵机( Non-deterministic Turing ...