Question

根据此笔：http://codepen.io/kuhnroyal/pen/zrEpXK当您点击元素外部（外部点击）时，它会关闭FAB拨号。

  <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：我唯一的解决方法是对10072中的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

我有一个用例我需要相同的行为。但是，我希望尽可能避免修改第三方源代码。

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

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

下面这个片段适用于角度材料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”上的“外部点击”

2 个答案: