Question

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

$mdDialog confirm demo code

所以现在我的问题是：如何在$ mdDialog窗口中添加多个操作选项。另外，如何将功能绑定到控制器中的这些选项？例如，如果选择“生成新报告”，则会触发某个服务，但如果选择“显示上一个报告”，则会触发另一个服务。很抱歉，如果这是一个初学者问题，但我觉得我再次没有完全掌握在这种情况下应用的正确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';
});

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

角度材料$ mdDialog.confirm具有多个“确定”和“取消”选项

2 个答案: