Как продлить/перезаписать параметры по умолчанию в Angular Материал $mdDialog.show?

TL; DR: мне нужен способ перезаписать параметры по умолчанию, предоставленные моим Angular материалом (особенно в Material Dialog), используя поставщиков (как и любые другие модули Angular - случайный пример).

Я искал способ настроить значения по умолчанию options Angular Material Modal, но без каких-либо полезных результатов.

Подобно тому, как я использовал другие плагины/модули, этот способ можно было бы достичь с помощью provider. Взглянув в ядро материала (1.0.8), я пытался установить параметры, используя метод setDefaults, подобный этому (скажем, я просто хочу отключить фоновое отображение на мгновение):

app.config(['$mdDialogProvider', function($mdDialogProvider){
    console.log($mdDialogProvider); 
    // ^ $get/addMethod/addPreset/setDefaults

    var defaults = {
        options: function(){
            return {
                hasBackdrop: false
            }
        }
    }
    $mdDialogProvider.setDefaults(defaults);
}]);

Прямо сейчас, когда я проверяю параметры на обратном вызове onComplete:

Итак, вы можете видеть, что параметр hasBackdrop обновлен, но модаль больше не работает, поэтому я думаю, что что-то не хватает.

Есть ли у вас какие-либо идеи о том, как можно было бы правильно расширить параметры Angular по умолчанию?

Спасибо

UPDATE: объект Options без наличия .setDefaults active (начальное состояние)

Примечание. Я скопировал их из основного ядра transformTemplate и добавил в свой объект по умолчанию, но результат тот же. Я могу видеть обновленную DOM, консоль не имеет ошибок, но модальная не видна.

Ответ 1

Если вы хотите обновить существующую функциональность из сторонней библиотеки, вы должны попытаться использовать шаблон декоратора и украсить метод службы.

Angular обеспечивает аккуратный способ сделать это, используя decorators on providers при настройке приложения: https://docs.angularjs.org/api/auto/service/ $

$provide.decorator

$provide.decorator(name, decorator);
Зарегистрируйте декоратор сервисов с помощью инжектора $. Декоратор сервисов перехватывает создание службы, позволяя ей переопределять или изменять поведение службы. Объект, возвращаемый декоратором, может быть исходной услугой или новым служебным объектом, который заменяет или обертывает и делегирует исходную службу.

Вы можете написать декоратор для $mdDialogProvider, чтобы расширить функциональность метода .show и передать ему расширенный объект options, как показано ниже:

.config(function ($provide) {
  // Decorate the $mdDialog service using $provide.decorator
  $provide.decorator("$mdDialog", function ($delegate) {
    // Get a handle of the show method
    var methodHandle = $delegate.show;

    function decorateDialogShow () {
      var args = angular.extend({}, arguments[0], { hasBackdrop: false })
      return methodHandle(args);
    }

    $delegate.show = decorateDialogShow; 
    return $delegate;
  });
});

Я создал кодировщик с рабочим примером с { hasBackdrop: false }, так что при вызове $mdDialog.show() не отображается фоновый рисунок: http://codepen.io/addi90/pen/RaXqRx

Ответ 2

Пожалуйста, найдите codepen с демо здесь: http://codepen.io/shershen08/pen/vGoQZd?editors=1010

Как будет выглядеть сервис:

   var dialogFactory = function($mdDialog) {
      var options = {};
  return {

    create: function(conf) {
      var preset = $mdDialog.alert()._options; //get defaults
      var newOptions = angular.extend(preset, conf, options);//extend with yours
      $mdDialog.show(newOptions);
    },
    //toggle various props
    setProp: function(prop, val) {
      options[prop] = val;
    }
  };

};

а в контроллере вы можете использовать его следующим образом:

$scope.toggleBackdrop = function() {
        $scope.backdrop = !$scope.backdrop;
        //here we change the state of the service internal var
        dialogService.setProp('hasBackdrop', $scope.backdrop);
      };
      $scope.showDialogViaService = function(ev) {
        //here we fill in the needed params of the modal and pass to the service
        var obj = {
          'title': 'title',
          'content': 'content',
          'ok':'Ok!'
        };
        dialogService.create(obj);
      }