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中验证大写字母、数字和中文
Jan 15 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
详解tween.js的使用教程
Sep 14 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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
DC动漫人物排行
2020/03/03 欧美动漫
ADODB的数据库封包程序库
2006/12/31 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
详解vue v-model
2020/08/31 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
外贸业务员岗位职责
2013/11/24 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
陕西导游词
2015/02/04 职场文书
催款通知书范文
2015/04/17 职场文书
运动会宣传稿100字
2015/07/23 职场文书
小学班主任教育随笔
2015/08/15 职场文书
党校团干班培训心得体会
2016/01/06 职场文书