作者:mobiledu2502910137 | 来源:互联网 | 2022-03-10 14:53
项目开始的时候我们用的对话框是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 ...
[详细]
蜡笔小新 2024-11-23 22:19:17
-
本文介绍了如何通过Node.js及其psd2json模块,快速实现PSD文件的自动化切图过程,以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率,还简化了从设计稿到实际应用的转换流程。 ...
[详细]
蜡笔小新 2024-11-22 13:21:24
-
-
本文介绍了.hbs文件作为Ember.js项目中的视图层,类似于HTML文件的功能,并详细讲解了如何在Ember.js应用中集成Bootstrap框架及其相关组件的方法。 ...
[详细]
蜡笔小新 2024-11-21 18:50:46
-
.NetFramework中处理字符和字符串的主要有以下这么几个类:(1)、System.Char类一基础字符串处理类(2)、System.String类一处理不可变的字符串(一经 ...
[详细]
蜡笔小新 2024-11-26 21:04:40
-
{想在微博上抓点数据进行分析,费了一天多的时间,才终于找到点头绪,整理一下。}目录:一注册创建应用获取认证和授权二新浪微博pythonsdk下载和安装三简 ...
[详细]
蜡笔小新 2024-11-26 19:37:53
-
本文探讨了 HTML 中 download 属性的应用场景及其在不同浏览器中的实现方式,通过示例代码展示了如何利用 JavaScript 实现文件下载功能。 ...
[详细]
蜡笔小新 2024-11-26 19:35:38
-
本文介绍了一种基于多用户密码文件的加密登录方法,通过读取用户密码文件并使用简单的加密算法实现安全登录。文中详细描述了程序的设计思路及其实现过程。 ...
[详细]
蜡笔小新 2024-11-26 18:49:09
-
时序数据是指按时间顺序排列的数据集。通过时间轴上的数据点连接,可以构建多维度报表,揭示数据的趋势、规律及异常情况。 ...
[详细]
蜡笔小新 2024-11-26 17:30:42
-
随着企业应用程序的不断扩展,数据备份的需求日益增加。本文通过介绍Symantec Backup Exec 11d的实际应用体验,旨在为初学者提供一些实用的操作指南和建议。 ...
[详细]
蜡笔小新 2024-11-26 10:48:27
-
题目链接:How Many Shortest Paths。题目描述:给定一个包含n个节点的有向图,通过一个n*n的矩阵来表示。矩阵中的a[i][j]值为-1表示从节点i到节点j无直接路径;否则,该值表示从i到j的路径长度。输入起点vs和终点vt,计算从vs到vt的所有不共享任何边的最短路径数量。如果起点和终点相同,则输出无穷大。 ...
[详细]
蜡笔小新 2024-11-26 01:33:33
-
命令模式是一种行为设计模式,它通过将请求封装为对象,使得可以使用不同的请求来参数化客户端,支持请求的排队、日志记录以及提供命令的撤销和恢复功能。 ...
[详细]
蜡笔小新 2024-11-25 19:34:26
-
本文详细介绍了如何在VSCode环境中配置Prettier工具以支持TypeScript项目,同时结合ESLint实现代码风格的一致性和自动化格式化。 ...
[详细]
蜡笔小新 2024-11-24 17:50:24
-
2020年11月9日,ArcBlock 区块链基础平台发布了 ABT 节点开发平台的1.0.31版本更新,此次更新带来了多项功能增强与性能优化。 ...
[详细]
蜡笔小新 2024-11-22 21:02:58
-
本文探讨了异步编程的发展历程,从最初的AJAX异步回调到现代的Promise、Generator+Co以及Async/Await等技术。文章详细分析了Promise的工作原理及其源码实现,帮助开发者更好地理解和使用这一重要工具。 ...
[详细]
蜡笔小新 2024-11-22 15:42:30
-
本文详细介绍了 Vue CLI 的基础使用方法,包括环境搭建、项目创建、常见配置及路由管理等内容,适合初学者快速掌握 Vue 开发环境。 ...
[详细]
蜡笔小新 2024-11-22 14:48:35
-
mobiledu2502910137
这个家伙很懒,什么也没留下!