Angular JS指令模糊事件不适用于链接菜单？

Question

我在 Angular js 中创建了 link menu 指令，该指令将在输入键按下和鼠标悬停时显示菜单项，但我希望在菜单失去焦点时隐藏此菜单的功能。

我尝试了 ng-blur 指令 (ng-blur="linkMenuHoverOut($event)")，甚至我创建了自定义指令 on-blur (on-blur="linkMenuHoverOut($event)") 来管理模糊事件，但它不起作用。

请给我建议来解决这个问题。谢谢你！！

指令代码：

<div>
    <div tabindex="0" class="link-div" data-ng-keydown="onLinkKeyPress($event)" data-ng-click="onLinkClick($event)" aria-label="Link Menu - Press enter for more options" ng-mouseenter="linkMenuHoverIn($event)">
        <a id="aPrintText">Link Menu</a>
    </div>
    <div id="divLinkMenu" ng-show="showLinkMenu" ng-mouseleave="linkMenuHoverOut($event)"  style="margin-top: 18px">
        <ul class="link-dropdown-menu" on-blur="linkMenuHoverOut($event)">
            <li tabindex="0" id="{{'linkMenu'+menuItem.id}}" ng-repeat="menuItem in masterMenuItems" data-ng-click="onMenuItemClick($event, menuItem)">
                <a class="link-menu-link" aria-label="{{menuItem.name}}">{{menuItem.name}}

          </a>
            </li>
        </ul>
    </div>

</div>

app.directive('linkMenu', ['$window', '$timeout', '$location', 'KeyCodeConstant',
  function(window, timeout, location, keyCodeConstant) {
    return {
      restrict: "E",
      replace: true,
      transclude: true,
      templateUrl: 'menu.html',
      link: function(scope, element, attrs, controller) {
        scope.showLinkMenu = false;

        scope.masterMenuItems = [{
          id: 1,
          name: "Menu Item1"
        }, {
          id: 2,
          name: "Menu Item2"
        }];

        scope.onLinkKeyPress = function(event) {
          if (event.keyCode !== keyCodeConstant.ENTER_KEY) {
            return;
          }
          scope.onLinkClick(event);
        }

        scope.onLinkClick = function($event) {
          if (scope.showLinkMenu) {
            scope.showLinkMenu = false;
          } else {
            scope.showLinkMenu = true;
          }

          scope.linkMenuHoverIn($event);
          var uiElement = element.find('#linkMenu1');
          timeout(function() {
            if (uiElement) {
              uiElement.focus();
            }
          });

          event.stopPropagation();
        };

        scope.onMenuItemClick = function(event, menuItem) {
          scope.linkMenuHoverOut(event);
          showAlert(menuItem.id);
        };

        scope.linkMenuHoverIn = function(event) {
          showHidePrintMenu(true);
          scope.showLinkMenu = true;
          event.stopPropagation();
        };

        scope.linkMenuHoverOut = function(event) {
          showHidePrintMenu(false);
          scope.showLinkMenu = false;
          event.stopPropagation();
        }

        function showAlert(menuId) {
          timeout(function() {
            alert('Menu ' + menuId + ' Clicked');
          }, 50); //Print Current Window
        };


        function showHidePrintMenu(isShow) {
          var printMenuContainer = angular.element('#divLinkMenu');
          if (printMenuContainer) {
            if (isShow) {
              printMenuContainer.show();
            } else {
              printMenuContainer.hide();
            }
          }
        }
      }
    }
  }
]);


app.directive('onBlur', function() {
  return function(scope, element, attrs) {
    element.bind('blur', function(event) {
      scope.$apply(function() {
        scope.$eval(attrs.onBlur, {
          'event': event
        });
      });

      event.preventDefault();
    });
  };
});

app.constant("KeyCodeConstant", {
  ENTER_KEY: 13,
  UPARROW_KEY: 38,
  DOWNARROW_KEY: 40
});

Answer 1

我相信这可能是由点击处理程序中的 event.stopPropagation(); 代码引起的。单击不同的元素后会发生模糊。停止传播可能会阻止模糊事件在某些浏览器中发生。