SweetAlert2, .then() - 不立即更新 DOM答案

【问题标题】：SweetAlert2, .then() - not updating DOM immediatelySweetAlert2, .then() - 不立即更新 DOM
【发布时间】：2017-09-21 19:26:58
【问题描述】：

问题：
在甜蜜警报上单击“确定”后，我想将用户重定向到另一个页面，但在我出于某种原因打开另一个甜蜜警报之前，用户不会被重定向。
您可以在代码上设置断点，但页面上什么也没有发生。

问题的简单示例：http://jsfiddle.net/ADukg/14306/

注意：包括 0 秒超时“解决了问题”

复制：
1）注意箭头后面的文字.. $scope.name = "original"，你可以看到它显示在页面上。
2) 单击“首先单击”按钮。这会运行函数 $scope.changeMe()，它会将 $scope.name 更新为“delayed.......”
3) 到现在为止，按钮上方的文字应该已经改变了。但是直到您打开另一个甜蜜警报，文本才会真正改变
4）点击“then here”或“click first”按钮，弹出另一个甜蜜的警报，DOM最终会改变。

我很确定这与 AngularJS 有某种关系，必须使用 1.4.3。

有什么想法吗？

HTML：

<div ng-controller="MyCtrl">
  <div>
    <button ng-click="changeMe()">click first</button>
    <button ng-click="decoy()">then here</button>
  </div>
  <div>
    <button ng-click="reset()">reset text</button>
  <div>
</div>

JS：

var myApp = angular.module('myApp',[]);

myApp.controller("MyCtrl", function($scope, $timeout) {
    $scope.name = 'original';
    $scope.copy = angular.copy($scope.name);

    $scope.changeMe = function() {
      swal("Text should change now")
      // runs on hitting "OK"
      .then(function() {
                  // UNCOMMENT THIS and re-run the fiddle to show expected behavior
          // $timeout(function() { $scope.displayErrorMsg = false; }, 0);
          $scope.name = 'delayed.......'
      })
    }

    $scope.decoy = function() {
        swal("Look at the text now");
    }

    $scope.reset = function() {
        $scope.name = $scope.copy;
    }
})

【问题讨论】：

除非 SweetAlert 库是为 Angular 设计的，否则它将在 Angular 上下文之外运行。必须调用 Angular 的摘要循环才能使更改生效。 ng-click 应用摘要循环，这就是您在第二次单击后看到更改的原因。 $timeout 也称为摘要循环。查看您的示例并添加$scope.$apply()：jsfiddle.net/ADukg/14313
ngSweetAlert 是如果您想与 angular 正确集成的方法，否则您将不得不使用 @AlexK 上面提到的$scope.$apply() 手动通知 angular 此类模型更改。
@AlexK 正好解决了我的问题。我创建了一个 Angular 包装器工厂，每次我们使用甜蜜警报时都会调用它。谢谢你的帮助！感谢马修·考利的确认！

标签： javascript angularjs sweetalert sweetalert2

【解决方案1】：

我发现你的小提琴有些问题

1)swal 不是 Angular 库。所以它不能与角度摘要周期一起工作，这就是为什么它只在调用 $timeout 之后才起作用。 this 教程解释了为什么以及如何解决它。

2）我看到您已将 ng sweet alert 添加为依赖项，但它在 angular 之前调用，因此它不会在您的小提琴中注册并且存在控制台错误。

3) 如果您尝试使用 ng-sweet-alert，它不会使用此语法。您需要先将其包含在依赖中

var myApp = angular.module('myApp',['oitozero.ngSweetAlert']);

而且它不返回一个承诺，它需要以不同的方式调用。

SweetAlert.swal("Here's a message");

【讨论】：