Question

我制作了一个ionicLoading并使用相同的功能 - startNow()从original-page转到my-next-page。

我第一次拨打startNow()并在my-next-page服务被叫后直接转到$timeout()。

这是我真正的问题：

我的myLoadingTemplate.html上有一个取消按钮，我调用相同的功能startNow(true)。问题是在加载过程中单击取消按钮后，页面重定向到我的original-page。但是在2500ms之后，页面仍然会重定向到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

因此，如果我说得对，那么在取消超时后，您不会阻止延迟状态更改。这可以通过实际取消超时来完成。 $ timeout返回一个promise，您可以在单击取消按钮时将其取消以取消它。

修改下面的代码，希望这可以达到您预期的效果：）

编辑：我的错 - $ ionicLoading.show没有返回一个promise，但在这种情况下调用是不正确的。在下面的代码示例中进行了更正。我还将$ 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();
         });
     }
}

如何在执行promise时停止$ ionicLoading？

1 个答案: