首页 文章

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

提问于
浏览 次
0

我有一个我在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变化的变量 .

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

谢谢

angularjs cordova sweetalert

2 回答

  • 0

    正如charlietfl所述，在SweetAlert方法中调用的$ scope.apply（）修复了这个问题 .

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

    显示警报然后使用$ 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;

        });
    });

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

    回复于

相关问题