如何在執行promise時停止$ ionicLoading？

Question

我做了一個ionicLoading和我使用相同的功能 - startNow()去從original-page到my-next-page。

第一次我只是打電話startNow()，它直接去my-next-page後$timeout()服務調用。

這裏是我的真正的問題：

我有我的myLoadingTemplate.html一個取消按鈕和我所說的同樣的功能startNow(true)。問題是我在加載過程中點擊取消按鈕後，頁面重定向到我的original-page。但是，在2500毫秒後，頁面仍然會重定向到my-next-page。

如何解決這個問題？

$scope.startNow = function(is_force) 
{ 
    if(is_force===true) 
    { 
     $state.go('orignal-page'); 
     $ionicLoading.hide(); 
    }else 
    { 
     $ionicLoading.show({ 
      templateUrl: "myLoadingTemplate.html", 
      nBackdrop: false 
      }).then(function(){ 
        $timeout(function(){ 

         $state.go('my-next-page'); 
         $ionicLoading.hide(); 

        },2500); 
     }); 
    } 
} 

Answer 1

所以，如果我得到你的權利，你將不會阻止取消後超時後的延遲狀態改變。這可以通過實際取消超時來完成。 $超時返回一個承諾，您可以在點擊取消按鈕時取消它。

修改下面的代碼，希望這不會把戲，你希望它是:)

編輯：我的錯 - $ ionicLoading.show不返回一個承諾，該呼叫在這種情況下，雖然不正確。在下面的代碼示例中更正了它。此外，我將$ scope.transitionTimeout更改爲$ rootScope.transitionTimeout（提示：是的，使用$ rootScope不是很乾淨，這是說明一個工作示例的最快方式）。問題在於將範圍傳遞給$ ionicLoading服務是不可能的，因此，當您將一個控制器添加到加載模板時，將創建一個新的範圍，其中不定義transitionTimeout承諾。

因此，一個乾淨的方式來實現這一點將是建立一個控制器的視圖和第二個加載模板，併爲您之間的溝通，你可以使用服務承諾。

但是：一個快速而實用的例子如下所示。您也可以嘗試，就在這裏：http://play.ionic.io/app/4349c868f8b4

$scope.startNow = function(is_force) 
{ 
    if(is_force===true) 
    { 
     // cancel your timeout by using the reference 
     // HINT: $rootScope implementation is not the cleanest solution here 
     //  should mainly illustrate a quick solution! E.g. a better solution 
     //  would be to implement a LoadingService, which stores such a 
     //  transition timeout promise uniquely 
     $timeout.cancel($rootScope.transitionTimeout); 

     $state.go('orignal-page'); 
     $ionicLoading.hide(); 
    }else 
    { 
     $ionicLoading.show({ 
      templateUrl: "myLoadingTemplate.html", 
      nBackdrop: false 
     }) 

     // store the promise here 
     $rootScope.transitionTimeout = $timeout(function(){ 
      $state.go('my-next-page'); 
      $ionicLoading.hide(); 
     }); 
    } 
}