AngularJS實(shí)現(xiàn)頁面跳轉(zhuǎn)后自動(dòng)彈出對(duì)話框?qū)嵗a
更新時(shí)間：2017年08月02日 09:18:51 投稿：mrr
這篇文章主要介紹了AngularJS實(shí)現(xiàn)頁面跳轉(zhuǎn)后自動(dòng)彈出對(duì)話框?qū)嵗a，然后在文章下面給大家介紹了angularjs頁面加載后自動(dòng)彈窗的實(shí)例代碼，感興趣的朋友參考下吧
今天在做任務(wù)的時(shí)候發(fā)現(xiàn)，需要在angularJS中知道什么時(shí)候頁面加載完成，這樣才能進(jìn)行一些彈出操作，不然頁面沒有出來就彈出顯得很突兀。
下面是解決辦法：
$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();
});
運(yùn)行效果：
能夠隱約的看到了后面的頁面了，說明先進(jìn)行的頁面加載，之后才進(jìn)行的彈出。
PS：下面看下angularjs頁面加載后自動(dòng)彈窗
首先在控制器內(nèi)寫好一個(gè)彈窗，我用的是ionic的默認(rèn)提示對(duì)話框
// 一個(gè)確認(rèn)對(duì)話框
$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之后廢除了？但是我使用老版本是可以的。還要多學(xué)習(xí)其他方法捏..
您可能感興趣的文章:
相關(guān)文章
angularjs實(shí)現(xiàn)對(duì)表單輸入改變的監(jiān)控(ng-change和watch兩種方式)
這篇文章主要介紹了angularjs通過ng-change和watch兩種方式實(shí)現(xiàn)對(duì)表單輸入改變的監(jiān)控,需要的朋友可以參考下2018-08-08
Angular應(yīng)用的多語言設(shè)置問題解決示例
這篇文章主要為大家介紹了Angular應(yīng)用的多語言設(shè)置問題解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Angular HMR(熱模塊替換)功能實(shí)現(xiàn)方法
本篇文章主要介紹了Angular HMR(熱模塊替換)功能實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
淺談Angular2 ng-content 指令在組件中嵌入內(nèi)容
本篇文章主要介紹了淺談Angular2 ng-content 指令在組件中嵌入內(nèi)容，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
本文通過對(duì)比幾種Angular組件間的通信方式,給大家介紹了一種新的Angular組件間通信的解決方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了Angular.js去除頁面中顯示的空行方法，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
AngularJS 通過新的屬性和表達(dá)式擴(kuò)展了 HTML。AngularJS 可以構(gòu)建一個(gè)單一頁面應(yīng)用程序（SPAs：Single Page Applications）。本文給大家介紹angularjs 的相關(guān)知識(shí)，感興趣的朋友一起看看吧2017-10-10
Angular.js中上傳指令ng-upload的基本使用教程
這篇文章主要給大家介紹了關(guān)于Angular.js中上傳指令ng-upload的基本使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
angularjs實(shí)現(xiàn)過濾并替換關(guān)鍵字小功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)過濾并替換關(guān)鍵字小功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
Angular 2.x學(xué)習(xí)教程之結(jié)構(gòu)指令詳解
結(jié)構(gòu)指令通過添加和刪除 DOM 元素來更改 DOM 布局。Angular 中兩個(gè)常見的結(jié)構(gòu)指令是 *ngIf 和 *ngFor，下面這篇文章主要給大家介紹了關(guān)于Angular 2.x結(jié)構(gòu)指令的相關(guān)資料，需要的朋友可以參考下。2017-05-05