Angular JS directory blur event funktioniert nicht mit dem Linkmenü?

Question

Ich erstellte link menu Direktive in eckigen js, die Menüeinträge auf Enter-Taste drücken und auf Maus zeigen, aber ich möchte Funktionalität dieses Menü auf Unschärfe-Ereignis ausblenden, wenn Menü den Fokus verliert.

Ich versuchte ng-blur Direktive (ng-blur="linkMenuHoverOut($event)"), sogar ich erstellte benutzerdefinierte Anweisung on-blur (on-blur="linkMenuHoverOut($event)"), um das Blur-Ereignis zu verwalten, aber es funktioniert nicht.

Bitte geben Sie mir Vorschläge, um das zu beheben. Danke!!

Richtlinie Code:

<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

ich glauben könnte() von Ihrer event.stopPropagation verursacht werden; Code im Click-Handler. Die Unschärfe würde nach einem Klick auf ein anderes Element auftreten. Durch das Stoppen der Übertragung kann das Blur-Ereignis in einigen Browsern möglicherweise nicht mehr auftreten.