Question

我有一个我在Visual Studio 2015中工作的Cordova / Angular应用程序。应用程序的页面都是index.html上的div，并根据每个div的ng-show显示/消失。有一个后退按钮可将当前页面视图重置为false，并将主页重置为true。如果我只是在页面之间前后移动，这一切都有效。但是，一个屏幕需要一个确认框以确保用户确实想要返回。为了让它看起来时尚，我使用SweetAlert来显示确认/取消按钮和消息。确认按钮将$ scope.home设置为true，将$ scope.gameScreen设置为false，就像标准后退按钮一样，但它实际上并没有返回。确认框消失，控制台日志显示函数被正确调用，但ng-show部分没有触发。

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

我尝试在SweetAlert之外调用函数确认它是否有所不同但是甚至通过goBack函数循环回来看它有帮助但是游戏屏幕永远不会隐藏自己。

无论如何，关键是Angular在使用SweetAlert时没有响应控制ng-show变化的变量。

任何帮助/建议都将不胜感激。

谢谢

Answer 1

正如charlietfl所说，在SweetAlert方法中调用的$ scope.apply（）解决了这个问题。

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

Answer 2

显示警报然后使用$ scope执行某些操作的实际示例如下：

    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;

        });
    });

这对我有用......！

SweetAlert确认框未设置AngularJS范围变量

2 个答案: