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

【问题标题】：SweetAlert confirmation box not setting AngularJS scope variableSweetAlert 确认框未设置 AngularJS 范围变量
【发布时间】：2016-07-02 02:41:18
【问题描述】：

我有一个正在使用 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 函数循环返回以查看它的帮助，但游戏屏幕从不隐藏自身。

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

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

谢谢

【问题讨论】：

每当您在 Angular 上下文之外的范围内做任何事情时都需要使用 $apply() 以便 Angular 知道运行摘要
@charlietfl，谢谢，我自己才想起来。感谢您的及时回复。

标签： angularjs cordova sweetalert

【解决方案1】：

正如 charlietfl 所指出的，在 SweetAlert 方法中调用的 $scope.apply() 解决了这个问题。

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

【讨论】：

【解决方案2】：

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

狼吞虎咽（{ 标题：“你确定吗？”， text: "你将无法恢复这个虚构的文件！", 类型：“警告”，显示取消按钮：真，确认按钮颜色：“#DD6B55”， confirmButtonText: "是的，删除它！", 关闭确认：假 }, 功能（）{ $scope.$apply(function () { console.log("做点什么"); $scope.showSome = true; $scope.showAnother = false; }); });

这对我有用...！

【讨论】：