AngularJS实现页面跳转后自动弹出对话框实例代码


Posted in Javascript onAugust 02, 2017

今天在做任务的时候发现,需要在angularJS中知道什么时候页面加载完成,这样才能进行一些弹出操作,不然页面没有出来就弹出显得很突兀。

下面是解决办法:

$scope.showAlert = function() { 
      var alertPopup = $ionicPopup.alert({ 
        title: 'Don\'t eat that!', 
        template: '<h1>It might taste good</h1>' 
      }); 
    }; 
    $scope.$watch('$viewContentLoaded', function() { 
      $scope.showAlert(); 
    });

运行效果:

AngularJS实现页面跳转后自动弹出对话框实例代码

能够隐约的看到了后面的页面了,说明先进行的页面加载,之后才进行的弹出。

PS:下面看下angularjs页面加载后自动弹窗

首先在控制器内写好一个弹窗,我用的是ionic的默认提示对话框

// 一个确认对话框
  $scope.showConfirm = function() {
   var confirmPopup = $ionicPopup.confirm({
    title: 'Consume Ice Cream',
    template: 'Are you sure you want to eat this ice cream?'
   });
   confirmPopup.then(function(res) {
    if(res) {
     console.log('You are sure');
    } else {
     console.log('You are not sure');
    }
   });
  };

然后在控制器内加入$viewContentLoaded事件

$scope.$watch('$viewContentLoaded', function() { 
    $scope.showConfirm(); 
  });
 

在网上看有人说在官方的API里面没有看到viewContentLoaded,可能Angular2之后废除了?但是我使用老版本是可以的。还要多学习其他方法捏..

Javascript 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
jqPlot Option配置对象详解
Jul 25 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 #jQuery
angular $watch 一个变量的变化(实例讲解)
Aug 02 #Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 #Javascript
js实现前端图片上传即时预览功能
Aug 02 #Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 #Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 #Javascript
原生js获取left值和top值的三种方法
Aug 02 #Javascript
You might like
小文件php+SQLite存储方案
2010/09/04 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php命令行用法入门实例教程
2014/10/27 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
Java分治归并排序算法实例详解
2017/12/12 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
python实现广度优先搜索过程解析
2019/10/19 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
大专生自我鉴定范文
2013/10/01 职场文书
社团活动总结报告
2014/06/27 职场文书
国际金融专业自荐信
2014/07/05 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书