Question

我成功地将角度材质的md-panel组件转换为popover（因为AM没有像md-popover这样的单独组件）并在mouseover事件中显示它。 md-panel可以通过方法“clickOutsideToClose”在点击身体的任何位置时关闭。但是我没有任何方法可以调用ng-mouseout来关闭/销毁md-panel组件。

HTML：

<div ng-app="MyApp">
  <div ng-controller="MainCtrl">
    <md-button class="md-popover" ng-mouseover="showPopover($event)">Show Popover</md-button>
  </div>
</div>

CSS：

.simple-popover {
    min-width: 50px;
    min-height: 20px;
    padding: 16px;
    background: #fafafa;
    opacity: 1;
    -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.md-popover:focus {
    outline: none;
}

JS：

(function(){
var app = angular.module('MyApp',['ngMaterial'])
app.controller('MainCtrl', function MainCtrl($scope, $mdPanel) {
  $scope.showPopover  = function(ev) {
    var position = $mdPanel.newPanelPosition()
        .relativeTo('.md-popover')
        .addPanelPosition($mdPanel.xPosition.ALIGN_START, $mdPanel.yPosition.BELOW);
        var panelAnimation = $mdPanel.newPanelAnimation()
            .openFrom('.md-popover')
            .closeTo('.md-popover')
            .withAnimation($mdPanel.animation.SCALE);
    var config = {
      attachTo: angular.element(document.body),
      template: 'This is a simple popover',
      panelClass: 'simple-popover',
      animation: panelAnimation,
      position: position,
      openFrom: ev,
      clickOutsideToClose: true,
      escapeToClose: true,
      focusOnOpen: false
    }
    $mdPanel.open(config);
  }
});
})();

JS小提琴工作示例： https://jsfiddle.net/rxby6cac/14/

关于如何在mouseleave / mouseout事件上关闭md-panel的任何想法/工作。

如何在mouseout事件上关闭md-panel（转换为popover）

0 个答案: