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 相关文章推荐
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
js通过canvas生成图片缩略图
Oct 02 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
松下Panasonic RF-B65电路分析
2021/03/02 无线电
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
2014年国培研修感言
2014/03/09 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
活动总结怎么写
2014/04/28 职场文书
2015年工程师工作总结
2015/04/30 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
详解Go与PHP的语法对比
2021/05/29 PHP
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS