2015-08-18 26 views
0

讓我說我有一個控制器內像這樣的一段代碼,在一個角/離子應用:如何在ionicView.leave停止腳本

$scope.$on('$ionicView.beforeEnter', function() { 
    setTimeout(function() { 
     myFunction(); 
    }, 5000) 
}); 

當用戶離開映射到該控制器的URL在距離超時5秒之前,腳本不會停止(這是有道理的)。我的問題是:myFunction()打開離子模式。

當用戶離開頁面並呈現另一個頁面時。但是,當渲染另一個視圖時,myFunction()將被觸發,然後,將在新視圖中顯示前一視圖中的離子模式。我在這個例子中使用了setTimeout(),因爲我的代碼myFunction()在ajax請求之後被調用(並且我無法控制響應時間)。

有沒有辦法阻止當前腳本在ionicView.leave事件中執行?

編輯:我發現$範圍有一個屬性$$斷開連接設置爲true,當視圖離開。我是否需要檢查這個值是否爲真或是否在我的函數中打開或不打開模態?而且,如果我有'n'個異步函數,是否必須在我所有的'n'函數中檢查這個?

編輯II:我實現了一個解決方案包裝myFunction的是()A $超時內,指派其返回一個變量,然後和在ionicView.leave,取消它:所以

modaltimeout = $timeout(function() { myFunction();)}; 

$scope.$on('$ionicView.leave', function() { 
    $timeout.cancel(modaltimeout); 
}); 

,不管是什麼裏面myFunction的(),承諾將被取消,並沒有什麼事情發生:-)

+0

你能重現問題的[plunker(http://plnkr.co /)? – LeftyX

+0

http://plnkr.co/edit/hGGqHyC0X6xYH66uJRyo?p=preview使用左上方的菜單。更改爲「關於」然後快速切換回「主頁」。警報將彈出(它也會發生在ionicModal中)。 –

回答

0

所以首先命名您的超時功能:

$scope.$on('$ionicView.beforeEnter', function() { 
    myVar = setTimeout(function() { 
     myFunction(); 
    }, 5000) 
}); 

在控制器的簡單加

$scope.$on('$ionicView.beforeLeave', function(){ 
    clearTimeout(myVar); 
}); 

然後,當您離開您的視圖時,您的超時將被清除。

編輯!

您可以通過使用.then回調控制何時在http請求後調用某個函數。它會在您的ajax調用完成後運行。這是一個例子。

var req = { 
    url: 'https://yoururl.com', 
    method: "GET", 
    headers: {} 
} 

$http(req).success(function(data, status, headers, config){ 

}).error(function(data, status, headers, config){ 

}).then(function(data, status, headers, config){ 
    //put code here to run after the http call 
}) 

編輯2:在通話的。那麼()部分

回只需檢查裝有何種狀態使用

$ionicHistory.currentStateName()

所以它看起來像

.then(fucntion(data, status, headers, config){ 
    if($ionicHistory.currentStateName() === "about"){ 
     //open modal 
} 
}) 

檢查以查看您是否處於關於視圖。如果你拉起模式,如果不是。容易peasy檸檬squezzy。查看更多有關此檢查狀態/視圖http://ionicframework.com/docs/api/service/ $ ionicHistory/

+0

我已經解釋過我正在使用setTimeout來模擬異步調用。問題不在於清除超時,而是爲了「停止」異步流程。 –

+0

看到我的編輯,是你在找什麼? –

+0

沒問題剛剛看到你的闖入者,讓我爲此做點什麼 –

0

您需要將支票添加到處理程序:

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {...}