約束を実行中に$ ionicLoadingを停止するには？

Question

私はionicLoadingを作っていて、私は同じ機能を使用しました。original-pageからmy-next-pageに行くのはstartNow()です。

私は初めてstartNow()を呼び出し、$timeout()サービスが呼ばれた後にはmy-next-pageに直接行きます。私は私の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は、キャンセルボタンをクリックしたときにキャンセルするために保存できる約束を返します。

は、以下のコードを修正しますが、それは:)こと

編集を期待するとして、これはトリックを行います願っています：私のせい - $ ionicLoading.showは約束を返さない、コールは、しかし、この場合では正しくありません。以下のコード例でそれを修正しました。また、$ scopeScope.transitionTimeoutを$ rootScope.transitionTimeoutに変更しました（ヒント：$ rootScopeを使用してきれいではありませんが、実際の例を説明するにはこれが最速の方法です）。問題は、単に$ ionicLoadingサービスにスコープを渡すことができないため、ロードテンプレートにコントローラを追加すると、transitionTimeout約束が定義されていない新しいスコープが作成されることです。

これを実装するきれいな方法は、ビューのコントローラを設定し、読み込みテンプレートの2番目のコントローラを設定することです。両方の間の通信では、プロミスを保有するサービスを使用できます。

ただし、すばやく実用的な例を以下に示します。あなたはまた、右ここでそれを試すことができます。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(); 
     }); 
    } 
}