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 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
javascript常用方法总结
May 14 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 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/06 新手入门
一段实用的php验证码函数
2016/05/19 PHP
PHP session 会话处理函数
2016/06/06 PHP
简述php环境搭建与配置
2016/12/05 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
采购部岗位职责
2013/11/24 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
大学生励志演讲稿
2014/04/25 职场文书
专题组织生活会方案
2014/06/15 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
党员先进事迹材料
2014/12/19 职场文书
顶岗实习协议书
2015/01/29 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
flex弹性布局详解
2022/03/20 HTML / CSS