2016-07-02 11 views
0

私はVisual Studio 2015で作業しているコーデバー/角度アプリを持っています。 このアプリケーションのページは、index.html上のすべてのdivであり、ngに基づいて表示/各部門のショー 現在のページビューをfalseにリセットし、ホームページをtrueに戻す戻るボタンがあります。これは、ページ間を前後に移動するだけで動作します。 しかし、1つの画面には、ユーザーが実際に戻ることを確認するための確認ボックスが必要です。スタイリッシュに見せるために、SweetAlertを使用して確認/キャンセルボタンとメッセージを表示しています。 確認ボタンは、標準の戻るボタンと同じように$ scope.homeをtrueに、$ scope.gameScreenをfalseに設定しますが、実際には戻っていません。確認ボックスが消え、コンソールログに関数が正しく呼び出されたが、ng-showの部分が起動しないことがコンソールログに表示されます。SweetAlertの確認ボックスにAngularJSスコープ変数が設定されていない

戻るボタンの機能があると私のdivは以下の通りです:

<!-- GAME SECTION --> 
<div id="gameScreen" class="screen" ng-show="gameScreen"> 
... 
</div> 

<!-- HOME SCREEN --> 
<div id="homeScreen" class="screen" ng-show="homeScreen"> 
... 
</div> 

$scope.goBack = function() { 
    if ($scope.gameScreen != true || ($scope.currentGuess == "" &&   playersTurn == true)) { 
     console.log("returning home"); 
     $scope.homeScreen = true; 
     $scope.gameScreen = false; 
     $scope.optionsScreen = false; 
     $scope.instructionsScreen = false; 
     $scope.onlineRegistrationScreen = false; 
     $scope.pages.homePage = true; 
     $scope.pages.currentPage = "home"; 

     console.log("home page: " + $scope.pages.homePage); 
     console.log("scope.currentPage: " + $scope.pages.currentPage); 
     console.log("scope.gameScreen: " + $scope.gameScreen); 

     $scope.difficulty = ""; 
    } else { 
     // confirm going back from game screen 
     swal({ 
      title: "Are you sure?", 
      text: "This will end your current game and record it as a loss.", 
      type: "warning", 
      showCancelButton: true, 
      confirmButtonColor: "#382E1C", 
      confirmButtonText: "Yes (Lose Game)", 
      closeOnConfirm: true 
     }, function() { 
      console.log("Go Back confirmation clicked"); 
      $scope.confirmLoseGame(); 
     }); 
    } 
} 

$scope.confirmLoseGame = function() { 
    console.log("confirm lose game"); 
    $scope.gameScreen = false; 
    // $scope.pages.homePage = true; 
    //$scope.pages.currentPage = "home"; 

    $scope.goBack(); 
} 

私はそれが違いを作ったが、でもそれがループバックGOBACK機能によりに作られたかどうかを確認するためにSweetAlert確認の外の関数を呼び出すみましたそれを助けてくれたのですが、ゲーム画面は決して隠れません。

とにかく、Angularは、SweetAlertの使用時にng-showを制御する変数に応答していません。

ご協力いただきありがとうございます。

おかげ

+0

角度コンテクスト外のスコープで何かするときはいつでも '$ apply()'を使う必要がありますので、角度はダイジェストを実行するのを知っています – charlietfl

+0

@charlietfl、ありがとう、ちょうど自分自身を思い出しました。迅速な返信を感謝します。 – Steve

答えて

0

SweetAlert方法は、問題を修正内側と呼ばれるcharlietfl、$ scope.apply()で述べたように。

$scope.$apply(function() { 
     $scope.homeScreen = true; 
     $scope.gameScreen = false; 
    }); 
0

次のように警告を表示し、$スコープを使って何かをするための実用的な例は次のとおりです。

 
    swal({ 
     title: "Are you sure?", 
     text: "You will not be able to recover this imaginary file!", 
     type: "warning", 
     showCancelButton: true, 
     confirmButtonColor: "#DD6B55", 
     confirmButtonText: "Yes, delete it!", 
     closeOnConfirm: false 
    }, 
    function(){ 
     $scope.$apply(function() { 
      console.log("make something"); 
      $scope.showSome = true; 
      $scope.showAnother = false; 

     }); 
    }); 

これは私のために働きました...!

関連する問題