2016-07-02 7 views
0

У меня есть приложение Cordova/Angular, над которым я работаю в Visual Studio 2015. Страницы для приложения - все divs на index.html и появляются/исчезают на основе ng -show для каждого div. Существует кнопка возврата, которая сбрасывает текущее изображение страницы на false, а домашняя страница - на true. Это все работает, если я просто перемещаюсь назад и вперед между страницами. Однако на одном экране требуется окно подтверждения, чтобы убедиться, что пользователь действительно хочет вернуться. Чтобы он выглядел стильно, я использую SweetAlert для отображения кнопок подтверждения/отмены и сообщения. Кнопка подтверждения устанавливает для параметра $ scope.home значение true и значение $ scope.gameScreen равно false, как и стандартная кнопка назад, но на самом деле она не возвращается. Поле подтверждения исчезает, и в журнале консоли отображается, что функция была вызвана правильно, но часть ng-show не срабатывает.Поле подтверждения подтверждения SweetAlert Не задано значение переменной AngularJS

Мои дивы ниже как задняя кнопка функции:

<!-- 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(); 
} 

Я пытался вызвать функцию вне SweetAlert подтверждения, чтобы увидеть, если он сделал разницу, но даже сделал петлю обратно через функцию GoBack к видеть, что это помогло, но игровой экран никогда не прячется.

В любом случае, точка Angular не отвечает на переменную, контролирующую изменение ng-show при использовании SweetAlert.

Любая помощь/предложения будут оценены.

Благодаря

+0

Всякий раз, когда вы делаете что-либо с областью видимости вне углового контекста, нужно использовать '$ apply()', так что угловой знает, как запустить дайджест – charlietfl

+0

@charlietfl, спасибо, просто запомнил это сам. Цените ответ быстрого ответа. – Steve

ответ

0

Как отметил charlietfl, $ scope.apply() Вызывается внутри метода SweetAlert фиксированной проблемы.

$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; 

     }); 
    }); 

Это работало для меня ...!