javascript - 从 Angular Material 中禁用 'outside click' 上的 'FAB Speed Dialog'

Question

根据这支笔:http://codepen.io/kuhnroyal/pen/zrEpXK当您单击元素外部(外部单击)时，它会关闭 FAB Dial。

  <md-fab-speed-dial md-trigger="click" md-direction="down" class="md-scale md-fab-top-right">
    <md-fab-trigger>
      <md-button aria-label="menu" class="md-fab md-warn">
        <i class="fa fa-plus"></i>
      </md-button>
    </md-fab-trigger>
    <md-fab-actions>
      <md-button aria-label="Create Data App" class="md-fab md-raised md-mini" ng-click="action($event)">
        <md-tooltip>Create Data App</md-tooltip>
      </md-button>
    </md-fab-actions>
  </md-fab-speed-dial>

这支笔被开发为当您单击其子项时仍然显示，我想要相同的行为，但当您单击外部时。

PS:我唯一的解决方法是在 angular-material.js 中注释行:10072，其中包括当您单击外部时关闭 FAB :

function checkForOutsideClick(event) {
  if (event.target) {
    var closestTrigger = $mdUtil.getClosest(event.target, 'md-fab-trigger');
    var closestActions = $mdUtil.getClosest(event.target, 'md-fab-actions');

    if (!closestTrigger && !closestActions) {
      // vm.close();
    }
  }
}

Answer 1

FAB 快速拨号当前不提供自定义此交互的方法，因此您肯定需要稍微修改代码以使其按您想要的方式工作。您的解决方案似乎有效。

团队已讨论添加 md-is-locked-open 属性 ( https://github.com/angular/material/issues/4973 )，以便用户可以更好地控制此行为，但尚未实现，目前还不是一个优先。