Question

我在角度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（）; 代码引起的。单击其他元素后会出现模糊。停止传播可能会阻止模糊事件在某些浏览器中发生。

Angular JS指令模糊事件无法使用链接菜单？

1 个答案: