AngularJS Material 的 mdDialog弹窗 与 UI Route 的冲突导致弹窗全部失效

最新推荐文章于 2024-03-19 09:43:00 发布
最新推荐文章于 2024-03-19 09:43:00 发布
阅读量384 收藏
点赞数
分类专栏： 技术 文章标签： javascript angularjs web angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gdsgjcb/article/details/105991521
版权

当弹窗还未完全关闭（事件循环还没结束的时候），如果使用了类似 $state.go的函数跳转页面，会导致接下来所有的弹窗都无法再打开。

示例：https://codepen.io/anon/pen/rGNMeL

不过其实真正的原因是

UI-route 跳转使用的ui-view与mddialog弹出框绑定的DOM是同一个，使得由于跳转刷新重置了dom，让mddialog找不到对应的元素，无法弹出

解决办法是 让mdDialog绑定的元素比ui-view高一级，使得跳转不会摧毁绑定的DOM

示例：https://codepen.io/Splaktar/pen/qMaOPj

ChuckRay
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MaterialDialog:MaterialDialog 库的示例
06-26
材质对话框 MaterialDialog 库的示例 教程链接： 。 库参考： 。
【Android】常用对话框大全（二）Material Dialog
宾有为的博客
06-15 4416
上一篇文章中，谈到本系列的文章将讲解Android dialog、Material dialog，为何要谈论Material呢？开发过Flutter的开发者也许就会明白，Material Design框架Flutter也在用，而在其官网的介绍中是这样说的：Material 是 Google 创建的一个设计系统，旨在帮助团队为 Android、iOS、Flutter 和 Web 构建高质量的数字体验。可想而知，Material Design的应用有多广，这，便是博主将Material Dialog带入到本系列
推荐项目：Material Dialogs - 现代、优雅的Android对话框库
最新发布
gitblog_00068的博客
03-19 439
推荐项目：Material Dialogs - 现代、优雅的Android对话框库 项目地址:https://gitcode.com/afollestad/material-dialogs 项目简介 Material Dialogs 是一个由Adam Folladstad开发的开源Android库，它为开发者提供了符合Google Material Design规范的对话框解决方案。该项目致力于提...
【第三方开源项目】MD 风格的对话框 —— MaterialDialog
热门推荐
持续学习，刻意练习
05-31 1万+
一个 MD 风格的 Dialog 的开源项目 GitHub 地址：https://github.com/afollestad/material-dialogs 定义： MaterialDialog：一个漂亮、流畅、可定制的对话框。 依赖： * 核心模块的依赖：compile ‘com.afollestad.material-dialogs:core:0.9.6.0’ 核心模块包含该库的...
Angular4 引用 material dialog时自定义对话框
遗忘了的自己
11-17 7560
引用 material dialog 方法　官方文档 自定义弹框内容后的结果 dialog html<div style="background-color: #4eaee1"> 我是内容 </div>啊嘞，奇怪了，我并没哟设置　padding值，但是却有padding 查看material dialog 组件源码(dialog.es5.js)，看看发现了啥 MatDialogContainer
软件开发Angularjs material 实现搜索框功能_AngularJS
12-30 525
软件开发Angularjs material 实现搜索框功能_AngularJS angular-material 是 AngularJS的一个子项目，用来提供实现了Material Design风格的组件。 Material 提供了大量的android 风格的UI组件，使用 angularjs + Material 可以很容易开发出风格接近原生Android 5.x 的web界面。但在实际使用的过程中并不总是能满足我们的需求。开发一个组件就成了我们必须学习的内容。 下面是一个组件的实现: /
Material Design系列之Behavior实现支付密码弹窗和商品属性选择效果
09-01
主要为大家详细介绍了Material Design系列之Behavior实现支付密码弹窗和商品属性选择效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
accounts-material-ui:Material-ui与std集成
05-08
使用Material-UI的React Accounts UI 基于并扩展std：accounts-ui 安装 meteor add zetoff:accounts-material-ui 依存关系 除了React之外，这个包还取决于 。 因此，请确保已安装： meteor npm install -S ...
Angularjs material 实现搜索框功能
10-22
主要介绍了Angularjs material 实现搜索框功能的相关资料,需要的朋友可以参考下
material-ui-dropzone:Material-UI文件上载dropzone
04-28
物质下落区Material-UI-dropzone是使用的组件，它基于出色的库。 此组件在对话框内部提供文件上传放置区或文件上传放置区。 文件上传放置区具有一些令人眼花File乱的“允许/不允许文件”效果，预览和警报。安装npm ...
一套精简轻量级的实现MaterialDesign规范的AngularJS原生UI
08-10
一套精简，轻量级的实现Material Design规范的AngularJS原生UI，用于Angular单页应用程序（SPA）开发
AndroidMaterialDialogExample:使用库“ AndroidMaterialDialog”的示例应用-开源
04-26
该项目包含一个示例应用程序，该应用程序实现了Android库“ AndroidMaterialDialog”的用例。 可通过URL https://sourceforge.net/projects/androidmaterialdialog在Sourceforge上获得库“ AndroidMaterialDialog”的项目主页。
Android BottomSheetDialogFragment 可随手势滑动关闭的底部弹窗
01-03
在APP开发中,经常会有一个需求: 从底部弹出弹窗,并且可以跟随手指滑动关闭弹窗. 简介 BottomSheetDialogFragment是位于com.google.android.material包下的一个类. BottomSheetDialogFragment 继承自AppCompatDialogFragment AppCompatDialogFragment继承自DialogFragment 因为AppCompatDialogFragment 是一个特殊版本的DialogFragment, 所以其实可以看做BottomSheetDialogFragment是直接继承于DialogFr
自定义MaterialDesign风格的Dialog
04-23
自定义MaterialDesign风格的Dialog
material-dialog
05-17
材质对话框 一个简单的js库，用于显示材料设计样式的模态或对话框。 如何安装 npm install --save material-dialog 如何使用 浏览器 < script src =" dist/material-dialog.js " > </ script > < script > new Dialog ( { title : 'Use Google\'s location service?' , body : 'Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.' , size : 'medium' } ) . show ( ) </ script > 模块化样
【自学笔记】$state.go()，无法跳转（地址异常）的问题
wl562354983的博客
03-22 3067
经常接触HTML，刚学AngularJS容易踩到的坑！也算不上什么问题，一点注意事项吧。ps：自学真难，尤其遇到问题还百度不到的时候，一纠结起来，一上午时间就没了！先贴代码：&lt;!--part.html--&gt; &lt;div&gt;     &lt;a href="#" ng-click="go('test')"&gt;Click me!&lt;/a&gt; &lt;/div&g
MaterialDialog
snpmyn
05-14 790
库 material-dialogs 依赖 implementation 'com.afollestad.material-dialogs:core:0.9.6.0' 封装 ZsMaterialDialog package widget.dialog.three; import android.annotation.SuppressLint; import android.content.Co...
漂亮的Material样式对话框
qq_43154850的博客
06-15 551
在实际项目开发中，对于漂亮美观的UI界面大多数都是采用样式表来实现的，但是实际上即使是样式表很少也能实现比较带科技炫酷的风格，本篇介绍的是模仿谷歌Material风格的UI界面，基于大牛的第三方开源控件库，界面效果大致如下 我对接口进行了封装，关键代码献上： 头文件： cpp文件： 两个关键函数，初始化窗口函数以及显示窗口函数...
material theme ui激活
06-28
回答1：</h3><br/>要激活Material Theme UI，您需要按照以下步骤操作： 1. 打开Visual Studio Code编辑器 2. 点击左侧菜单栏中的“扩展”按钮 3. 在搜索框中输入“Material Theme UI” 4. 点击“安装”按钮，等待...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值