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 相关文章推荐
JavaScript类和继承 constructor属性
Mar 04 Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
js对象的复制继承实例
Jan 10 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
Vue实现导航栏的显示开关控制
Nov 01 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的类树(支持无限分类)
2006/10/09 PHP
smarty实例教程
2006/11/19 PHP
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
上海方立数码笔试题
2013/10/18 面试题
外语专业毕业生个人的自荐信
2013/11/19 职场文书
公司管理建议书范文
2014/03/12 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书