如何在执行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(); 
     }); 
    } 
}