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