Angular JS指令模糊事件不適用於鏈接菜單？

我在角度js中創建了link menu指令，它將在輸入按鍵和鼠標懸停時顯示菜單項，但是我希望功能在菜單失去焦點時隱藏菜單模糊事件。Angular JS指令模糊事件不適用於鏈接菜單？

我嘗試ng-blur指令（ng-blur="linkMenuHoverOut($event)"），即使我創建了自定義僞指令（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 
});

來源

2016-07-06 Sumit Deshpande