带有多个保存选项的 Angular JS 材质对话框

Question

我正在尝试创建一个对话框，其中包含多个保存选项以及另一个保存和关闭选项以及取消选项，其中（保存和关闭）按钮将保存数据并关闭对话框，而（保存) 按钮将在模态中保存数据，然后打开模态的一个空实例，问题是当添加两个带有保存的选项时，我只看到保存和取消按钮，这是我正在修改的角度材料片段示例：

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

当点击确认对话框按钮时，我希望看到三个按钮，下面是修改后的代码：

https://codepen.io/anon/pen/dgWzjw

Answer 1

您无法使用$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() 的返回值是一个承诺，一旦对话框隐藏，就会解决。

要继续上面的示例，您需要进行一些轻微的重构，以确保您不会影响 $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...
     },
   });
}

And here's an updated CodePen fork.