Question

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

$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.

Angular JS材质对话框，具有多个保存选项

1 个答案:

编辑