Angular Material $mdDialog.confirm 有超过 "OK" 和 "Cancel" 个选项

Question

我必须在 Angular Material 中构建一个 $mdDialog window 以便用户可以 select 从不同的操作。根据 selected 操作，应用程序将生成新报告或加载现有报告，或者完全取消对话框。问题是确认 $mdDialog 只有 .ok 选项和 .cancel 选项内置，如果你查看 Angular Material 站点上的文档（我附上了一个打印屏幕，其中包含来自该站点的演示代码片段).

$mdDialog confirm demo code

所以现在我的问题是：如何向我的 $mdDialog window 添加多个操作选项。另外，如何将功能与控制器中的这些选项联系起来？例如，如果你 select "Generate new report"，那么某个服务会触发，但如果你 select "Show me the previous report"，则另一个服务会触发。对不起，如果这是一个初学者问题，但我觉得我又没有完全掌握在这种情况下应用的正确 AngularJS 逻辑。

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

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

您可以了解如何处理多个按钮并获得除了“确定”或“取消”之外的响应。

Angular Material $mdDialog.confirm 有超过 "OK" 和 "Cancel" 个选项

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

javascript

angularjs

angular-material

mddialog