我在AngularJS中有一个需要两个回调函数确认的对话框:一个是当用户点击“是”,另一个是当用户点击“否”时触发。
我需要先询问用户是否完成了操作,如果用户回答“是”,我还需要问他是否想将该用户添加为管理员。无论两个问题的回答如何,我都需要保存数据。
所以,我有这个可怕、充斥着回调地狱的代码来处理我上面提到的分支:
$scope.promptAndSave = function() {
// first question
$scope.confirmation.display("Confirmation", "Did you finish working on this Reference Check?", function() {
// handles Yes for first question
$scope.referenceCheck.finished = true;
var manager_name = $scope.referenceCheck.first_name + " " + $scope.referenceCheck.last_name;
$scope.confirmation.display("Add new Manager", "Do you want to add <b>" + manager_name + "</b> as a new manager to your database?", function() {
// handles Yes for second question
$scope.referenceCheck.add_manager = true;
$scope.saveReferenceCheck();
}, function() {
// handles No for second question
$scope.saveReferenceCheck();
});
}, function() {
// handles No for first question
$scope.saveReferenceCheck();
});
};
这是否可以通过使用承诺来潜在地解决?或者有其他更通用的JS技术更适合此项任务?
我了解AngularJS提供了$q,这有帮助吗?将上面的代码转换为promise后会是什么样子?
编辑
因此,确认是我的$scope上的本地对象,就像这样:
$scope.confirmation = {
visible: false,
title: "",
prompt: "",
yes: function() {
this.visible = false;
this.yesHandler();
},
no: function() {
this.visible = false;
this.noHandler();
},
display: function(title, prompt, yesHandler, noHandler) {
this.title = title;
this.prompt = prompt;
this.yesHandler = yesHandler;
this.noHandler = noHandler;
this.visible = true;
}
};
我有一个与对象交互的模板HTML代码,用于显示提示:
<div id="confirmationForm" ng-show="confirmation.visible">
<div class="form-title">{{ confirmation.title }}</div>
<div class="form-body">
<div class="message" ng-bind-html-unsafe="confirmation.prompt"></div>
<div class="actions">
<span>
<button ng-click="confirmation.yes()">Yes</button>
<button ng-click="confirmation.no()">No</button>
</span>
<img src="/assets/spinner.gif" ng-show="confirmation.busy">
</div>
</div>
</div>
编辑2
在得到一些帮助后,我成功地完成了这个项目:http://jsfiddle.net/LJr5z/1/
编辑3
最后,$q不支持Angular 1.0.3中的finally
,因此这是最新版本的JSFiddle,使用了AngularJS 1.2 - http://jsfiddle.net/LJr5z/3/
$scope.confirmation
对象,以及我的模板代码。 - kolrie