AngularJS实现页面跳转后自动弹出对话框实例代码

今天在做任务的时候发现，需要在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();
});

运行效果：

能够隐约的看到了后面的页面了，说明先进行的页面加载，之后才进行的弹出。

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之后废除了？但是我使用老版本是可以的。还要多学习其他方法捏..

您可能感兴趣的文章:

• 详解AngularJS 模态对话框
• BootStrap+Angularjs+NgDialog实现模式对话框
• 详解angular2封装material2对话框组件
• AngularJs 弹出模态框（model）
• AngularJS $modal弹出框实例代码
• angularjs创建弹出框实现拖动效果
• Angular弹出模态框的两种方式
• AngularJS中使用ngModal模态框实例
• Bootstrap和Angularjs配合自制弹框的实例代码
• 利用Angularjs和原生JS分别实现动态效果的输入框
• Angular2.0实现modal对话框的方法示例