ng-blur on a DIV

Question

I am trying to hide a DIV on blur (the focus has been removed from the DIV ). I am using angular and bootstrap. So far I have tried setting "focus" on the DIV when it is shown and then an ng-blur function when the user click anywhere else on the screen. This is not working.

Basically the problem is I cannot set focus on my " #lockerBox " through JS, my " hideLocker " function works no problem when focus is given to my DIV with clicking it.

<div class="lock-icon" ng-click="showLocker(result); $event.stopPropagation();"></div>
<div ng-show="result.displayLocker" id="lockerBox" ng-click="$event.stopPropagation();" ng-blur="hideLocker(result)" tabindex="1">

  $scope.displayLocker = false;
  $scope.showLocker = function ( result ) {

    $scope.displayLocker = !$scope.displayLocker;
    node.displayLocker = $scope.displayLocker;

    function setFocus() {
      angular.element( document.querySelector( '#lockerBox' ) ).addClass('focus');
    }

    $timeout(setFocus, 100);
  };


  $scope.hideLocker = function ( node ) {
    $scope.displayLocker = false;
    node.displayLocker = $scope.displayLocker;
  };

Answer 1

Just add tabindex="-1" attr to the div and it gives it the same behave like an input -

<div tabindex="-1" ng-blur="onBlur()"></div>

https://jsfiddle.net/ast12nLf/1/

(Inspired from here - https://stackoverflow.com/a/17042452/831294 )

Answer 2

我最终只在具有onclick的元素上设置blur事件。

Answer 3

Even I had the same problem - but was able to resolve it using 'mouseup' event on the entire document in a custom directive following is the code, where I am toggling an accordion contained in a div as pop-up using ng-show()="variable" now this variable is the key here across menu toggle button HTML Element, div pop up HTML Element, and the custom directive to handle mouse up!

 var dummyDirective = angular.module(dummyDirective, []); dummyDirective.directive('hideOnMouseUpElsewhere', function() { return { restrict: 'A', link: function(scope, element, attr) { $(document).mouseup(function(e) { var container = $(element); if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0 && scope.status.menuVisible // ... nor a descendant of the container && !(e.target.id === attr.excludeClick)) // do not execute when clicked on this { scope.status.menuVisible = false; scope.$apply(); } }); } } }) 

where container will have the DOM element you applied 'hideOnMouseUpElsewhere' directive on along with added attribute 'excludeClick' and e.target is the one DOM element where you click

Following is the HTML code for a accrodian bootstrap angular popup menu:

 <a id="MenuAnchor" href="" data-toggle="dropdown" class="dropdown-toggle" ng-click="status.menuVisible = !status.menuVisible;"> <i id= "MenuIcon" class="glyphicon glyphicon-cog" style="font-size:20px; color: #428bca; cursor:pointer;"></i> </a> <div id ="MenuPane" ng-blur="status.menuVisible=false;" hide-on-mouse-up-elsewhere exclude-click='MenuIcon'> <div class="btn-group favoritesMenu" style="width: 300px;" ng-show="status.menuVisible" > <accordion close-others="true"> <accordion-group > <accordion-heading>....</accordion-heading> <div ng-click="status.menuVisible=false;">Data</div> </accordion-group> </accordion>