Angular Material$mdDialog.confirm;OK”;以及“;取消“;选项

Angular Material $mdDialog.confirm with more than "OK" and "Cancel" options

本文关键字：以及 取消 选项 OK mdDialog confirm Angular Material      更新时间：2023-09-26

我必须在Angular Material中构建一个$mdDialog窗口，以便用户可以从不同的操作中进行选择。根据所选操作，应用程序将生成新报告或加载现有报告，或者完全取消对话框。问题是，如果你查看Angular Material网站上的文档，confirm$mdDialog中只内置了.ok选项和.cancel选项（我附上了一个带有该网站演示代码片段的打印屏幕）。

$mdDialog确认演示代码

所以现在我的问题是：如何将多个操作选项添加到$mdDialog窗口中。此外，如何将功能与控制器中的这些选项联系起来？例如，如果选择"生成新报告"，则某个服务将被激发，但如果选择"显示上一个报告"，将激发另一个服务。如果这是一个初学者的问题，很抱歉，但我觉得我再次没有完全掌握在这种情况下应用的正确AngularJS逻辑。

您可以为确认对话框使用自定义模板。

var confirm = $mdDialog.confirm({
      controller: DialogController,
      templateUrl: 'dialog1.tmpl.html',
      parent: angular.element(document.body),
      targetEvent: ev,
    })
    $mdDialog.show(confirm).then(function() {
      $scope.status = 'Confirm resolved';
      $scope.codeRunningBeforeResolve = 'code only runs after resolve';
    });

Codepen

@Aseem，很抱歉复制您的代码以获得答案，但我无法在评论中做到这一点。

Aseem的回答缺少一点。如果向then函数添加参数，它将收到用户单击的按钮的标题。因此，如果我们将其修改为：

var confirm = $mdDialog.confirm({
  controller: DialogController,
  templateUrl: 'dialog1.tmpl.html',
  parent: angular.element(document.body),
  targetEvent: ev,
})
$mdDialog.show(confirm).then(function(answer) {
  $scope.status = answer;
  $scope.codeRunningBeforeResolve = 'code only runs after resolve';
});

您可以看到如何处理多个按钮并获得除"确定"或"取消"以外的响应。

相关文章：