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 相关文章推荐
javascript中对对层的控制
Dec 29 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
vue实现折线图 可按时间查询
Aug 21 Javascript
antd form表单数据回显操作
Nov 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介绍篇
2010/10/26 PHP
深入php list()函数的详解
2013/06/05 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php常用数学函数汇总
2014/11/21 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
见习期自我鉴定
2013/11/07 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
思想品德课教学反思
2016/02/24 职场文书