Angular JSディレクティブブラーイベントがリンクメニューで機能していませんか？

Enterキーを押したときとマウスを動かすときにメニュー項目を表示する角度js内にlink menu指示文を作成しましたが、フォーカスが失われたときにこのメニューを非表示にする機能が必要です。Angular JSディレクティブブラーイベントがリンクメニューで機能していませんか？

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 
});

出典

2016-07-06 Sumit Deshpande