热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了AngularJS模态框模板ngDialog的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

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

接下来一个简单的demo

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

 
 
 
 
 

在你的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里直接写

内容,只是要加一个属性:plain:true,

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

针对以上两点,示例:

$scope.delBucket = function () { 
   ngDialog.open({ 
    template: '' + 
    '', 
  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://www.jb51.net/article/139899.htm

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


推荐阅读
  • 页面预渲染适用于主要包含静态内容的页面。对于依赖大量API调用的动态页面,建议采用SSR(服务器端渲染),如Nuxt等框架。更多优化策略可参见:https://github.com/HaoChuan9421/vue-cli3-optimization ... [详细]
  • 利用Node.js实现PSD文件的高效切图
    本文介绍了如何通过Node.js及其psd2json模块,快速实现PSD文件的自动化切图过程,以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率,还简化了从设计稿到实际应用的转换流程。 ... [详细]
  • 本文介绍了.hbs文件作为Ember.js项目中的视图层,类似于HTML文件的功能,并详细讲解了如何在Ember.js应用中集成Bootstrap框架及其相关组件的方法。 ... [详细]
  • 字符、字符串和文本的处理之Char类型
    .NetFramework中处理字符和字符串的主要有以下这么几个类:(1)、System.Char类一基础字符串处理类(2)、System.String类一处理不可变的字符串(一经 ... [详细]
  • Python:新浪微博API初试
    {想在微博上抓点数据进行分析,费了一天多的时间,才终于找到点头绪,整理一下。}目录:一注册创建应用获取认证和授权二新浪微博pythonsdk下载和安装三简 ... [详细]
  • HTML download 属性详解及应用
    本文探讨了 HTML 中 download 属性的应用场景及其在不同浏览器中的实现方式,通过示例代码展示了如何利用 JavaScript 实现文件下载功能。 ... [详细]
  • 多用户密码验证与加密登录系统
    本文介绍了一种基于多用户密码文件的加密登录方法,通过读取用户密码文件并使用简单的加密算法实现安全登录。文中详细描述了程序的设计思路及其实现过程。 ... [详细]
  • 时序数据是指按时间顺序排列的数据集。通过时间轴上的数据点连接,可以构建多维度报表,揭示数据的趋势、规律及异常情况。 ... [详细]
  • Backup Exec 11d 初学者使用心得与技巧
    随着企业应用程序的不断扩展,数据备份的需求日益增加。本文通过介绍Symantec Backup Exec 11d的实际应用体验,旨在为初学者提供一些实用的操作指南和建议。 ... [详细]
  • ZOJ 2760 - 最大流问题
    题目链接:How Many Shortest Paths。题目描述:给定一个包含n个节点的有向图,通过一个n*n的矩阵来表示。矩阵中的a[i][j]值为-1表示从节点i到节点j无直接路径;否则,该值表示从i到j的路径长度。输入起点vs和终点vt,计算从vs到vt的所有不共享任何边的最短路径数量。如果起点和终点相同,则输出无穷大。 ... [详细]
  • 行为设计模式:命令模式详解
    命令模式是一种行为设计模式,它通过将请求封装为对象,使得可以使用不同的请求来参数化客户端,支持请求的排队、日志记录以及提供命令的撤销和恢复功能。 ... [详细]
  • 本文详细介绍了如何在VSCode环境中配置Prettier工具以支持TypeScript项目,同时结合ESLint实现代码风格的一致性和自动化格式化。 ... [详细]
  • ArcBlock 发布 ABT 节点 1.0.31 版本更新
    2020年11月9日,ArcBlock 区块链基础平台发布了 ABT 节点开发平台的1.0.31版本更新,此次更新带来了多项功能增强与性能优化。 ... [详细]
  • 本文探讨了异步编程的发展历程,从最初的AJAX异步回调到现代的Promise、Generator+Co以及Async/Await等技术。文章详细分析了Promise的工作原理及其源码实现,帮助开发者更好地理解和使用这一重要工具。 ... [详细]
  • Vue CLI 基础入门指南
    本文详细介绍了 Vue CLI 的基础使用方法,包括环境搭建、项目创建、常见配置及路由管理等内容,适合初学者快速掌握 Vue 开发环境。 ... [详细]
author-avatar
mobiledu2502910137
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有