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使用function定义对象并调用的方法
Mar 23 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
js控制框架刷新
2008/08/01 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
vue组件命名和props命名代码详解
2019/09/01 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
vue接口请求加密实例
2020/08/11 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
用python写测试数据文件过程解析
2019/09/25 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
团日活动总结怎么写
2014/06/25 职场文书
日语专业求职信
2014/07/04 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
批评与自我批评总结
2014/10/17 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
2015年采购员工作总结
2015/04/27 职场文书
单位综合评价意见
2015/06/05 职场文书