Angular JS material 带有多个选项的对话框来保存

Question

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

$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() 的 return 值是一个承诺，一旦对话框隐藏自身就会解决。

要继续上面的示例，您需要进行一些轻微的重构以确保您没有隐藏 $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.

Angular JS material 带有多个选项的对话框来保存

Angular JS material dialog with multiple options to save

angularjs

angularjs-material

编辑