作者: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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ...
[详细]
蜡笔小新 2023-10-17 19:45:53
-
必须先赞下国人npm库作品:node-images(https:github.comzhangyuanweinode-images),封装了跨平台的C++逻辑,形成nodejsAP ...
[详细]
蜡笔小新 2023-10-17 16:34:14
-
-
推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ...
[详细]
蜡笔小新 2023-10-17 16:10:45
-
RN即ReactNative基于React框架针对移动端的跨平台框架,在学习RN前建议最好熟悉下html,css,js,当然如果比较急,那就直接上手吧,毕竟用学习前面基础的时间,R ...
[详细]
蜡笔小新 2023-10-17 15:29:16
-
本文介绍了数据库的存储结构及其重要性,强调了关系数据库范例中将逻辑存储与物理存储分开的必要性。通过逻辑结构和物理结构的分离,可以实现对物理存储的重新组织和数据库的迁移,而应用程序不会察觉到任何更改。文章还展示了Oracle数据库的逻辑结构和物理结构,并介绍了表空间的概念和作用。 ...
[详细]
蜡笔小新 2023-12-14 16:00:02
-
目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ...
[详细]
蜡笔小新 2023-12-14 15:03:14
-
本文介绍了九度OnlineJudge中的1002题目“Grading”的解决方法。该题目要求设计一个公平的评分过程,将每个考题分配给3个独立的专家,如果他们的评分不一致,则需要请一位裁判做出最终决定。文章详细描述了评分规则,并给出了解决该问题的程序。 ...
[详细]
蜡笔小新 2023-12-14 13:00:09
-
VNCViewerforMac是一款运行在Mac平台上的远程桌面工具,vncviewermac版可以帮助您使用Mac的键盘和鼠标来控制远程计算机,操作简 ...
[详细]
蜡笔小新 2023-12-14 12:55:15
-
loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件,也就是说它会把打包过程中所有遇到的 ...
[详细]
蜡笔小新 2023-10-17 21:26:42
-
npmrunbuild后dist文件夹下面直接浏览器打开index.html,css和js的路径都不正确。放到跟目录下就正常了,iis上同样只能在根目录下。我项目的目录如下: ...
[详细]
蜡笔小新 2023-10-17 20:07:40
-
1、安装node环境2、下载vue和vue-cli脚手架命令行输入npm ...
[详细]
蜡笔小新 2023-10-17 15:32:50
-
1.移除consol.log()的babel插件安装:npmibabel-plugin-transform-remove-console-D配置:babel.config.js:这 ...
[详细]
蜡笔小新 2023-10-17 07:57:34
-
前言:原本纠结于Web模板,选了Handlebars。后来发现页面都是弱逻辑的,不支持复杂逻辑表达式。几乎要放弃之际,想起了Javascript中ev ...
[详细]
蜡笔小新 2023-10-16 23:59:51
-
ReactJSUIAnt设计空组件原文:https://w ...
[详细]
蜡笔小新 2023-10-16 22:08:13
-
npminstall-Dbabelcorebabelpreset-envbabelplugin-transform-runtimebabelpolyfillbabel-loader ...
[详细]
蜡笔小新 2023-10-16 19:57:15
-
mobiledu2502910137
这个家伙很懒,什么也没留下!