使用 Angular Material $mdDialog.confirm 时如何添加除了"OK"和"Cancel"以外的选项？

Question

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

现在我的问题是：如何向我的$mdDialog窗口添加多个操作选项？还有，如何将函数绑定到控制器中的这些选项？例如，如果您选择“生成新报告”，则会触发某个服务，但如果您选择“显示以前的报告”，则会触发另一个服务。

抱歉，如果这是一个初学者的问题，但我感觉我再次没有完全掌握正确的AngularJS逻辑来应用于这种情况。

- Iulia Mihet

Answer 1

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

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

- A G

---

谢谢你的回答，Aseem！这就是我所做的，我一直以非常严格的方式来解决问题（没有想到我可以自定义$mdDialog）。 - Iulia Mihet

另外，非常重要的一点是：当引用在另一个文件中定义的控制器时，应该以字符串形式进行引用（例如，'DialogController'）。否则，AngularJS会报UnknownProvider错误。 - Iulia Mihet

Answer 2

@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';
});

你可以看到如何处理多个按钮以及获取除“确定”或“取消”之外的响应。

- Mike Feltman

---

谢谢Mike，我没想到使用Promises来捕获按钮选择。 - Iulia Mihet