angular可自定义的对话框,弹窗指令
2016-11-23 00:32
591 查看
指令不明的,推荐 AngularJS指令参数详解
github地址
以下为示例代码
实例github可以下载
样式文件,根据自己需求自行修改。
github地址
以下为示例代码
<!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中自定义Debounce Click指令防止重复点击
- Vue自定义弹窗指令的实现代码
- 在 Angular2 中实现自定义校验指令(确认密码)的方法
- 自定义的对话框弹窗 AlertDialog
- angular创建自定义的指令
- 使用FlycoDialog实现自定义Android弹窗对话框
- 自定义弹窗对话框PopUpWindow
- [转]Angular4 引用 material dialog时自定义对话框/deep/.mat-dialog-container
- 自定义弹窗对话框PopUpWindow
- 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
- angular-nvd3指令对nvd3的封装导致的xAxis坐标对应Dots不整齐的自定义修复
- Android FlycoDialog 简单实用的自定义Android弹窗对话框之Dialog篇
- 详解Angular 自定义结构指令
- FlycoDialog 简单实用的自定义Android弹窗对话框之Dialog篇
- PopupWindow实现弹窗,可以任意自定义布局
- Android之自定义dialog对话框
- android自定义对话框
- android自定义对话框
- Android自定义组件系列【13】——Android自定义对话框如此简单
- MFC 自定义模态等待对话框(费时操作等待)