如何在Angular Material$mdDialog.show中extend/overwrite默认选项？

Question

TL;DR ：我需要一种方法来覆盖默认选项，前提是我的 Angular Material（尤其是在 Material 对话框上）使用提供程序（像任何其他angular 个模块 - a random example）。

我一直在寻找一种自定义默认值的方法options Angular Material Modal，但没有任何可用的结果。

就像我在其他 plugins/modules 上使用的那样，这种方式可以使用 provider 来实现。查看 material (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：没有 .setDefaults 活动的选项对象（初始状态）

注意：我已经从他们的核心 transformTemplate 复制并添加到我的默认对象中，但结果是一样的。我可以看到 DOM 已更新，控制台没有错误，但模式不可见。

Answer 1

当您想从第三方库更新现有功能时，您应该尝试使用装饰器模式 并装饰服务方法。

Angular 在配置应用程序时使用 providers 上的 decorators 提供了一种巧妙的方法：https://docs.angularjs.org/api/auto/service/$provide

$provide.decorator

$provide.decorator(name, decorator);
Register a service decorator with the $injector. A service decorator intercepts the creation of a service, allowing it to override or modify the behavior of the service. The object returned by the decorator may be the original service, or a new service object which replaces or wraps and delegates to the original service.

您可以为 $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

Answer 2

请在此处找到带有演示的代码笔：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);
      }

如何在Angular Material$mdDialog.show中extend/overwrite默认选项？

How to extend/overwrite default options in Angular Material $mdDialog.show?

javascript

decorator

angularjs

angular-material