从 Angular Material 开始在 'FAB Speed Dialog' 上禁用 'outside click'

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>

这支笔被开发为当你点击它时仍然显示children，我想要相同的行为但是当你点击外部时。

PS：我得到的唯一解决方法是注释行：10072 in angular-material.js 其中包括当您在外部单击时关闭 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），以便用户可以更好地控制这种行为，但尚未实现，目前不是优先事项。

Answer 2

我有一个用例，我想要相同的行为。但是，我喜欢尽可能避免修改第 3 方源代码。

覆盖 angular 指令的默认行为的最佳方法是使用装饰器。

这篇文章很有帮助 - http://angular-tips.com/blog/2013/09/experiment-decorating-directives/

下面的代码片段适用于 angular-material 0.11.0

angular
.module('app')
.config( $provide => { 
     $provide.decorator('mdFabSpeedDialDirective', ($delegate, $controller) => {
          let directive = $delegate[0];

          let controllerName = directive.controller;

          directive.controller = (['$scope', '$element', '$animate', '$mdUtil', '$mdConstant', ($scope, $element, $animate, $mdUtil, $mdConstant) => {
              let controller = $controller(controllerName, {$scope : $scope, $element : $element, $animate : $animate, $mdUtil : $mdUtil, $mdConstant : $mdConstant});
               controller.close = () => {return};
               return controller;
          }]);

          return $delegate;
     });
});

从 Angular Material 开始在 'FAB Speed Dialog' 上禁用 'outside click'

Disable 'outside click' on 'FAB Speed Dialog' from Angular Material

javascript

angular-material