AngularJS實現(xiàn)頁面跳轉(zhuǎn)后自動彈出對話框?qū)嵗a
更新時間：2017年08月02日 09:18:51 投稿：mrr
這篇文章主要介紹了AngularJS實現(xiàn)頁面跳轉(zhuǎn)后自動彈出對話框?qū)嵗a，然后在文章下面給大家介紹了angularjs頁面加載后自動彈窗的實例代碼，感興趣的朋友參考下吧
今天在做任務的時候發(fā)現(xiàn)，需要在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頁面加載后自動彈窗
首先在控制器內(nèi)寫好一個彈窗，我用的是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');
}
});
};
然后在控制器內(nèi)加入$viewContentLoaded事件
$scope.$watch('$viewContentLoaded', function() {
$scope.showConfirm();
});
在網(wǎng)上看有人說在官方的API里面沒有看到viewContentLoaded，可能Angular2之后廢除了？但是我使用老版本是可以的。還要多學習其他方法捏..
相關(guān)文章
這篇文章主要介紹了AngularJS自定義服務與fliter的混合使用的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
這篇文章主要介紹了AngularJS ng-template寄宿方式用法,結(jié)合實例形式分析了ng-template模板的相關(guān)使用技巧,需要的朋友可以參考下2016-11-11
Angular通過angular-cli來搭建web前端項目的方法
這篇文章主要介紹了Angular通過angular-cli來搭建web前端項目的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了在angular 6中使用 less 的實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05
本章介紹的是如何對模板驅(qū)動表單創(chuàng)建自定義校驗器，它相比較響應式表單自定義校驗器略為復雜一些。接下來通過本文給大家分享Angular在模板驅(qū)動表單中自定義校驗器的方法，感興趣的朋友一起看看吧2017-08-08
這篇文章主要介紹了angularjs自定義過濾器,結(jié)合完整實例形式分析了angularjs自定義過濾器相關(guān)原理、使用方法及操作注意事項,需要的朋友可以參考下2019-08-08
AngularJS實現(xiàn)的獲取焦點及失去焦點時的表單驗證功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的獲取焦點及失去焦點時的表單驗證功能,涉及AngularJS使用ng-blur、ng-focus針對表單事件監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
這篇文章主要給大家介紹了關(guān)于Angular2使用jQuery的方法教程，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來跟著小編一起學習學習吧。2017-05-05
深入淺析angular和vue還有jquery的區(qū)別
vue是一個漸進式的框架, 是一個輕量級的框架而angular是一個mvc框架, 各有千秋，下面小編通過本文給大家介紹angular和vue還有jquery的區(qū)別，感興趣的朋友一起看看吧2018-08-08
AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系深入分析
這篇文章主要介紹了AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系,結(jié)合實例形式較為深入的分析了$injector、$rootScope和$scope的概念、功能、使用方法及相互之間的關(guān)系,需要的朋友可以參考下2017-01-01