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 相关文章推荐
JavaScript中Object和Function的关系小结
Sep 26 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 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获取网卡地址的代码
2008/04/09 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
PHP SEO优化之URL优化方法
2011/04/21 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
PHP自定义多进制的方法
2016/11/03 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
简单的js表单验证函数
2013/10/28 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
解决Python二维数组赋值问题
2019/11/28 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
使用python计算三角形的斜边例子
2020/04/15 Python
pandas的resample重采样的使用
2020/04/24 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
签约仪式主持词
2014/03/19 职场文书
阅兵口号
2014/06/19 职场文书
2014年度培训工作总结
2014/11/27 职场文书
银行自荐信怎么写
2015/03/05 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL