Угловой диалог материала JS с несколькими вариантами сохранения - PullRequest
Новая
       8

Угловой диалог материала JS с несколькими вариантами сохранения

0 голосов
/ 10 октября 2018

Я пытаюсь открыть диалоговое окно с несколькими вариантами сохранения и другим параметром для сохранения и закрытия, а также с возможностью отмены, где кнопка (сохранить и закрыть) сохранит данные и закроет диалоговое окно, а кнопка (сохранить)) кнопка сохранит данные в модальном режиме, затем откроет пустой экземпляр модального режима, проблема заключается в том, что при добавлении двух параметров с помощью кнопки «Сохранить» я вижу только кнопки для сохранения и отмены. Вот пример углового фрагмента материала, который я изменяю: 

$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

1 Ответ

0 голосов
/ 11 октября 2018

Невозможно получить представление в диалоговом окне, которое вы описали, используя $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',
  });
};

Я разбудил ваш CodePen, чтобы включить пример, описанный выше.

Редактировать

Чтобы кнопка сохранения снова открыла то же самое диалоговое окно, просто соедините вызов, чтобы открыть диалоговое окно для вызова, чтобы сначала скрыть его.Вы можете сделать это, потому что возвращаемое значение $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...
     },
   });
}

А вот обновленный ответный код CodePen.

...