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模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
js实现简单商品筛选功能
Feb 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
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php树型类实例
2014/12/05 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
ionic3 懒加载
2017/08/16 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
python制作最美应用的爬虫
2015/10/28 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
详解python中init方法和随机数方法
2019/03/13 Python
tensorflow如何批量读取图片
2019/08/29 Python
基于Python fminunc 的替代方法
2020/02/29 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
老海军美国官网:Old Navy
2016/09/05 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
主办会计岗位职责
2014/03/13 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
家装业务员岗位职责
2015/04/03 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
财务人员入职担保书
2015/09/22 职场文书
决心书格式范文
2015/09/23 职场文书