当前位置: 开发笔记 > 前端 > 正文

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

作者：mobiledu2502910137 | 来源：互联网 | 2022-03-10 14:53

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

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

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

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

接下来一个简单的demo

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

 
 
 删除 
 
 
 
  
   
    
    您确认要删除吗&＃63;

在你的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: '删除Bucket' + 
    ''+ 
       '', 
  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

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

推荐阅读

console
Symfony框架的安装与使用指南

Symfony是一个功能强大的PHP框架，以其依赖注入（DI）特性著称。许多流行的PHP框架如Drupal和Laravel的核心组件都基于Symfony构建。本文将详细介绍Symfony的安装方法及其基本使用。 ... [详细]

蜡笔小新 2024-12-21 14:17:36
js
Vue 开发与调试工具指南

本文介绍了如何使用 Vue 调试工具，包括克隆仓库、安装依赖包、构建项目以及在 Chrome 浏览器中加载扩展的详细步骤。 ... [详细]

蜡笔小新 2024-12-20 16:28:04
js
python的交互模式怎么输出名文汉字[python常见问题]

在命令行模式下敲命令python，就看到类似如下的一堆文本输出，然后就进入到Python交互模式，它的提示符是>>>，此时我们可以使用print() ... [详细]

蜡笔小新 2024-12-27 21:32:05
view
火星商店问题：线段树分治与持久化Trie树的应用

本题涉及编号为1至n的火星商店，每个商店有一个永久商品价值v。操作包括每天在指定商店增加一个新商品，以及查询某段时间内某些商店中所有商品（含永久商品）与给定密码值的最大异或结果。通过线段树分治和持久化Trie树来高效解决此问题。 ... [详细]

蜡笔小新 2024-12-27 21:23:11
view
Java 中的 BigDecimal pow()方法，示例

Java 中的 BigDecimal pow()方法，示例 ... [详细]

蜡笔小新 2024-12-27 20:54:03
view
汇编语言高级特性总结

本文总结了汇编语言中第五至第八章的关键知识点，涵盖间接寻址、指令格式、安全编程空间、逻辑运算指令及数据重复定义等内容。通过详细解析这些内容，帮助读者更好地理解和应用汇编语言的高级特性。 ... [详细]

蜡笔小新 2024-12-27 19:52:28
json
FastJSON解析与数据提取技巧

探讨如何高效使用FastJSON进行JSON数据解析，特别是从复杂嵌套结构中提取特定字段值的方法。 ... [详细]

蜡笔小新 2024-12-27 19:49:07
json
Maven多模块项目管理最佳实践

本文详细介绍了如何使用Maven高效管理多模块项目，涵盖项目结构设计、依赖管理和构建优化等方面。通过具体的实例和配置说明，帮助开发者更好地理解和应用Maven在复杂项目中的优势。 ... [详细]

蜡笔小新 2024-12-27 19:29:15
js
深入理解Cookie与Session会话管理

本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息，以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制，解释其原理及应用场景。 ... [详细]

蜡笔小新 2024-12-27 18:20:43
js
Python爬虫实战：豆瓣电影Top250数据抓取

本文详细介绍了如何使用Python编写爬虫程序，从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制，再到多页数据抓取的全过程，并提供了完整的代码示例。 ... [详细]

蜡笔小新 2024-12-27 16:55:07
console
深入理解Vue.js：从入门到精通

本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例，帮助开发者全面掌握这一流行的前端框架。 ... [详细]

蜡笔小新 2024-12-22 11:07:54
js
解决国外服务器上 sudo npm install -g cordova 安装失败的问题

探讨在海外服务器上使用 sudo npm install -g cordova 时遇到的安装失败问题，并提供详细的解决方案和建议。 ... [详细]

蜡笔小新 2024-12-20 23:41:19
jquery
2019年前端技术趋势及职业发展路径

本文探讨了2019年前端技术的发展趋势，包括工具化、配置化和泛前端化等方面，并提供了详细的学习路线和职业规划建议。 ... [详细]

蜡笔小新 2024-12-19 10:19:35
js
前端开发中的代码注释实践与规范

本文探讨了前端开发过程中代码注释的重要性，不仅有助于个人清晰地回顾自己的编程思路，还能促进团队成员之间的有效沟通。文章将详细介绍HTML、CSS及JavaScript中的注释使用方法，并提出一套实用的注释规范。 ... [详细]

蜡笔小新 2024-12-17 10:55:06
上传
在树莓派Ubuntu（ARM64）上安装Node.js

本文详细介绍了如何在树莓派Ubuntu系统（ARM64架构）上安装Node.js，包括下载、解压、移动文件以及创建软链接等步骤。 ... [详细]

蜡笔小新 2024-12-16 19:32:51

mobiledu2502910137

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章