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 相关文章推荐
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
详解React-Todos入门例子
Nov 08 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
Vue SSR 组件加载问题
May 02 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
深入理解Antd-Select组件的用法
Feb 25 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
vue动态设置路由权限的主要思路
Jan 13 Vue.js
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中的正则表达式实例详解
2017/04/25 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
js实现微信分享代码
2020/10/11 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
javascript如何实现create方法
2019/11/04 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
jupyter实现重新加载模块
2020/04/16 Python
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
学校门卫工作职责
2013/12/07 职场文书
十佳大学生事迹材料
2014/01/29 职场文书
中学生运动会入场词
2014/02/12 职场文书
好人好事事迹材料
2014/02/12 职场文书
小学母亲节活动方案
2014/03/14 职场文书
2014年商场工作总结
2014/11/22 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
闪闪红星观后感
2015/06/08 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python