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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 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邮件类
2007/01/03 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php广告加载类用法实例
2014/09/23 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
WAF的正确bypass
2017/01/05 PHP
php 可变函数使用小结
2018/06/12 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
javascript常见操作汇总
2014/09/03 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
利用python实现数据分析
2017/01/11 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
跟单文员岗位职责
2014/01/03 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
积极向上的团队口号
2014/06/06 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL