具有多个保存选项的Angular JS材质对话框
具有多个保存选项的Angular JS材质对话框
提问于 2018-10-11 04:34:37
我正在尝试一个有多个保存选项的对话框和另一个保存和关闭的选项以及取消选项，其中(保存和关闭)按钮将保存数据并关闭对话框，而(保存)按钮将以模式保存数据，然后打开模式的空实例，问题是当使用保存添加两个选项时，我只看到保存和取消按钮，这是我正在修改的角度材料片段示例：
$scope.showConfirm = function(ev) {
// Appending dialog to document.body to cover sidenav in docs app
var confirm = $mdDialog.confirm()
.title('Would you like to delete your debt?')
.textContent('All of the banks have agreed to forgive you your debts.')
.ariaLabel('Lucky day')
.targetEvent(ev)
.ok('Save and Close')
.ok('Save')
.cancel('Cancel');单击确认对话框按钮时，我希望看到三个按钮，以下是修改后的代码：
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-11 08:50:40
您不能使用$mdDialog.confirm()实现您所描述的对话框表示。
此方法提供了一个预配置的对话框，该对话框只能有两个操作按钮。您可以通过向$mdDialog.show()提供更多配置参数来构建所需的对话框。
下面是一个例子。
您需要为您的自定义对话框提供HTML：
<script type="text/ng-template" id="custom-confirm.html">
<md-dialog>
<md-dialog-content>
<md-content layout-padding>
<div>...</div>
</md-content>
</md-dialog-content>
<md-dialog-actions>
<md-button ng-click="cancel()">Cancel</md-button>
<md-button ng-click="save()">Save</md-button>
<md-button ng-click="saveAndClose()">Save and Close</md-button>
</md-dialog-actions>
</md-dialog>
</script>然后向$mdDialog.show()提供自定义对话框配置
$scope.showCustomConfirm = function () {
$mdDialog.show({
controller: function ($scope, $mdDialog) {
$scope.cancel = function () {
$mdDialog.cancel();
};
$scope.save = function () {
/* ... */
};
$scope.saveAndClose = function () {
/* ... */
};
},
templateUrl: 'custom-confirm.html',
});
};I've forked your CodePen to include the example described above.
编辑
要让保存按钮重新打开同一个对话框，只需将打开对话框的调用链接到一个调用上，然后将其隐藏起来。之所以可以这样做，是因为$mdDialog.hide()的返回值是一个promise，一旦对话框隐藏了它自己，它就会解析。
为了继续上面的例子，您需要进行一些轻微的重构，以确保您不是在隐藏$scope
$scope.showCustomConfirm = showCustomConfirm;
function showCustomConfirm() {
$mdDialog.show({
controller: function ($scope, $mdDialog) {
$scope.save = function () {
// Save data...
$mdDialog.hide().then(showCustomConfirm);
};
// Everything else as before...
},
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52748388
复制相关文章
相似问题