如何扩展/覆盖Angular Material $ mdDialog.show中的默认选项？

Question

TL; DR:我需要一种覆盖默认选项的方法,使用提供程序(如任何其他角度模块 - 随机示例)提供我的Angular Material(特别是在Material Dialog上).

我一直在寻找一种方法来自定义默认选项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选项已更新,但模式不再起作用,所以我想我错过了一些东西.

你知道如何以适当的方式扩展角度默认值吗？

谢谢

更新:没有.setDefaults活动的选项对象(de initial state)

注意:我已从他们的核心复制transformTemplate并添加到我的默认对象中,但结果是相同的.我可以看到DOM更新,控制台没有错误,但模态不可见.

Answer 1

如果要从第三方库更新现有功能,应尝试使用装饰器模式并装饰服务方法.

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

$ provide.decorator

$provide.decorator(name, decorator);

使用$ injector注册服务装饰器.服务装饰器拦截服务的创建,允许它覆盖或修改服务的行为.装饰器返回的对象可以是原始服务,也可以是替换或包装并委托给原始服务的新服务对象.

您可以编写一个装饰器$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;
  });
});

我创建了一个带有工作示例的codepen,{ hasBackdrop: false }以便在调用时不显示背景$mdDialog.show():http://codepen.io/addi90/pen/RaXqRx