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 相关文章推荐
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
node文件批量重命名的方法示例
Oct 23 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
Javascript中的this,bind和that使用实例
Dec 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
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
python开发之函数定义实例分析
2015/11/12 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
医学专业应届生的自我评价
2014/02/28 职场文书
幼儿教师培训感言
2014/03/08 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python