md-dialog打开mdp-time-picker时自动关闭问题求助

我之前在项目里也碰到过一模一样的坑！当时试了multiple: true参数没用，后来才搞明白核心原因——md-time-picker根本不是md-dialog的实例，那个参数是专门给多个md-dialog共存场景设计的，对时间选择器完全无效。

下面给你两个亲测有效的解决方案：

方案一：阻止事件冒泡，避免触发对话框关闭 #

点击md-time-picker的时候，事件会冒泡到md-dialog的外层容器，触发了对话框默认的“点击外部关闭”逻辑。我们只需要在时间选择器的父元素上阻止事件传播就行：

<md-dialog>
  <md-dialog-content>
    <!-- 给每个时间选择器套一层，阻止事件冒泡 -->
    <div ng-click="$event.stopPropagation()">
      <md-time-picker ng-model="vm.startTime" label="开始时间"></md-time-picker>
    </div>
    <div ng-click="$event.stopPropagation()">
      <md-time-picker ng-model="vm.endTime" label="结束时间"></md-time-picker>
    </div>
  </md-dialog-content>
  <md-dialog-actions>
    <md-button ng-click="vm.cancel()">取消</md-button>
    <md-button ng-click="vm.save()">确认</md-button>
  </md-dialog-actions>
</md-dialog>

这样点击时间选择器的时候，事件不会传到md-dialog的背景层或者关闭触发区域，对话框就不会意外关闭了。

方案二：强制对话框仅通过主动操作关闭 #

如果方案一还是有问题，你可以直接禁用对话框的自动关闭行为，只允许用户点击按钮来关闭：

// 在调用$mdDialog.show的地方修改配置
$mdDialog.show({
  templateUrl: 'path/to/your/dialog.html',
  controller: 'YourDialogCtrl',
  controllerAs: 'vm',
  clickOutsideToClose: false, // 禁止点击外部关闭
  escapeToClose: false, // 禁止ESC键关闭
  // 其他配置项
}).then(function(result) {
  // 处理用户确认后的逻辑
}, function() {
  // 处理用户取消后的逻辑
});

然后在对话框控制器里，手动实现关闭逻辑：

angular.module('yourApp').controller('YourDialogCtrl', function($mdDialog) {
  var vm = this;

  vm.cancel = function() {
    $mdDialog.cancel();
  };

  vm.save = function() {
    $mdDialog.hide({
      startTime: vm.startTime,
      endTime: vm.endTime
    });
  };
});

这样不管怎么操作时间选择器，对话框都不会自己关闭，只有用户点击取消/确认按钮才会触发关闭流程。

为什么multiple: true没用？ #

再补充下原因：multiple: true是Angular Material为md-dialog设计的参数，作用是允许同时打开多个md-dialog实例。但md-time-picker的弹出层是基于md-menu或者自定义的弹出组件实现的，不属于md-dialog的范畴，所以对话框管理器不会把它当成“另一个对话框”，自然不会触发multiple参数的逻辑，原来的对话框还是会被关闭。

内容的提问来源于stack exchange，提问作者Kuajia