AngularJS模态框模板ngDialog的使用详解


Posted in Javascript onMay 11, 2018

项目开始的时候我们用的对话框是AngularJS的$modal模态框,但是后来发现$modal打开的对话框是相对页面静止的,如果对话框是一个很长的表单,这样体验度就不是很好了,还有$modal传$scope不是很灵活的原因,后来就改用的$ngDialog.

官方的API在这里:https://www.npmjs.com/package/ng-dialog

首先确定你的项目已经安装了$ngDialog需要的相关文件。

接下来一个简单的demo

del.html内容如下,就是你的对话框内容,这里比较简单,只是一个确认对话框

<meta charset="UTF-8"> 
<div class="modal-header"> 
 <h4 class="modal-title">删除</h4> 
</div> 
 
<div class="modal-body"> 
 <form autocomplete="off" class="file-brief file-brief-show form-validation" name="ObsForm" id="form-new-style"> 
  <div class="col-sm-12 m-t-xs m-b-xs "> 
   <div class="form-group"> 
    <label>您确认要删除吗?</label> 
   </div> 
  </div> 
 </form> 
</div> 
<div class="modal-footer"> 
 <button type="submit" class="btn" ng-click="confirm()" >确定</button> 
 <button type="button" class="btn" ng-click="cancel()">取消</button> 
</div>

在你的Controller里添加你的方法:

$scope.del = function () { 
   ngDialog.open({ 
    template: '/del.html', 
    className: 'ngdialog-theme-default', 
    scope: $scope, 
    controller: function ($scope) { 
    ... 
     $scope.confirm = function () { 
     ... 
     }; 
     $scope.cancel = function () { 
      $scope.closeThisDialog(); 
     }; 
    } 
   }); 
};

这里template里是一个路径,其实如果对话框简单的话可以在template里直接写<div>内容,只是要加一个属性:plain:true,

对话框的高度宽度都可以自定义,width:500,//绝对宽度。或者width:‘%50' //相对宽度

针对以上两点,示例:

$scope.delBucket = function () { 
   ngDialog.open({ 
    template: '<div class="modal-header"><h4 class="modal-title">删除Bucket</h4></div>' + 
    '<div class="modal-footer"><button type="submit" class="btn" ng-click="confirm()" >确定</button>'+ 
       '<button type="button" class="btn" ng-click="cancel()">取消</button></div>', 
  plain:true, 
    className: 'ngdialog-theme-default', 
  width:600, 
    scope: $scope, 
    controller: function ($scope) { 
    ... 
     $scope.confirm = function () { 
     ... 
     }; 
     $scope.cancel = function () { 
      $scope.closeThisDialog(); 
     }; 
    } 
   }); 
  };

以上只是一个简单的示例,官方文档上还有通过id打开对话框,打开一个确认对话框等相关详细介绍。

另外有一篇对$ngDialog介绍非常详细的文章,基本上就是把官方API翻译过来了。

附上文章链接https://3water.com/article/139899.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
基于ionic实现下拉刷新功能
May 10 #Javascript
详解各版本React路由的跳转的方法
May 10 #Javascript
React路由管理之React Router总结
May 10 #Javascript
React从react-router路由上做登陆验证控制的方法
May 10 #Javascript
详解Angular路由之路由守卫
May 10 #Javascript
JavaScript实现一个简易的计算器实例代码
May 10 #Javascript
浅谈node.js 命令行工具(cli)
May 10 #Javascript
You might like
php object转数组示例
2014/01/15 PHP
php微信开发自定义菜单
2016/08/27 PHP
JavaScript null和undefined区别分析
2009/10/14 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
js对象的比较
2011/02/26 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python日志模块logging基本用法分析
2018/08/23 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
自我评价范文分享
2014/01/04 职场文书
2015年试用期工作总结
2014/12/12 职场文书
增值税发票丢失证明
2015/06/19 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python