SweetAlert2, .then() - 不立即更新 DOM
SweetAlert2, .then() - not updating DOM immediately
问题:
我想在甜蜜警报上单击“确定”后将用户重定向到另一个页面,但由于某种原因,直到我打开另一个甜蜜警报,用户才被重定向。
您可以在代码上断点,但页面上没有任何反应。
问题的简单例子:http://jsfiddle.net/ADukg/14306/
注意:包括 0 秒超时 "solves the problem"
要复制:
1)注意箭头后面的文字.. $scope.name = "original",你可以看到它显示在页面上。
2) 单击"click first" 按钮。这将运行函数 $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;
}
})
我发现你的问题 fiddle
1)swal 不是 angular 库。所以它不会与 angular 摘要循环一起工作,这就是为什么它只在 $timeout 被调用后才工作。
this 教程解释了为什么以及如何修复它。
2) 我看到你已经添加了 ng sweet alert 作为依赖项,但是它在 angular 之前被调用,所以它不会在你的 fiddle 中注册并且有一个控制台错误。
3) 如果您尝试使用 ng-sweet-alert,它不会使用此语法。您需要先将其包含在依赖项中
var myApp = angular.module('myApp',['oitozero.ngSweetAlert']);
它不是 return 承诺,需要以不同的方式调用它。
SweetAlert.swal("Here's a message");
问题:
我想在甜蜜警报上单击“确定”后将用户重定向到另一个页面,但由于某种原因,直到我打开另一个甜蜜警报,用户才被重定向。
您可以在代码上断点,但页面上没有任何反应。
问题的简单例子:http://jsfiddle.net/ADukg/14306/
注意:包括 0 秒超时 "solves the problem"
要复制:
1)注意箭头后面的文字.. $scope.name = "original",你可以看到它显示在页面上。
2) 单击"click first" 按钮。这将运行函数 $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;
}
})
我发现你的问题 fiddle
1)swal 不是 angular 库。所以它不会与 angular 摘要循环一起工作,这就是为什么它只在 $timeout 被调用后才工作。 this 教程解释了为什么以及如何修复它。
2) 我看到你已经添加了 ng sweet alert 作为依赖项,但是它在 angular 之前被调用,所以它不会在你的 fiddle 中注册并且有一个控制台错误。
3) 如果您尝试使用 ng-sweet-alert,它不会使用此语法。您需要先将其包含在依赖项中
var myApp = angular.module('myApp',['oitozero.ngSweetAlert']);
它不是 return 承诺,需要以不同的方式调用它。
SweetAlert.swal("Here's a message");