快捷導(dǎo)航

AngularJS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)后自動(dòng)彈出對(duì)話框?qū)嵗a

更新時(shí)間：2017年08月02日 09:18:51 投稿：mrr

這篇文章主要介紹了AngularJS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)后自動(dòng)彈出對(duì)話框?qū)嵗a，然后在文章下面給大家介紹了angularjs頁(yè)面加載后自動(dòng)彈窗的實(shí)例代碼，感興趣的朋友參考下吧

今天在做任務(wù)的時(shí)候發(fā)現(xiàn)，需要在angularJS中知道什么時(shí)候頁(yè)面加載完成，這樣才能進(jìn)行一些彈出操作，不然頁(yè)面沒(méi)有出來(lái)就彈出顯得很突兀。

下面是解決辦法：

$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)行效果：

能夠隱約的看到了后面的頁(yè)面了，說(shuō)明先進(jìn)行的頁(yè)面加載，之后才進(jìn)行的彈出。

PS：下面看下angularjs頁(yè)面加載后自動(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)上看有人說(shuō)在官方的API里面沒(méi)有看到viewContentLoaded，可能Angular2之后廢除了？但是我使用老版本是可以的。還要多學(xué)習(xí)其他方法捏..

您可能感興趣的文章:

相關(guān)文章

angularjs實(shí)現(xiàn)對(duì)表單輸入改變的監(jiān)控(ng-change和watch兩種方式)
這篇文章主要介紹了angularjs通過(guò)ng-change和watch兩種方式實(shí)現(xiàn)對(duì)表單輸入改變的監(jiān)控,需要的朋友可以參考下
2018-08-08
Angular應(yīng)用的多語(yǔ)言設(shè)置問(wèn)題解決示例
這篇文章主要為大家介紹了Angular應(yīng)用的多語(yǔ)言設(shè)置問(wèn)題解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
Angular HMR(熱模塊替換)功能實(shí)現(xiàn)方法
本篇文章主要介紹了Angular HMR(熱模塊替換)功能實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
淺談Angular2 ng-content 指令在組件中嵌入內(nèi)容
本篇文章主要介紹了淺談Angular2 ng-content 指令在組件中嵌入內(nèi)容，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-08-08
Angular組件間通信的新解決方案詳解
本文通過(guò)對(duì)比幾種Angular組件間的通信方式,給大家介紹了一種新的Angular組件間通信的解決方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
Angular.js去除頁(yè)面中顯示的空行方法示例
這篇文章主要介紹了Angular.js去除頁(yè)面中顯示的空行方法，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-03-03
AngularJS 教程及實(shí)例代碼
AngularJS 通過(guò)新的屬性和表達(dá)式擴(kuò)展了 HTML。AngularJS 可以構(gòu)建一個(gè)單一頁(yè)面應(yīng)用程序（SPAs：Single Page Applications）。本文給大家介紹angularjs 的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2017-10-10
Angular.js中上傳指令ng-upload的基本使用教程
這篇文章主要給大家介紹了關(guān)于Angular.js中上傳指令ng-upload的基本使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-07-07
angularjs實(shí)現(xiàn)過(guò)濾并替換關(guān)鍵字小功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)過(guò)濾并替換關(guān)鍵字小功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
Angular 2.x學(xué)習(xí)教程之結(jié)構(gòu)指令詳解
結(jié)構(gòu)指令通過(guò)添加和刪除 DOM 元素來(lái)更改 DOM 布局。Angular 中兩個(gè)常見(jiàn)的結(jié)構(gòu)指令是 *ngIf 和 *ngFor，下面這篇文章主要給大家介紹了關(guān)于Angular 2.x結(jié)構(gòu)指令的相關(guān)資料，需要的朋友可以參考下。
2017-05-05